Merge branch 'v7.x' into relase-v7.22.2

docs/data/charts/axis/CustomDomainYAxis.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { BarChart } from '@mui/x-charts/BarChart';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+
+const settings = {
+  valueFormatter: (value) => `${value}%`,
+  height: 200,
+  showTooltip: true,
+  showHighlight: true,
+  series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }],
+  margin: { top: 10, bottom: 20 },
+};
+
+// Extend a value to match a multiple of the step.
+function extend(value, step) {
+  if (value > 0) {
+    // If >0 go to the next step
+    return step * Math.ceil(value / step);
+  }
+  // If <0 go to the previous step
+  return step * Math.floor(value / step);
+}
+
+export default function CustomDomainYAxis() {
+  const [domainLimit, setDomainLimit] = React.useState('nice');
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <TextField
+        select
+        value={domainLimit}
+        onChange={(event) => setDomainLimit(event.target.value)}
+        label="domain limit"
+        sx={{ minWidth: 150, mb: 2 }}
+      >
+        <MenuItem value="nice">nice</MenuItem>
+        <MenuItem value="strict">strict</MenuItem>
+        <MenuItem value="function">function</MenuItem>
+      </TextField>
+      <BarChart
+        yAxis={[
+          {
+            domainLimit:
+              domainLimit === 'function'
+                ? (min, max) => ({
+                    min: extend(min, 10),
+                    max: extend(max, 10),
+                  })
+                : domainLimit,
+          },
+        ]}
+        {...settings}
+      />
+    </Box>
+  );
+}

docs/data/charts/axis/CustomDomainYAxis.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { BarChart } from '@mui/x-charts/BarChart';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+
+const settings = {
+  valueFormatter: (value: number | null) => `${value}%`,
+  height: 200,
+  showTooltip: true,
+  showHighlight: true,
+  series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }],
+  margin: { top: 10, bottom: 20 },
+};
+
+// Extend a value to match a multiple of the step.
+function extend(value: number, step: number) {
+  if (value > 0) {
+    // If >0 go to the next step
+    return step * Math.ceil(value / step);
+  }
+  // If <0 go to the previous step
+  return step * Math.floor(value / step);
+}
+
+export default function CustomDomainYAxis() {
+  const [domainLimit, setDomainLimit] = React.useState<
+    'nice' | 'strict' | 'function'
+  >('nice');
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <TextField
+        select
+        value={domainLimit}
+        onChange={(event) =>
+          setDomainLimit(event.target.value as 'nice' | 'strict' | 'function')
+        }
+        label="domain limit"
+        sx={{ minWidth: 150, mb: 2 }}
+      >
+        <MenuItem value="nice">nice</MenuItem>
+        <MenuItem value="strict">strict</MenuItem>
+        <MenuItem value="function">function</MenuItem>
+      </TextField>
+      <BarChart
+        yAxis={[
+          {
+            domainLimit:
+              domainLimit === 'function'
+                ? (min, max) => ({
+                    min: extend(min, 10),
+                    max: extend(max, 10),
+                  })
+                : domainLimit,
+          },
+        ]}
+        {...settings}
+      />
+    </Box>
+  );
+}

docs/data/charts/axis/axis.md

@@ -86,6 +86,20 @@ xAxis={[
 
 {{"demo": "MinMaxExample.js"}}
 
+### Relative axis subdomain
+
+You can adjust the axis range relatively to its data by using the `domainLimit` option.
+It can take 3 different values:
+
+- `"nice"` Rounds the domain at human friendly values. It's the default behavior.
+- `"strict"` Sets the domain to the min/max value to display.
+- `([minValue, maxValue]) => [min, max]` Receives the calculated extremums as parameters, and should return the axis domain.
+
+The demo below shows different ways to set the y-axis range.
+They always display the same data, going from -15 to 92, but with different `domainLimit` settings.
+
+{{"demo": "CustomDomainYAxis.js"}}
+
 ### Axis direction
 
 By default, the axes' directions are left to right and bottom to top.

docs/data/charts/sparkline/CustomDomainYAxis.js

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+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: (value) => `${value}%`,
+  height: 100,
+  showTooltip: true,
+  showHighlight: true,
+  data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91],
+  margin: { top: 10, bottom: 20, left: 5, right: 5 },
+  sx: (theme) => ({
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: theme.palette.divider,
+  }),
+};
+
+// Extend a value to match a multiple of the step.
+function extend(value, step) {
+  if (value > 0) {
+    // If >0 go to the next step
+    return step * Math.ceil(value / step);
+  }
+  // If <0 go to the previous step
+  return step * Math.floor(value / step);
+}
+
+const yRange = {
+  nice: '-100, 100',
+  strict: '-15, 92',
+  function: '-20, 100',
+};
+export default function CustomDomainYAxis() {
+  const [domainLimitKey, setDomainLimitKey] = React.useState('nice');
+
+  const domainLimit =
+    domainLimitKey === 'function'
+      ? (min, max) => ({
+          min: extend(min, 10),
+          max: extend(max, 10),
+        })
+      : domainLimitKey;
+  return (
+    <Box
+      sx={{
+        width: '100%',
+      }}
+    >
+      <Stack direction="row" alignItems="baseline" justifyContent="space-between">
+        <TextField
+          select
+          value={domainLimitKey}
+          onChange={(event) => setDomainLimitKey(event.target.value)}
+          label="domain limit"
+          sx={{ minWidth: 150, mb: 2 }}
+        >
+          <MenuItem value="nice">nice</MenuItem>
+          <MenuItem value="strict">strict</MenuItem>
+          <MenuItem value="function">function</MenuItem>
+        </TextField>
+        <Typography>y-axis range: {yRange[domainLimitKey]}</Typography>
+      </Stack>
+      <Stack
+        sx={{
+          width: '100%',
+        }}
+        direction="row"
+        spacing={2}
+      >
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart {...settings} yAxis={{ domainLimit }} />
+        </Box>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart plotType="bar" {...settings} yAxis={{ domainLimit }} />
+        </Box>
+      </Stack>
+    </Box>
+  );
+}

docs/data/charts/sparkline/CustomDomainYAxis.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { Theme } from '@mui/material/styles';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+const settings = {
+  valueFormatter: (value: number | null) => `${value}%`,
+  height: 100,
+  showTooltip: true,
+  showHighlight: true,
+  data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91],
+  margin: { top: 10, bottom: 20, left: 5, right: 5 },
+  sx: (theme: Theme) => ({
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: theme.palette.divider,
+  }),
+};
+
+// Extend a value to match a multiple of the step.
+function extend(value: number, step: number) {
+  if (value > 0) {
+    // If >0 go to the next step
+    return step * Math.ceil(value / step);
+  }
+  // If <0 go to the previous step
+  return step * Math.floor(value / step);
+}
+
+const yRange = {
+  nice: '-100, 100',
+  strict: '-15, 92',
+  function: '-20, 100',
+};
+export default function CustomDomainYAxis() {
+  const [domainLimitKey, setDomainLimitKey] = React.useState<
+    'nice' | 'strict' | 'function'
+  >('nice');
+
+  const domainLimit =
+    domainLimitKey === 'function'
+      ? (min: number, max: number) => ({
+          min: extend(min, 10),
+          max: extend(max, 10),
+        })
+      : domainLimitKey;
+  return (
+    <Box
+      sx={{
+        width: '100%',
+      }}
+    >
+      <Stack direction="row" alignItems="baseline" justifyContent="space-between">
+        <TextField
+          select
+          value={domainLimitKey}
+          onChange={(event) =>
+            setDomainLimitKey(event.target.value as 'nice' | 'strict' | 'function')
+          }
+          label="domain limit"
+          sx={{ minWidth: 150, mb: 2 }}
+        >
+          <MenuItem value="nice">nice</MenuItem>
+          <MenuItem value="strict">strict</MenuItem>
+          <MenuItem value="function">function</MenuItem>
+        </TextField>
+        <Typography>y-axis range: {yRange[domainLimitKey]}</Typography>
+      </Stack>
+      <Stack
+        sx={{
+          width: '100%',
+        }}
+        direction="row"
+        spacing={2}
+      >
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart {...settings} yAxis={{ domainLimit }} />
+        </Box>
+        <Box sx={{ flexGrow: 1 }}>
+          <SparkLineChart plotType="bar" {...settings} yAxis={{ domainLimit }} />
+        </Box>
+      </Stack>
+    </Box>
+  );
+}

docs/data/charts/sparkline/CustomYAxis.js

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 
 const settings = {
-  valueFormatter: (v) => `${v}%`,
+  valueFormatter: (value) => `${value}%`,
   height: 100,
   showTooltip: true,
   showHighlight: true,

docs/data/charts/sparkline/CustomYAxis.tsx

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 
 const settings = {
-  valueFormatter: (v: number | null) => `${v}%`,
+  valueFormatter: (value: number | null) => `${value}%`,
   height: 100,
   showTooltip: true,
   showHighlight: true,

docs/data/charts/sparkline/sparkline.md

@@ -58,3 +58,11 @@ The following demo shows two sparklines, one with small and another with large v
 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"}}
+
+You can adjust the y-axis range of a sparkline relatively to its data by using the `domainLimit` option in the `yAxis` configuration.
+See the [axis docs page](/x/react-charts/axis/#relative-axis-subdomain) for more information.
+
+The demo below shows different ways to set the y-axis range.
+They always display the same data, going from -15 to 92, but with different `domainLimit` settings.
+
+{{"demo": "CustomDomainYAxis.js"}}