From 51fb4a99803ad987b38882a0aa8154bbbf678f4d Mon Sep 17 00:00:00 2001 From: alexandre Date: Mon, 15 Apr 2024 11:01:35 +0200 Subject: [PATCH 1/2] [charts] Do not doccuent the usage of `DEFAULT_X_AXIS_KEY` --- docs/data/charts/axis/AxisCustomizationNoSnap.js | 2 -- docs/data/charts/axis/ModifyAxisPosition.tsx | 5 ++--- docs/data/charts/axis/axis.md | 4 +++- docs/data/charts/styling/MarginNoSnap.js | 7 +++---- packages/x-charts/src/context/CartesianContextProvider.tsx | 4 ++-- 5 files changed, 10 insertions(+), 12 deletions(-) diff --git a/docs/data/charts/axis/AxisCustomizationNoSnap.js b/docs/data/charts/axis/AxisCustomizationNoSnap.js index f33f0352d4813..c5d485e2286f7 100644 --- a/docs/data/charts/axis/AxisCustomizationNoSnap.js +++ b/docs/data/charts/axis/AxisCustomizationNoSnap.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; -import { DEFAULT_X_AXIS_KEY } from '@mui/x-charts/constants'; import { ScatterChart } from '@mui/x-charts/ScatterChart'; import { Chance } from 'chance'; @@ -41,7 +40,6 @@ export default function AxisCustomizationNoSnap() { ]} leftAxis={null} bottomAxis={{ - axisId: DEFAULT_X_AXIS_KEY, ...defaultXAxis, ...props, }} diff --git a/docs/data/charts/axis/ModifyAxisPosition.tsx b/docs/data/charts/axis/ModifyAxisPosition.tsx index e1d52c3d5ac83..dcbd3e3db6cc5 100644 --- a/docs/data/charts/axis/ModifyAxisPosition.tsx +++ b/docs/data/charts/axis/ModifyAxisPosition.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants'; import { ScatterChart } from '@mui/x-charts/ScatterChart'; import { Chance } from 'chance'; @@ -22,8 +21,8 @@ export default function ModifyAxisPosition() { {...params} leftAxis={null} bottomAxis={null} - topAxis={DEFAULT_X_AXIS_KEY} - rightAxis={DEFAULT_Y_AXIS_KEY} + topAxis={{}} + rightAxis={{}} margin={{ top: 30, bottom: 10 }} /> diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index c514ecf235804..10bb97df86c3b 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -197,7 +197,9 @@ Those pros can accept three type of value: - `null` to not display the axis - `string` which should correspond to the id of a `xAxis` for top and bottom. Or to the id of a `yAxis` for left and right. -- `object` which will be passed as props to `` or ``. It allows to specify which axis should be represent, and to customize the design of the axis. +- `object` which will be passed as props to `` or ``. It allows to specify which axis should be represent with the `axisId` property, and to customize the design of the axis. + +The demo below uses `leftAxis={null}` to remove the left axis, and `rightAxis={{}}` to set a right axis without overriding the default y-axis configuration. {{"demo": "ModifyAxisPosition.js"}} diff --git a/docs/data/charts/styling/MarginNoSnap.js b/docs/data/charts/styling/MarginNoSnap.js index a3d650272b817..6e00cc274bf91 100644 --- a/docs/data/charts/styling/MarginNoSnap.js +++ b/docs/data/charts/styling/MarginNoSnap.js @@ -1,7 +1,6 @@ import * as React from 'react'; import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; import { BarChart } from '@mui/x-charts/BarChart'; -import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants'; const data = ['left', 'right', 'top', 'bottom'].map((propName) => ({ propName, @@ -29,13 +28,13 @@ export default function MarginNoSnap() { }} xAxis={[ { - id: DEFAULT_X_AXIS_KEY, + id: 'x-axis', scaleType: 'band', data: ['Page 1', 'Page 2', 'Page 3'], }, ]} - topAxis={DEFAULT_X_AXIS_KEY} - rightAxis={DEFAULT_Y_AXIS_KEY} + topAxis="x-axis" + rightAxis={{}} /> )} diff --git a/packages/x-charts/src/context/CartesianContextProvider.tsx b/packages/x-charts/src/context/CartesianContextProvider.tsx index f0498ec11b63f..2cc81afd655f9 100644 --- a/packages/x-charts/src/context/CartesianContextProvider.tsx +++ b/packages/x-charts/src/context/CartesianContextProvider.tsx @@ -32,12 +32,12 @@ import { getColorScale, getOrdinalColorScale } from '../internals/colorScale'; export type CartesianContextProviderProps = { /** * The configuration of the x-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`. + * If not provided, a default axis config is used. */ xAxis?: MakeOptional[]; /** * The configuration of the y-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`. + * If not provided, a default axis config is used. */ yAxis?: MakeOptional[]; /** From ccf6bb623ae6f37a66e82ceed738d75c618d23aa Mon Sep 17 00:00:00 2001 From: alexandre Date: Mon, 15 Apr 2024 11:02:20 +0200 Subject: [PATCH 2/2] scripts --- docs/data/charts/axis/ModifyAxisPosition.js | 5 ++--- docs/data/charts/axis/ModifyAxisPosition.tsx.preview | 4 ++-- docs/translations/api-docs/charts/bar-chart/bar-chart.json | 4 ++-- .../api-docs/charts/chart-container/chart-container.json | 4 ++-- .../api-docs/charts/line-chart/line-chart.json | 4 ++-- docs/translations/api-docs/charts/pie-chart/pie-chart.json | 4 ++-- .../responsive-chart-container.json | 4 ++-- .../api-docs/charts/scatter-chart/scatter-chart.json | 4 ++-- packages/x-charts/src/BarChart/BarChart.tsx | 4 ++-- packages/x-charts/src/ChartContainer/ChartContainer.tsx | 4 ++-- packages/x-charts/src/ChartsAxis/ChartsAxis.tsx | 7 ++++--- packages/x-charts/src/LineChart/LineChart.tsx | 4 ++-- packages/x-charts/src/PieChart/PieChart.tsx | 4 ++-- .../ResponsiveChartContainer/ResponsiveChartContainer.tsx | 4 ++-- packages/x-charts/src/ScatterChart/ScatterChart.tsx | 4 ++-- 15 files changed, 32 insertions(+), 32 deletions(-) diff --git a/docs/data/charts/axis/ModifyAxisPosition.js b/docs/data/charts/axis/ModifyAxisPosition.js index e1d52c3d5ac83..dcbd3e3db6cc5 100644 --- a/docs/data/charts/axis/ModifyAxisPosition.js +++ b/docs/data/charts/axis/ModifyAxisPosition.js @@ -1,6 +1,5 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants'; import { ScatterChart } from '@mui/x-charts/ScatterChart'; import { Chance } from 'chance'; @@ -22,8 +21,8 @@ export default function ModifyAxisPosition() { {...params} leftAxis={null} bottomAxis={null} - topAxis={DEFAULT_X_AXIS_KEY} - rightAxis={DEFAULT_Y_AXIS_KEY} + topAxis={{}} + rightAxis={{}} margin={{ top: 30, bottom: 10 }} /> diff --git a/docs/data/charts/axis/ModifyAxisPosition.tsx.preview b/docs/data/charts/axis/ModifyAxisPosition.tsx.preview index 3f5c3cd0a5fb2..2c7210171b720 100644 --- a/docs/data/charts/axis/ModifyAxisPosition.tsx.preview +++ b/docs/data/charts/axis/ModifyAxisPosition.tsx.preview @@ -2,7 +2,7 @@ {...params} leftAxis={null} bottomAxis={null} - topAxis={DEFAULT_X_AXIS_KEY} - rightAxis={DEFAULT_Y_AXIS_KEY} + topAxis={{}} + rightAxis={{}} margin={{ top: 30, bottom: 10 }} /> \ No newline at end of file diff --git a/docs/translations/api-docs/charts/bar-chart/bar-chart.json b/docs/translations/api-docs/charts/bar-chart/bar-chart.json index 37cbf6fb2c982..3d356906dd2b6 100644 --- a/docs/translations/api-docs/charts/bar-chart/bar-chart.json +++ b/docs/translations/api-docs/charts/bar-chart/bar-chart.json @@ -58,10 +58,10 @@ "description": "The width of the chart in px. If not defined, it takes the width of the parent element." }, "xAxis": { - "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to DEFAULT_X_AXIS_KEY." + "description": "The configuration of the x-axes. If not provided, a default axis config is used." }, "yAxis": { - "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to DEFAULT_Y_AXIS_KEY." + "description": "The configuration of the y-axes. If not provided, a default axis config is used." } }, "classDescriptions": {}, diff --git a/docs/translations/api-docs/charts/chart-container/chart-container.json b/docs/translations/api-docs/charts/chart-container/chart-container.json index 1f9d070e16d5a..8080d75cf213a 100644 --- a/docs/translations/api-docs/charts/chart-container/chart-container.json +++ b/docs/translations/api-docs/charts/chart-container/chart-container.json @@ -17,10 +17,10 @@ }, "width": { "description": "The width of the chart in px." }, "xAxis": { - "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to DEFAULT_X_AXIS_KEY." + "description": "The configuration of the x-axes. If not provided, a default axis config is used." }, "yAxis": { - "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to DEFAULT_Y_AXIS_KEY." + "description": "The configuration of the y-axes. If not provided, a default axis config is used." } }, "classDescriptions": {} diff --git a/docs/translations/api-docs/charts/line-chart/line-chart.json b/docs/translations/api-docs/charts/line-chart/line-chart.json index 8da425ba637df..1c0594fce5e74 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -56,10 +56,10 @@ "description": "The width of the chart in px. If not defined, it takes the width of the parent element." }, "xAxis": { - "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to DEFAULT_X_AXIS_KEY." + "description": "The configuration of the x-axes. If not provided, a default axis config is used." }, "yAxis": { - "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to DEFAULT_Y_AXIS_KEY." + "description": "The configuration of the y-axes. If not provided, a default axis config is used." } }, "classDescriptions": {}, diff --git a/docs/translations/api-docs/charts/pie-chart/pie-chart.json b/docs/translations/api-docs/charts/pie-chart/pie-chart.json index 8293d8d7baaaf..a968d77da360a 100644 --- a/docs/translations/api-docs/charts/pie-chart/pie-chart.json +++ b/docs/translations/api-docs/charts/pie-chart/pie-chart.json @@ -44,10 +44,10 @@ "description": "The width of the chart in px. If not defined, it takes the width of the parent element." }, "xAxis": { - "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to DEFAULT_X_AXIS_KEY." + "description": "The configuration of the x-axes. If not provided, a default axis config is used." }, "yAxis": { - "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to DEFAULT_Y_AXIS_KEY." + "description": "The configuration of the y-axes. If not provided, a default axis config is used." } }, "classDescriptions": {}, diff --git a/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json b/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json index b27956f7f7419..c2d27fe6a10aa 100644 --- a/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json +++ b/docs/translations/api-docs/charts/responsive-chart-container/responsive-chart-container.json @@ -21,10 +21,10 @@ "description": "The width of the chart in px. If not defined, it takes the width of the parent element." }, "xAxis": { - "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to DEFAULT_X_AXIS_KEY." + "description": "The configuration of the x-axes. If not provided, a default axis config is used." }, "yAxis": { - "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to DEFAULT_Y_AXIS_KEY." + "description": "The configuration of the y-axes. If not provided, a default axis config is used." } }, "classDescriptions": {} diff --git a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json index 4aa4a64d3ea6a..ad851d29ce895 100644 --- a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json +++ b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json @@ -55,10 +55,10 @@ "description": "The width of the chart in px. If not defined, it takes the width of the parent element." }, "xAxis": { - "description": "The configuration of the x-axes. If not provided, a default axis config is used with id set to DEFAULT_X_AXIS_KEY." + "description": "The configuration of the x-axes. If not provided, a default axis config is used." }, "yAxis": { - "description": "The configuration of the y-axes. If not provided, a default axis config is used with id set to DEFAULT_Y_AXIS_KEY." + "description": "The configuration of the y-axes. If not provided, a default axis config is used." } }, "classDescriptions": {}, diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 8dc68161a1b0f..066d34f3c752e 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -485,7 +485,7 @@ BarChart.propTypes = { width: PropTypes.number, /** * The configuration of the x-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`. + * If not provided, a default axis config is used. */ xAxis: PropTypes.arrayOf( PropTypes.shape({ @@ -555,7 +555,7 @@ BarChart.propTypes = { ), /** * The configuration of the y-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`. + * If not provided, a default axis config is used. */ yAxis: PropTypes.arrayOf( PropTypes.shape({ diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx index cd499d714ebeb..9eacd20c16846 100644 --- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx +++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx @@ -136,7 +136,7 @@ ChartContainer.propTypes = { width: PropTypes.number.isRequired, /** * The configuration of the x-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`. + * If not provided, a default axis config is used. */ xAxis: PropTypes.arrayOf( PropTypes.shape({ @@ -206,7 +206,7 @@ ChartContainer.propTypes = { ), /** * The configuration of the y-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`. + * If not provided, a default axis config is used. */ yAxis: PropTypes.arrayOf( PropTypes.shape({ diff --git a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx index 463256ba29396..8e1111814712d 100644 --- a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx +++ b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx @@ -50,12 +50,13 @@ export interface ChartsAxisProps { const getAxisId = ( propsValue: undefined | null | string | ChartsXAxisProps | ChartsYAxisProps, + defaultAxisId?: string, ): AxisId | null => { if (propsValue == null) { return null; } if (typeof propsValue === 'object') { - return propsValue.axisId ?? null; + return propsValue.axisId ?? defaultAxisId ?? null; } return propsValue; }; @@ -92,8 +93,8 @@ function ChartsAxis(props: ChartsAxisProps) { const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis); const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis); - const topId = getAxisId(topAxis); - const rightId = getAxisId(rightAxis); + const topId = getAxisId(topAxis, xAxisIds[0]); + const rightId = getAxisId(rightAxis, yAxisIds[0]); if (topId !== null && !xAxis[topId]) { throw Error( diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 6a024b342c6a4..2ae0942c1b95b 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -519,7 +519,7 @@ LineChart.propTypes = { width: PropTypes.number, /** * The configuration of the x-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`. + * If not provided, a default axis config is used. */ xAxis: PropTypes.arrayOf( PropTypes.shape({ @@ -589,7 +589,7 @@ LineChart.propTypes = { ), /** * The configuration of the y-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`. + * If not provided, a default axis config is used. */ yAxis: PropTypes.arrayOf( PropTypes.shape({ diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 49280eda5a3b3..b582925577c45 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -450,7 +450,7 @@ PieChart.propTypes = { width: PropTypes.number, /** * The configuration of the x-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`. + * If not provided, a default axis config is used. */ xAxis: PropTypes.arrayOf( PropTypes.shape({ @@ -520,7 +520,7 @@ PieChart.propTypes = { ), /** * The configuration of the y-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`. + * If not provided, a default axis config is used. */ yAxis: PropTypes.arrayOf( PropTypes.shape({ diff --git a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx index 8ab25c02c01b7..4319acdb555a0 100644 --- a/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx +++ b/packages/x-charts/src/ResponsiveChartContainer/ResponsiveChartContainer.tsx @@ -114,7 +114,7 @@ ResponsiveChartContainer.propTypes = { width: PropTypes.number, /** * The configuration of the x-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`. + * If not provided, a default axis config is used. */ xAxis: PropTypes.arrayOf( PropTypes.shape({ @@ -184,7 +184,7 @@ ResponsiveChartContainer.propTypes = { ), /** * The configuration of the y-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`. + * If not provided, a default axis config is used. */ yAxis: PropTypes.arrayOf( PropTypes.shape({ diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 843fc7dc9d2d4..9f14ccef431e2 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -445,7 +445,7 @@ ScatterChart.propTypes = { width: PropTypes.number, /** * The configuration of the x-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`. + * If not provided, a default axis config is used. */ xAxis: PropTypes.arrayOf( PropTypes.shape({ @@ -515,7 +515,7 @@ ScatterChart.propTypes = { ), /** * The configuration of the y-axes. - * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`. + * If not provided, a default axis config is used. */ yAxis: PropTypes.arrayOf( PropTypes.shape({