[charts] Allow to specify y-axis configuration (mui#13438)

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Co-authored-by: Jose C Quintas Jr <juniorquintas@gmail.com>
DungTiger · Jul 23, 2024 · 3ee348b · 3ee348b
1 parent c79cfc7
commit 3ee348b
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 4 deletions.
diff --git a/docs/data/charts/sparkline/CustomYAxis.js b/docs/data/charts/sparkline/CustomYAxis.js
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+const settings = {
+  valueFormatter: (v) => `${v}%`,
+  height: 100,
+  showTooltip: true,
+  showHighlight: true,
+};
+
+const smallValues = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
+const largeValues = [60, 65, 66, 68, 87, 82, 83, 89, 92, 75, 76, 77, 91];
+export default function CustomYAxis() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <Typography>Without fixed y-range</Typography>
+      <Stack sx={{ width: '100%', mb: 2 }} direction="row" spacing={2}>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart data={smallValues} colors={['red']} {...settings} />
+        </Box>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart data={largeValues} {...settings} />
+        </Box>
+      </Stack>
+      <Typography>With y-range fixed to [0, 100]</Typography>
+      <Stack sx={{ width: '100%' }} direction="row" spacing={2}>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart
+            data={smallValues}
+            yAxis={{
+              min: 0,
+              max: 100,
+            }}
+            colors={['red']}
+            {...settings}
+          />
+        </Box>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart
+            data={largeValues}
+            yAxis={{
+              min: 0,
+              max: 100,
+            }}
+            {...settings}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/docs/data/charts/sparkline/CustomYAxis.tsx b/docs/data/charts/sparkline/CustomYAxis.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+const settings = {
+  valueFormatter: (v: number | null) => `${v}%`,
+  height: 100,
+  showTooltip: true,
+  showHighlight: true,
+} as const;
+
+const smallValues = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
+const largeValues = [60, 65, 66, 68, 87, 82, 83, 89, 92, 75, 76, 77, 91];
+export default function CustomYAxis() {
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <Typography>Without fixed y-range</Typography>
+      <Stack sx={{ width: '100%', mb: 2 }} direction="row" spacing={2}>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart data={smallValues} colors={['red']} {...settings} />
+        </Box>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart data={largeValues} {...settings} />
+        </Box>
+      </Stack>
+      <Typography>With y-range fixed to [0, 100]</Typography>
+      <Stack sx={{ width: '100%' }} direction="row" spacing={2}>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart
+            data={smallValues}
+            yAxis={{
+              min: 0,
+              max: 100,
+            }}
+            colors={['red']}
+            {...settings}
+          />
+        </Box>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart
+            data={largeValues}
+            yAxis={{
+              min: 0,
+              max: 100,
+            }}
+            {...settings}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/docs/data/charts/sparkline/sparkline.md b/docs/data/charts/sparkline/sparkline.md
@@ -35,6 +35,8 @@ If you need more advanced customization, you can provide custom props for `toolt
 
 ## Axis management
 
+### X-axis data
+
 By default, the sparkline assigns `xAxis` values as an ascending integer sequence starting from 0 (0, 1, 2,...). These values are, in this case, hidden in the tooltip.
 You can override this behavior if your data are not evenly distributed, or if you need to label them.
 
@@ -47,3 +49,12 @@ Whereas most of the other charts expect an array of axis configuration objects.
 ```
 
 {{"demo": "CustomAxis.js"}}
+
+### Y-axis range
+
+You can fix the y-range of the sparkline by providing `min`/`max` values to the `yAxis` configuration.
+
+The following demo shows two sparklines, one with small and another with large values.
+The first row has the default y-axis values, while on the second row a fixed range from `0` to `100` has been set.
+
+{{"demo": "CustomYAxis.js"}}
diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json
@@ -59,6 +59,12 @@
         "name": "shape",
         "description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, colorMap?: { colors: Array&lt;string&gt;, type: 'ordinal', unknownColor?: string, values?: Array&lt;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string&gt; }<br>&#124;&nbsp;{ color: Array&lt;string&gt;<br>&#124;&nbsp;func, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, type: 'continuous' }<br>&#124;&nbsp;{ colors: Array&lt;string&gt;, thresholds: Array&lt;Date<br>&#124;&nbsp;number&gt;, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number<br>&#124;&nbsp;string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, position?: 'bottom'<br>&#124;&nbsp;'top', reverse?: bool, scaleType?: 'band'<br>&#124;&nbsp;'linear'<br>&#124;&nbsp;'log'<br>&#124;&nbsp;'point'<br>&#124;&nbsp;'pow'<br>&#124;&nbsp;'sqrt'<br>&#124;&nbsp;'time'<br>&#124;&nbsp;'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number, valueFormatter?: func }"
       }
+    },
+    "yAxis": {
+      "type": {
+        "name": "shape",
+        "description": "{ axisId?: number<br>&#124;&nbsp;string, classes?: object, colorMap?: { colors: Array&lt;string&gt;, type: 'ordinal', unknownColor?: string, values?: Array&lt;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string&gt; }<br>&#124;&nbsp;{ color: Array&lt;string&gt;<br>&#124;&nbsp;func, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, type: 'continuous' }<br>&#124;&nbsp;{ colors: Array&lt;string&gt;, thresholds: Array&lt;Date<br>&#124;&nbsp;number&gt;, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number<br>&#124;&nbsp;string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, position?: 'left'<br>&#124;&nbsp;'right', reverse?: bool, scaleType?: 'band'<br>&#124;&nbsp;'linear'<br>&#124;&nbsp;'log'<br>&#124;&nbsp;'point'<br>&#124;&nbsp;'pow'<br>&#124;&nbsp;'sqrt'<br>&#124;&nbsp;'time'<br>&#124;&nbsp;'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number, valueFormatter?: func }"
+      }
     }
   },
   "name": "SparkLineChart",

diff --git a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json
@@ -42,7 +42,10 @@
       "description": "The width of the chart in px. If not defined, it takes the width of the parent element."
     },
     "xAxis": {
-      "description": "The xAxis configuration. Notice it is a single configuration object, not an array of configuration."
+      "description": "The xAxis configuration. Notice it is a single <a href='/x/api/charts/axis-config/'>AxisConfig</a> object, not an array of configuration."
+    },
+    "yAxis": {
+      "description": "The yAxis configuration. Notice it is a single <a href='/x/api/charts/axis-config/'>AxisConfig</a> object, not an array of configuration."
     }
   },
   "classDescriptions": {},

diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
@@ -14,7 +14,7 @@ import {
   ChartsTooltipSlots,
 } from '../ChartsTooltip';
 import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-import { AxisConfig, ChartsXAxisProps, ScaleName } from '../models/axis';
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
 import { MakeOptional } from '../models/helpers';
 import { LineSeriesType } from '../models/seriesType/line';
 import { CardinalDirections } from '../models/layout';
@@ -43,9 +43,14 @@ export interface SparkLineChartProps
   extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'margin' | 'plugins'> {
   /**
    * The xAxis configuration.
-   * Notice it is a single configuration object, not an array of configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>;
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>;
   tooltip?: ChartsTooltipProps;
   axisHighlight?: ChartsAxisHighlightProps;
   /**
@@ -129,6 +134,7 @@ const SPARKLINE_DEFAULT_MARGIN = {
 const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLineChartProps, ref) {
   const {
     xAxis,
+    yAxis,
     width,
     height,
     margin = SPARKLINE_DEFAULT_MARGIN,
@@ -178,6 +184,12 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine
           ...xAxis,
         },
       ]}
+      yAxis={[
+        {
+          id: DEFAULT_X_AXIS_KEY,
+          ...yAxis,
+        },
+      ]}
       colors={colors}
       sx={sx}
       disableAxisListener={
@@ -355,7 +367,7 @@ SparkLineChart.propTypes = {
   width: PropTypes.number,
   /**
    * The xAxis configuration.
-   * Notice it is a single configuration object, not an array of configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis: PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -415,6 +427,68 @@ SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
   }),
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis: PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([
+      PropTypes.shape({
+        colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+        type: PropTypes.oneOf(['ordinal']).isRequired,
+        unknownColor: PropTypes.string,
+        values: PropTypes.arrayOf(
+          PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string])
+            .isRequired,
+        ),
+      }),
+      PropTypes.shape({
+        color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func])
+          .isRequired,
+        max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+        min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+        type: PropTypes.oneOf(['continuous']).isRequired,
+      }),
+      PropTypes.shape({
+        colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+        thresholds: PropTypes.arrayOf(
+          PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired,
+        ).isRequired,
+        type: PropTypes.oneOf(['piecewise']).isRequired,
+      }),
+    ]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    position: PropTypes.oneOf(['left', 'right']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+  }),
 } as any;
 
 export { SparkLineChart };