From ee0133ae0f5b537d305977f7a5a33ac651c3a30d Mon Sep 17 00:00:00 2001 From: Kenan Yusuf Date: Thu, 7 Nov 2024 11:37:18 +0000 Subject: [PATCH 1/6] [DataGridPro] Should toggle row expansion with Enter key in Tree data (#15313) Co-authored-by: Rajat --- .../src/hooks/features/treeData/useGridTreeData.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx index 8f09f695627d4..b98528fb36935 100644 --- a/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx +++ b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx @@ -17,7 +17,7 @@ export const useGridTreeData = ( const cellParams = apiRef.current.getCellParams(params.id, params.field); if ( cellParams.colDef.field === GRID_TREE_DATA_GROUPING_FIELD && - event.key === ' ' && + (event.key === ' ' || event.key === 'Enter') && !event.shiftKey ) { if (params.rowNode.type !== 'group') { From f6544ad9eeed0cf8faba7e3fb71697bf28038d05 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 7 Nov 2024 16:37:33 +0500 Subject: [PATCH 2/6] [DataGrid] Add a recipe to persist column width and order (#15309) --- .../ColumnSizingPersistWidthOrder.js | 87 +++++++++++++++++ .../ColumnSizingPersistWidthOrder.tsx | 95 +++++++++++++++++++ .../ColumnSizingPersistWidthOrder.tsx.preview | 12 +++ docs/data/data-grid/column-recipes/index.md | 20 ++++ docs/data/pages.ts | 1 + .../pages/x/react-data-grid/column-recipes.js | 7 ++ 6 files changed, 222 insertions(+) create mode 100644 docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.js create mode 100644 docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx create mode 100644 docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx.preview create mode 100644 docs/data/data-grid/column-recipes/index.md create mode 100644 docs/pages/x/react-data-grid/column-recipes.js diff --git a/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.js b/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.js new file mode 100644 index 0000000000000..c1cebe22ca028 --- /dev/null +++ b/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.js @@ -0,0 +1,87 @@ +import * as React from 'react'; +import { + DataGridPro, + useGridApiRef, + gridColumnFieldsSelector, +} from '@mui/x-data-grid-pro'; +import Button from '@mui/material/Button'; + +const rows = [ + { + id: 1, + username: '@MUI', + age: 20, + }, +]; + +export default function ColumnSizingPersistWidthOrder() { + const apiRef = useGridApiRef(); + const [index, setIndex] = React.useState(0); + const inputColumns = React.useMemo( + () => [ + { field: 'id' }, + { field: 'username', width: 200, key: index }, + { field: 'age', disableReorder: true }, + ], + [index], + ); + + const columnsState = useColumnsState(apiRef, inputColumns); + + return ( +
+ +
+ +
+
+ ); +} + +const useColumnsState = (apiRef, columns) => { + const [widths, setWidths] = React.useState({}); + const [orderedFields, setOrderedFields] = React.useState(() => + columns.map((column) => column.field), + ); + + const onColumnWidthChange = React.useCallback( + ({ colDef, width }) => { + setWidths((prev) => ({ ...prev, [colDef.field]: width })); + }, + [setWidths], + ); + + const onColumnOrderChange = React.useCallback(() => { + setOrderedFields(gridColumnFieldsSelector(apiRef)); + }, [apiRef, setOrderedFields]); + + const computedColumns = React.useMemo( + () => + orderedFields.reduce((acc, field) => { + const column = columns.find((col) => col.field === field); + if (!column) { + return acc; + } + if (widths[field]) { + acc.push({ + ...column, + width: widths[field], + }); + return acc; + } + acc.push(column); + return acc; + }, []), + [columns, widths, orderedFields], + ); + + return { columns: computedColumns, onColumnWidthChange, onColumnOrderChange }; +}; diff --git a/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx b/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx new file mode 100644 index 0000000000000..a1880f3e70857 --- /dev/null +++ b/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; +import { + DataGridPro, + useGridApiRef, + GridColDef, + GridColumnResizeParams, + gridColumnFieldsSelector, + GridApiPro, +} from '@mui/x-data-grid-pro'; +import Button from '@mui/material/Button'; + +const rows = [ + { + id: 1, + username: '@MUI', + age: 20, + }, +]; + +export default function ColumnSizingPersistWidthOrder() { + const apiRef = useGridApiRef(); + const [index, setIndex] = React.useState(0); + const inputColumns = React.useMemo( + () => [ + { field: 'id' }, + { field: 'username', width: 200, key: index }, + { field: 'age', disableReorder: true }, + ], + [index], + ); + + const columnsState = useColumnsState(apiRef, inputColumns); + + return ( +
+ +
+ +
+
+ ); +} + +const useColumnsState = ( + apiRef: React.MutableRefObject, + columns: GridColDef[], +) => { + const [widths, setWidths] = React.useState>( + {}, + ); + const [orderedFields, setOrderedFields] = React.useState( + () => columns.map((column) => column.field), + ); + + const onColumnWidthChange = React.useCallback( + ({ colDef, width }: GridColumnResizeParams) => { + setWidths((prev) => ({ ...prev, [colDef.field]: width })); + }, + [setWidths], + ); + + const onColumnOrderChange = React.useCallback(() => { + setOrderedFields(gridColumnFieldsSelector(apiRef)); + }, [apiRef, setOrderedFields]); + + const computedColumns = React.useMemo( + () => + orderedFields.reduce((acc, field) => { + const column = columns.find((col) => col.field === field); + if (!column) { + return acc; + } + if (widths[field]) { + acc.push({ + ...column, + width: widths[field], + }); + return acc; + } + acc.push(column); + return acc; + }, []), + [columns, widths, orderedFields], + ); + + return { columns: computedColumns, onColumnWidthChange, onColumnOrderChange }; +}; diff --git a/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx.preview b/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx.preview new file mode 100644 index 0000000000000..7d13db3ac723f --- /dev/null +++ b/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx.preview @@ -0,0 +1,12 @@ + +
+ +
\ No newline at end of file diff --git a/docs/data/data-grid/column-recipes/index.md b/docs/data/data-grid/column-recipes/index.md new file mode 100644 index 0000000000000..9e4a1eb04587c --- /dev/null +++ b/docs/data/data-grid/column-recipes/index.md @@ -0,0 +1,20 @@ +--- +title: Data Grid - Column recipes +--- + +# Data Grid - Column customization recipes + +

Advanced column customization recipes.

+ +## Persisting column width and order + +When the `columns` prop reference is updated, the column width and order is reset to the `colDef.width` and the order of the `colDef` object and any updates will be lost. +This is because the Data Grid considers update of the columns prop as a new set of columns, and the previous state is discarded. + +To persist the column width and order when the `columns` prop is updated, consider persisting the state of the columns in the userland. + +{{"demo": "ColumnSizingPersistWidthOrder.js", "disableAd": true, "bg": "inline"}} + +:::warning +[Column ordering](/x/react-data-grid/column-ordering/) is a Pro feature, to use it you must be on a Pro or Premium plan. +::: diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 557be8daaba8b..5692afc3f704b 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -47,6 +47,7 @@ const pages: MuiPage[] = [ { pathname: '/x/react-data-grid/column-groups' }, { pathname: '/x/react-data-grid/column-ordering', plan: 'pro' }, { pathname: '/x/react-data-grid/column-pinning', plan: 'pro' }, + { pathname: '/x/react-data-grid/column-recipes', title: 'Recipes' }, ], }, { diff --git a/docs/pages/x/react-data-grid/column-recipes.js b/docs/pages/x/react-data-grid/column-recipes.js new file mode 100644 index 0000000000000..8fec3624c4302 --- /dev/null +++ b/docs/pages/x/react-data-grid/column-recipes.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/data-grid/column-recipes/index.md?muiMarkdown'; + +export default function Page() { + return ; +} From a3c23961d800a2bc505a72b0df818f654417ae2a Mon Sep 17 00:00:00 2001 From: Lukas Tyla Date: Thu, 7 Nov 2024 14:10:18 +0200 Subject: [PATCH 3/6] Bump moment-hijri to v3.0.0 (#15315) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- packages/x-date-pickers-pro/package.json | 2 +- packages/x-date-pickers/package.json | 4 ++-- pnpm-lock.yaml | 18 +++++++++--------- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/package.json b/docs/package.json index f9f2ee98e9448..4a09909dff8bf 100644 --- a/docs/package.json +++ b/docs/package.json @@ -73,7 +73,7 @@ "lz-string": "^1.5.0", "markdown-to-jsx": "^7.5.0", "moment": "^2.30.1", - "moment-hijri": "^2.30.0", + "moment-hijri": "^3.0.0", "moment-jalaali": "^0.10.1", "moment-timezone": "^0.5.46", "next": "^14.2.15", diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json index 4a6021a3a989c..54ba4842da783 100644 --- a/packages/x-date-pickers-pro/package.json +++ b/packages/x-date-pickers-pro/package.json @@ -61,7 +61,7 @@ "dayjs": "^1.10.7", "luxon": "^3.0.2", "moment": "^2.29.4", - "moment-hijri": "^2.1.2", + "moment-hijri": "^2.1.2 || ^3.0.0", "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json index 66239c132162d..6894f730358a3 100644 --- a/packages/x-date-pickers/package.json +++ b/packages/x-date-pickers/package.json @@ -63,7 +63,7 @@ "dayjs": "^1.10.7", "luxon": "^3.0.2", "moment": "^2.29.4", - "moment-hijri": "^2.1.2", + "moment-hijri": "^2.1.2 || ^3.0.0", "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" @@ -110,7 +110,7 @@ "dayjs": "^1.11.13", "luxon": "^3.5.0", "moment": "^2.30.1", - "moment-hijri": "^2.30.0", + "moment-hijri": "^3.0.0", "moment-jalaali": "^0.10.1", "moment-timezone": "^0.5.46", "rimraf": "^6.0.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 57785408e6f71..3dc546f312a6a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -567,8 +567,8 @@ importers: specifier: ^2.30.1 version: 2.30.1 moment-hijri: - specifier: ^2.30.0 - version: 2.30.0 + specifier: ^3.0.0 + version: 3.0.0 moment-jalaali: specifier: ^0.10.1 version: 0.10.1 @@ -1275,8 +1275,8 @@ importers: specifier: ^2.30.1 version: 2.30.1 moment-hijri: - specifier: ^2.30.0 - version: 2.30.0 + specifier: ^3.0.0 + version: 3.0.0 moment-jalaali: specifier: ^0.10.1 version: 0.10.1 @@ -1315,8 +1315,8 @@ importers: specifier: ^2.1.1 version: 2.1.1 moment-hijri: - specifier: ^2.1.2 - version: 2.30.0 + specifier: ^2.1.2 || ^3.0.0 + version: 3.0.0 moment-jalaali: specifier: ^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0 version: 0.10.1 @@ -7824,8 +7824,8 @@ packages: resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==} engines: {node: '>=0.10.0'} - moment-hijri@2.30.0: - resolution: {integrity: sha512-A3Ss8ASkhkT160laK9gXv+Yle0jA6eg92o8Uw78mU3OlUyaWjW2ntMd04kutawFb01KR0GIeJ8lqgIABGbWj7g==} + moment-hijri@3.0.0: + resolution: {integrity: sha512-UcBcbHDA8ToVcKjY+vBEa/hI3GZYraueavWUSLY2TdrHDHhx+wUpRw96rssAqsbT4xo/TMimwQVBP4KhJ3EN5A==} moment-jalaali@0.10.1: resolution: {integrity: sha512-/iwLtt3onvI6wFydUSTj10nFeNkD9sZ0fSY1gmqC2dwt1yGYJun6agI7E7SiBYi8uzGlt3P4KuPYCMLiv43E+g==} @@ -17616,7 +17616,7 @@ snapshots: modify-values@1.0.1: {} - moment-hijri@2.30.0: + moment-hijri@3.0.0: dependencies: moment: 2.30.1 From 541111432434e589f81f5c1d175bc8e26a965b1d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 7 Nov 2024 17:12:43 +0500 Subject: [PATCH 4/6] [DataGridPro] Apply default properties if they are not passed in a reorder column (@k-rajat19) (#15320) Co-authored-by: Rajat Co-authored-by: Bilal Shafi --- .../features/rowReorder/useGridRowReorderPreProcessors.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts b/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts index 12c63761f0ce2..39907eeb8b7a6 100644 --- a/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts +++ b/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts @@ -41,6 +41,10 @@ export const useGridRowReorderPreProcessors = ( const haveReorderColumn = columnsState.lookup[reorderColumn.field] != null; if (shouldHaveReorderColumn && haveReorderColumn) { + columnsState.lookup[reorderColumn.field] = { + ...reorderColumn, + ...columnsState.lookup[reorderColumn.field], + }; return columnsState; } From 29da224f96bdb30a7f04ae6c50bc1cbcc2ab0f91 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 7 Nov 2024 18:06:28 +0100 Subject: [PATCH 5/6] [charts] Add `domainLimit` to axis config. (@GuillaumeMeheut) (#15325) Co-authored-by: Guillaume Meheut <65776994+GuillaumeMeheut@users.noreply.github.com> Co-authored-by: alex Co-authored-by: Jose Quintas --- docs/data/charts/axis/CustomDomainYAxis.js | 59 ++++++++++++ docs/data/charts/axis/CustomDomainYAxis.tsx | 63 +++++++++++++ docs/data/charts/axis/axis.md | 14 +++ .../charts/sparkline/CustomDomainYAxis.js | 86 ++++++++++++++++++ .../charts/sparkline/CustomDomainYAxis.tsx | 90 +++++++++++++++++++ docs/data/charts/sparkline/sparkline.md | 8 ++ docs/pages/x/api/charts/axis-config.json | 5 ++ docs/pages/x/api/charts/bar-chart-pro.json | 4 +- docs/pages/x/api/charts/bar-chart.json | 4 +- .../x/api/charts/chart-container-pro.json | 4 +- docs/pages/x/api/charts/chart-container.json | 4 +- docs/pages/x/api/charts/heatmap.json | 4 +- docs/pages/x/api/charts/line-chart-pro.json | 4 +- docs/pages/x/api/charts/line-chart.json | 4 +- docs/pages/x/api/charts/pie-chart.json | 4 +- .../responsive-chart-container-pro.json | 4 +- .../charts/responsive-chart-container.json | 4 +- .../pages/x/api/charts/scatter-chart-pro.json | 4 +- docs/pages/x/api/charts/scatter-chart.json | 4 +- docs/pages/x/api/charts/spark-line-chart.json | 4 +- .../api-docs/charts/axis-config.json | 3 + .../src/BarChartPro/BarChartPro.tsx | 2 + .../ChartContainerPro/ChartContainerPro.tsx | 2 + packages/x-charts-pro/src/Heatmap/Heatmap.tsx | 2 + .../src/LineChartPro/LineChartPro.tsx | 2 + .../ResponsiveChartContainerPro.tsx | 2 + .../src/ScatterChartPro/ScatterChartPro.tsx | 2 + packages/x-charts/src/BarChart/BarChart.tsx | 2 + .../src/ChartContainer/ChartContainer.tsx | 2 + packages/x-charts/src/LineChart/LineChart.tsx | 2 + packages/x-charts/src/PieChart/PieChart.tsx | 2 + .../ResponsiveChartContainer.tsx | 2 + .../src/ScatterChart/ScatterChart.tsx | 2 + .../src/SparkLineChart/SparkLineChart.tsx | 2 + .../src/internals/computeAxisValue.ts | 17 +++- packages/x-charts/src/models/axis.ts | 7 ++ 36 files changed, 400 insertions(+), 30 deletions(-) create mode 100644 docs/data/charts/axis/CustomDomainYAxis.js create mode 100644 docs/data/charts/axis/CustomDomainYAxis.tsx create mode 100644 docs/data/charts/sparkline/CustomDomainYAxis.js create mode 100644 docs/data/charts/sparkline/CustomDomainYAxis.tsx diff --git a/docs/data/charts/axis/CustomDomainYAxis.js b/docs/data/charts/axis/CustomDomainYAxis.js new file mode 100644 index 0000000000000..e09bd4a4fb1de --- /dev/null +++ b/docs/data/charts/axis/CustomDomainYAxis.js @@ -0,0 +1,59 @@ +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: (v) => `${v}%`, + 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 ( + + setDomainLimit(event.target.value)} + label="domain limit" + sx={{ minWidth: 150, mb: 2 }} + > + nice + strict + function + + + ({ + min: extend(min, 10), + max: extend(max, 10), + }) + : domainLimit, + }, + ]} + {...settings} + /> + + ); +} diff --git a/docs/data/charts/axis/CustomDomainYAxis.tsx b/docs/data/charts/axis/CustomDomainYAxis.tsx new file mode 100644 index 0000000000000..999e0ec8ac39e --- /dev/null +++ b/docs/data/charts/axis/CustomDomainYAxis.tsx @@ -0,0 +1,63 @@ +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: (v: number | null) => `${v}%`, + 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 ( + + + setDomainLimit(event.target.value as 'nice' | 'strict' | 'function') + } + label="domain limit" + sx={{ minWidth: 150, mb: 2 }} + > + nice + strict + function + + + ({ + min: extend(min, 10), + max: extend(max, 10), + }) + : domainLimit, + }, + ]} + {...settings} + /> + + ); +} diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index e415596c25837..bf5e7161d5dfa 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -86,6 +86,20 @@ xAxis={[ {{"demo": "MinMaxExample.js"}} +### Relative axis sub domain + +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. diff --git a/docs/data/charts/sparkline/CustomDomainYAxis.js b/docs/data/charts/sparkline/CustomDomainYAxis.js new file mode 100644 index 0000000000000..7a96bc10f70e3 --- /dev/null +++ b/docs/data/charts/sparkline/CustomDomainYAxis.js @@ -0,0 +1,86 @@ +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: (v) => `${v}%`, + 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 ( + + + setDomainLimitKey(event.target.value)} + label="domain limit" + sx={{ minWidth: 150, mb: 2 }} + > + nice + strict + function + + y-axis range: {yRange[domainLimitKey]} + + + + + + + + + + + + ); +} diff --git a/docs/data/charts/sparkline/CustomDomainYAxis.tsx b/docs/data/charts/sparkline/CustomDomainYAxis.tsx new file mode 100644 index 0000000000000..3befb35356ed8 --- /dev/null +++ b/docs/data/charts/sparkline/CustomDomainYAxis.tsx @@ -0,0 +1,90 @@ +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: (v: number | null) => `${v}%`, + 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 ( + + + + setDomainLimitKey(event.target.value as 'nice' | 'strict' | 'function') + } + label="domain limit" + sx={{ minWidth: 150, mb: 2 }} + > + nice + strict + function + + y-axis range: {yRange[domainLimitKey]} + + + + + + + + + + + + ); +} diff --git a/docs/data/charts/sparkline/sparkline.md b/docs/data/charts/sparkline/sparkline.md index c85443972104c..c07e9cab3e42d 100644 --- a/docs/data/charts/sparkline/sparkline.md +++ b/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](http://localhost:3001/x/react-charts/axis/#relative-axis-sub-domain) form 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"}} diff --git a/docs/pages/x/api/charts/axis-config.json b/docs/pages/x/api/charts/axis-config.json index a3b887bf9d81d..930aac071102a 100644 --- a/docs/pages/x/api/charts/axis-config.json +++ b/docs/pages/x/api/charts/axis-config.json @@ -9,6 +9,11 @@ }, "data": { "type": { "description": "V[]" } }, "dataKey": { "type": { "description": "string" } }, + "domainLimit": { + "type": { + "description": "'nice' | 'strict' | ((min: number, max: number) => { min: number; max: number })" + } + }, "hideTooltip": { "type": { "description": "boolean" } }, "max": { "type": { "description": "number | Date" } }, "min": { "type": { "description": "number | Date" } }, diff --git a/docs/pages/x/api/charts/bar-chart-pro.json b/docs/pages/x/api/charts/bar-chart-pro.json index eecf8a971d9e4..5f9402154cb4f 100644 --- a/docs/pages/x/api/charts/bar-chart-pro.json +++ b/docs/pages/x/api/charts/bar-chart-pro.json @@ -107,13 +107,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "zoom": { diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index d01462ab42318..db313dda3c848 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -100,13 +100,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } } }, diff --git a/docs/pages/x/api/charts/chart-container-pro.json b/docs/pages/x/api/charts/chart-container-pro.json index f609eed0cc234..eb65097dc5875 100644 --- a/docs/pages/x/api/charts/chart-container-pro.json +++ b/docs/pages/x/api/charts/chart-container-pro.json @@ -44,13 +44,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/chart-container.json b/docs/pages/x/api/charts/chart-container.json index e9b1d158b9223..5701d94f40143 100644 --- a/docs/pages/x/api/charts/chart-container.json +++ b/docs/pages/x/api/charts/chart-container.json @@ -37,13 +37,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/heatmap.json b/docs/pages/x/api/charts/heatmap.json index 9b6928effba9a..73e966a09c058 100644 --- a/docs/pages/x/api/charts/heatmap.json +++ b/docs/pages/x/api/charts/heatmap.json @@ -7,14 +7,14 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" }, "required": true }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" }, "required": true }, diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index 20e5052922500..52fd5760554c4 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/docs/pages/x/api/charts/line-chart-pro.json @@ -101,13 +101,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "zoom": { diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 7602e918058c8..4fccfab6d9ffe 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -94,13 +94,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } } }, diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 1e8d0d773d8a7..8f480a4ce103d 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -89,13 +89,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } } }, diff --git a/docs/pages/x/api/charts/responsive-chart-container-pro.json b/docs/pages/x/api/charts/responsive-chart-container-pro.json index dffda539ca706..2934c31be3091 100644 --- a/docs/pages/x/api/charts/responsive-chart-container-pro.json +++ b/docs/pages/x/api/charts/responsive-chart-container-pro.json @@ -45,13 +45,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/responsive-chart-container.json b/docs/pages/x/api/charts/responsive-chart-container.json index b4acbdd2cf5a8..4bc3544a84b46 100644 --- a/docs/pages/x/api/charts/responsive-chart-container.json +++ b/docs/pages/x/api/charts/responsive-chart-container.json @@ -38,13 +38,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/scatter-chart-pro.json b/docs/pages/x/api/charts/scatter-chart-pro.json index 05e53fd6a0fc9..73c97994b81a6 100644 --- a/docs/pages/x/api/charts/scatter-chart-pro.json +++ b/docs/pages/x/api/charts/scatter-chart-pro.json @@ -98,13 +98,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index 2cf1751c2293c..06faebdcb3f46 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -91,13 +91,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" + "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index 7da12ca10d247..ef163ec9fc380 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -59,13 +59,13 @@ "xAxis": { "type": { "name": "shape", - "description": "{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }" + "description": "{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }" } }, "yAxis": { "type": { "name": "shape", - "description": "{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }" + "description": "{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }" } } }, diff --git a/docs/translations/api-docs/charts/axis-config.json b/docs/translations/api-docs/charts/axis-config.json index feb903056b6ae..408f91c75020b 100644 --- a/docs/translations/api-docs/charts/axis-config.json +++ b/docs/translations/api-docs/charts/axis-config.json @@ -10,6 +10,9 @@ "dataKey": { "description": "The key used to retrieve data from the dataset prop." }, + "domainLimit": { + "description": "Defines the axis scale domain based on the min/max values of series linked to it.
- 'nice': Rounds the domain at human friendly values.
- 'strict': Set the domain to the min/max value provided. No extras space is added.
- function: eceives the calculated extremums as parameters, and should return the axis domain." + }, "hideTooltip": { "description": "If true, hide this value in the tooltip" }, "max": { "description": "The maximal value of the domain.
If not provided, it gets computed to display the entire chart data." diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index 887cd1058746d..dc8efa3eea40a 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -379,6 +379,7 @@ BarChartPro.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -466,6 +467,7 @@ BarChartPro.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx index ac179fe6887cf..6fdc9550226a4 100644 --- a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx +++ b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx @@ -196,6 +196,7 @@ ChartContainerPro.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -283,6 +284,7 @@ ChartContainerPro.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx index f310b073bed57..e53f6bfda22ab 100644 --- a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx +++ b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx @@ -392,6 +392,7 @@ Heatmap.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -481,6 +482,7 @@ Heatmap.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index b7d66add50ba7..8f69817f0b8b6 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -451,6 +451,7 @@ LineChartPro.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -538,6 +539,7 @@ LineChartPro.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx index 1b4d6bb55161c..f4f1515b909b9 100644 --- a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx +++ b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx @@ -169,6 +169,7 @@ ResponsiveChartContainerPro.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -256,6 +257,7 @@ ResponsiveChartContainerPro.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index 74401ac085dc0..6113e521bc37b 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -320,6 +320,7 @@ ScatterChartPro.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -407,6 +408,7 @@ ScatterChartPro.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index ca3e113ac3027..c11822b6c74c5 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -400,6 +400,7 @@ BarChart.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -475,6 +476,7 @@ BarChart.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx index 7343ceb1a2fdf..ac039393bb60a 100644 --- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx +++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx @@ -203,6 +203,7 @@ ChartContainer.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -278,6 +279,7 @@ ChartContainer.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 127c029e98672..d180dec6eb2a1 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -436,6 +436,7 @@ LineChart.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -511,6 +512,7 @@ LineChart.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 94b5ae48ac893..7de3289d02ecc 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -434,6 +434,7 @@ PieChart.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -509,6 +510,7 @@ PieChart.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx index 2b8882a2c2ac9..82929324fc3e8 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx +++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx @@ -174,6 +174,7 @@ ResponsiveChartContainer.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -249,6 +250,7 @@ ResponsiveChartContainer.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 88a9465211217..aa3f6a09b09c9 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -395,6 +395,7 @@ ScatterChart.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -470,6 +471,7 @@ ScatterChart.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index d6e698333a55e..d420fda146a3d 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -423,6 +423,7 @@ SparkLineChart.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -489,6 +490,7 @@ SparkLineChart.propTypes = { dataKey: PropTypes.string, disableLine: PropTypes.bool, disableTicks: PropTypes.bool, + domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), fill: PropTypes.string, hideTooltip: PropTypes.bool, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/x-charts/src/internals/computeAxisValue.ts b/packages/x-charts/src/internals/computeAxisValue.ts index bd286f0848f64..46d5ad3df1fef 100644 --- a/packages/x-charts/src/internals/computeAxisValue.ts +++ b/packages/x-charts/src/internals/computeAxisValue.ts @@ -198,22 +198,31 @@ export function computeAxisValue({ const scaleType = axis.scaleType ?? ('linear' as const); + const domainLimit = axis.domainLimit ?? 'nice'; + const axisExtremums = [axis.min ?? minData, axis.max ?? maxData]; + + if (typeof domainLimit === 'function') { + const { min, max } = domainLimit(minData, maxData); + axisExtremums[0] = min; + axisExtremums[1] = max; + } + const rawTickNumber = getTickNumber({ ...axis, range, domain: axisExtremums }); const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100); const zoomedRange = zoomScaleRange(range, zoomRange); - // TODO: move nice to prop? Disable when there is zoom? - const scale = getScale(scaleType, axisExtremums, zoomedRange).nice(rawTickNumber); - const [minDomain, maxDomain] = scale.domain(); + const scale = getScale(scaleType, axisExtremums, zoomedRange); + const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale; + const [minDomain, maxDomain] = finalScale.domain(); const domain = [axis.min ?? minDomain, axis.max ?? maxDomain]; completeAxis[axis.id] = { ...axis, data, scaleType: scaleType as any, - scale: scale.domain(domain) as any, + scale: finalScale.domain(domain) as any, tickNumber, colorScale: axis.colorMap && getColorScale(axis.colorMap), }; diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index fddf9a852a7ba..e42777688f275 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -333,6 +333,13 @@ export type AxisConfig< * If `true`, Reverse the axis scaleBand. */ reverse?: boolean; + /** + * Defines the axis scale domain based on the min/max values of series linked to it. + * - 'nice': Rounds the domain at human friendly values. + * - 'strict': Set the domain to the min/max value provided. No extras space is added. + * - function: eceives the calculated extremums as parameters, and should return the axis domain. + */ + domainLimit?: 'nice' | 'strict' | ((min: number, max: number) => { min: number; max: number }); } & Omit, 'axisId'> & Partial> & TickParams & From 0beb2dfbfa84575891bd3f56bef2b8f4f9d3dfe4 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 8 Nov 2024 11:02:05 +0200 Subject: [PATCH 6/6] [charts] Fix `applyDomain` docs (@JCQuintas) (#15333) Co-authored-by: Jose C Quintas Jr --- docs/data/charts/axis/CustomDomainYAxis.js | 3 +-- docs/data/charts/axis/CustomDomainYAxis.tsx | 3 +-- docs/data/charts/axis/axis.md | 2 +- docs/data/charts/sparkline/CustomDomainYAxis.js | 3 +-- docs/data/charts/sparkline/CustomDomainYAxis.tsx | 3 +-- docs/data/charts/sparkline/CustomYAxis.js | 2 +- docs/data/charts/sparkline/CustomYAxis.tsx | 2 +- docs/data/charts/sparkline/sparkline.md | 2 +- docs/translations/api-docs/charts/axis-config.json | 2 +- packages/x-charts/src/models/axis.ts | 2 +- 10 files changed, 10 insertions(+), 14 deletions(-) diff --git a/docs/data/charts/axis/CustomDomainYAxis.js b/docs/data/charts/axis/CustomDomainYAxis.js index e09bd4a4fb1de..a9987854a6674 100644 --- a/docs/data/charts/axis/CustomDomainYAxis.js +++ b/docs/data/charts/axis/CustomDomainYAxis.js @@ -5,7 +5,7 @@ import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; const settings = { - valueFormatter: (v) => `${v}%`, + valueFormatter: (value) => `${value}%`, height: 200, showTooltip: true, showHighlight: true, @@ -39,7 +39,6 @@ export default function CustomDomainYAxis() { strict function - `${v}%`, + valueFormatter: (value: number | null) => `${value}%`, height: 200, showTooltip: true, showHighlight: true, @@ -43,7 +43,6 @@ export default function CustomDomainYAxis() { strict function - `${v}%`, + valueFormatter: (value) => `${value}%`, height: 100, showTooltip: true, showHighlight: true, @@ -66,7 +66,6 @@ export default function CustomDomainYAxis() { y-axis range: {yRange[domainLimitKey]} - `${v}%`, + valueFormatter: (value: number | null) => `${value}%`, height: 100, showTooltip: true, showHighlight: true, @@ -70,7 +70,6 @@ export default function CustomDomainYAxis() { y-axis range: {yRange[domainLimitKey]} - `${v}%`, + valueFormatter: (value) => `${value}%`, height: 100, showTooltip: true, showHighlight: true, diff --git a/docs/data/charts/sparkline/CustomYAxis.tsx b/docs/data/charts/sparkline/CustomYAxis.tsx index b4b8ed5199a41..0e9b561c154ba 100644 --- a/docs/data/charts/sparkline/CustomYAxis.tsx +++ b/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, diff --git a/docs/data/charts/sparkline/sparkline.md b/docs/data/charts/sparkline/sparkline.md index c07e9cab3e42d..aa87a158cd487 100644 --- a/docs/data/charts/sparkline/sparkline.md +++ b/docs/data/charts/sparkline/sparkline.md @@ -60,7 +60,7 @@ The first row has the default y-axis values, while on the second row a fixed ran {{"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](http://localhost:3001/x/react-charts/axis/#relative-axis-sub-domain) form more information. +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. diff --git a/docs/translations/api-docs/charts/axis-config.json b/docs/translations/api-docs/charts/axis-config.json index 408f91c75020b..380002d211fdc 100644 --- a/docs/translations/api-docs/charts/axis-config.json +++ b/docs/translations/api-docs/charts/axis-config.json @@ -11,7 +11,7 @@ "description": "The key used to retrieve data from the dataset prop." }, "domainLimit": { - "description": "Defines the axis scale domain based on the min/max values of series linked to it.
- 'nice': Rounds the domain at human friendly values.
- 'strict': Set the domain to the min/max value provided. No extras space is added.
- function: eceives the calculated extremums as parameters, and should return the axis domain." + "description": "Defines the axis scale domain based on the min/max values of series linked to it.
- 'nice': Rounds the domain at human friendly values.
- 'strict': Set the domain to the min/max value provided. No extras space is added.
- function: Receives the calculated extremums as parameters, and should return the axis domain." }, "hideTooltip": { "description": "If true, hide this value in the tooltip" }, "max": { diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index e42777688f275..c4114b0c78222 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -337,7 +337,7 @@ export type AxisConfig< * Defines the axis scale domain based on the min/max values of series linked to it. * - 'nice': Rounds the domain at human friendly values. * - 'strict': Set the domain to the min/max value provided. No extras space is added. - * - function: eceives the calculated extremums as parameters, and should return the axis domain. + * - function: Receives the calculated extremums as parameters, and should return the axis domain. */ domainLimit?: 'nice' | 'strict' | ((min: number, max: number) => { min: number; max: number }); } & Omit, 'axisId'> &