From e73cbb36dde9cfa8af4834442758a7fdf6110b6f Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Tue, 19 Nov 2024 14:08:55 +0100 Subject: [PATCH] [charts] Remove intrinsic size requirement (#15471) Signed-off-by: Jose C Quintas Jr Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- .../migration-charts-v7/migration-charts-v7.md | 5 +++++ docs/pages/x/api/charts/bar-chart-pro.json | 1 - docs/pages/x/api/charts/bar-chart.json | 1 - docs/pages/x/api/charts/chart-container-pro.json | 1 - docs/pages/x/api/charts/chart-container.json | 1 - docs/pages/x/api/charts/heatmap.json | 1 - docs/pages/x/api/charts/line-chart-pro.json | 1 - docs/pages/x/api/charts/line-chart.json | 1 - docs/pages/x/api/charts/pie-chart.json | 1 - docs/pages/x/api/charts/scatter-chart-pro.json | 1 - docs/pages/x/api/charts/scatter-chart.json | 1 - docs/pages/x/api/charts/spark-line-chart.json | 1 - .../charts/bar-chart-pro/bar-chart-pro.json | 3 --- .../api-docs/charts/bar-chart/bar-chart.json | 3 --- .../chart-container-pro/chart-container-pro.json | 3 --- .../charts/chart-container/chart-container.json | 3 --- .../api-docs/charts/heatmap/heatmap.json | 3 --- .../charts/line-chart-pro/line-chart-pro.json | 3 --- .../api-docs/charts/line-chart/line-chart.json | 3 --- .../api-docs/charts/pie-chart/pie-chart.json | 3 --- .../scatter-chart-pro/scatter-chart-pro.json | 3 --- .../charts/scatter-chart/scatter-chart.json | 3 --- .../spark-line-chart/spark-line-chart.json | 3 --- .../x-charts-pro/src/BarChartPro/BarChartPro.tsx | 10 ---------- .../src/ChartContainerPro/ChartContainerPro.tsx | 10 ---------- packages/x-charts-pro/src/Heatmap/Heatmap.tsx | 10 ---------- .../src/LineChartPro/LineChartPro.tsx | 10 ---------- .../src/ScatterChartPro/ScatterChartPro.tsx | 10 ---------- packages/x-charts/src/BarChart/BarChart.tsx | 10 ---------- .../src/ChartContainer/ChartContainer.tsx | 10 ---------- .../src/ChartContainer/ResizableContainer.tsx | 4 ++-- .../x-charts/src/ChartsSurface/ChartsSurface.tsx | 6 +++--- packages/x-charts/src/LineChart/LineChart.tsx | 10 ---------- packages/x-charts/src/PieChart/PieChart.tsx | 10 ---------- .../x-charts/src/ScatterChart/ScatterChart.tsx | 10 ---------- .../src/SparkLineChart/SparkLineChart.tsx | 10 ---------- .../ChartDataProvider/ChartDataProvider.tsx | 10 ---------- .../useChartDataProviderProps.ts | 2 -- .../src/context/SizeProvider/Size.types.ts | 10 ---------- .../src/context/SizeProvider/SizeProvider.tsx | 6 +----- .../SizeProvider/useChartContainerDimensions.ts | 16 ++++++---------- 41 files changed, 17 insertions(+), 196 deletions(-) diff --git a/docs/data/migration/migration-charts-v7/migration-charts-v7.md b/docs/data/migration/migration-charts-v7/migration-charts-v7.md index 52aa6512bacae..5fe6c6f9c75e0 100644 --- a/docs/data/migration/migration-charts-v7/migration-charts-v7.md +++ b/docs/data/migration/migration-charts-v7/migration-charts-v7.md @@ -120,3 +120,8 @@ This code has been removed in v8, which implies removing the following props: `a This should not impact your code. If you used axes in a pie chart please open an issue, we would be curious to get more information about the use-case. + +## Remove `resolveSizeBeforeRender` prop + +The `resolveSizeBeforeRender` prop has been removed from all components. +If you were using this prop, you can safely remove it. diff --git a/docs/pages/x/api/charts/bar-chart-pro.json b/docs/pages/x/api/charts/bar-chart-pro.json index acc0588810315..202c0e1a1544a 100644 --- a/docs/pages/x/api/charts/bar-chart-pro.json +++ b/docs/pages/x/api/charts/bar-chart-pro.json @@ -81,7 +81,6 @@ "describedArgs": ["zoomData"] } }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index d6224e22275c6..6d95694c7694d 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -74,7 +74,6 @@ "describedArgs": ["event", "barItemIdentifier"] } }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/chart-container-pro.json b/docs/pages/x/api/charts/chart-container-pro.json index ddebdaf446dc0..32ee3b1e532ea 100644 --- a/docs/pages/x/api/charts/chart-container-pro.json +++ b/docs/pages/x/api/charts/chart-container-pro.json @@ -39,7 +39,6 @@ } }, "plugins": { "type": { "name": "arrayOf", "description": "Array<object>" } }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "skipAnimation": { "type": { "name": "bool" } }, "width": { "type": { "name": "number" } }, "xAxis": { diff --git a/docs/pages/x/api/charts/chart-container.json b/docs/pages/x/api/charts/chart-container.json index 48e77d7b691d1..3f592ff3b5879 100644 --- a/docs/pages/x/api/charts/chart-container.json +++ b/docs/pages/x/api/charts/chart-container.json @@ -32,7 +32,6 @@ } }, "plugins": { "type": { "name": "arrayOf", "description": "Array<object>" } }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "skipAnimation": { "type": { "name": "bool" } }, "width": { "type": { "name": "number" } }, "xAxis": { diff --git a/docs/pages/x/api/charts/heatmap.json b/docs/pages/x/api/charts/heatmap.json index 73e966a09c058..333f0c5ea6592 100644 --- a/docs/pages/x/api/charts/heatmap.json +++ b/docs/pages/x/api/charts/heatmap.json @@ -61,7 +61,6 @@ "describedArgs": ["highlightedItem"] } }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index 7877f00b1b6e7..f2f0491e3ea52 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/docs/pages/x/api/charts/line-chart-pro.json @@ -74,7 +74,6 @@ "describedArgs": ["zoomData"] } }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index a1e466ccdc818..f7862a09a001c 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -67,7 +67,6 @@ }, "onLineClick": { "type": { "name": "func" } }, "onMarkClick": { "type": { "name": "func" } }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 935c0d74a230b..41b20f6e27f99 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -34,7 +34,6 @@ } }, "onItemClick": { "type": { "name": "func" } }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "skipAnimation": { "type": { "name": "bool" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { diff --git a/docs/pages/x/api/charts/scatter-chart-pro.json b/docs/pages/x/api/charts/scatter-chart-pro.json index 4a25cf42ad78a..e9aa9a25aa8e7 100644 --- a/docs/pages/x/api/charts/scatter-chart-pro.json +++ b/docs/pages/x/api/charts/scatter-chart-pro.json @@ -70,7 +70,6 @@ "describedArgs": ["zoomData"] } }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index bdef64f943c6d..d647c8234b401 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -63,7 +63,6 @@ "describedArgs": ["event", "scatterItemIdentifier"] } }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "rightAxis": { "type": { "name": "union", "description": "object
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index ef163ec9fc380..4b87535680392 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -36,7 +36,6 @@ "type": { "name": "enum", "description": "'bar'
| 'line'" }, "default": "'line'" }, - "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" }, "showHighlight": { "type": { "name": "bool" }, "default": "false" }, "showTooltip": { "type": { "name": "bool" }, "default": "false" }, "skipAnimation": { "type": { "name": "bool" } }, diff --git a/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json b/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json index 35449be42f229..7b30aa9f4c6d8 100644 --- a/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json +++ b/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json @@ -57,9 +57,6 @@ "description": "Callback fired when the zoom has changed.", "typeDescriptions": { "zoomData": "Updated zoom data." } }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, 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 404a7482233d1..684ba329429b0 100644 --- a/docs/translations/api-docs/charts/bar-chart/bar-chart.json +++ b/docs/translations/api-docs/charts/bar-chart/bar-chart.json @@ -53,9 +53,6 @@ "barItemIdentifier": "The bar item identifier." } }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json b/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json index 9d98438a058a7..3adf5b2e91ce3 100644 --- a/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json +++ b/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json @@ -28,9 +28,6 @@ "plugins": { "description": "An array of plugins defining how to preprocess data. If not provided, the container supports line, bar, scatter and pie charts." }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "series": { "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it." }, 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 4f5ba3a0d81fc..a15bc34c6f245 100644 --- a/docs/translations/api-docs/charts/chart-container/chart-container.json +++ b/docs/translations/api-docs/charts/chart-container/chart-container.json @@ -24,9 +24,6 @@ "plugins": { "description": "An array of plugins defining how to preprocess data. If not provided, the container supports line, bar, scatter and pie charts." }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "series": { "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it." }, diff --git a/docs/translations/api-docs/charts/heatmap/heatmap.json b/docs/translations/api-docs/charts/heatmap/heatmap.json index c693b034952ff..8db3fec541fc5 100644 --- a/docs/translations/api-docs/charts/heatmap/heatmap.json +++ b/docs/translations/api-docs/charts/heatmap/heatmap.json @@ -35,9 +35,6 @@ "description": "The callback fired when the highlighted item changes.", "typeDescriptions": { "highlightedItem": "The newly highlighted item." } }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json index 8e00228baa7e8..e331e549cdbc5 100644 --- a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json +++ b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json @@ -54,9 +54,6 @@ "description": "Callback fired when the zoom has changed.", "typeDescriptions": { "zoomData": "Updated zoom data." } }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, 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 0a0fb2b72a472..8b166a32278fd 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -50,9 +50,6 @@ }, "onLineClick": { "description": "Callback fired when a line element is clicked." }, "onMarkClick": { "description": "Callback fired when a mark element is clicked." }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, 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 d048f9dc88300..837389853351d 100644 --- a/docs/translations/api-docs/charts/pie-chart/pie-chart.json +++ b/docs/translations/api-docs/charts/pie-chart/pie-chart.json @@ -24,9 +24,6 @@ "typeDescriptions": { "highlightedItem": "The newly highlighted item." } }, "onItemClick": { "description": "Callback fired when a pie arc is clicked." }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "series": { "description": "The series to display in the pie chart. An array of PieSeriesType objects." }, diff --git a/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json b/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json index d48fa62f7b108..1ec6c60e26b4f 100644 --- a/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json +++ b/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json @@ -48,9 +48,6 @@ "description": "Callback fired when the zoom has changed.", "typeDescriptions": { "zoomData": "Updated zoom data." } }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, 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 1c03adc3330f9..f9aba25321b7e 100644 --- a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json +++ b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json @@ -44,9 +44,6 @@ "scatterItemIdentifier": "The scatter item identifier." } }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json index eb03c7e7457b9..24e7cb1b996b1 100644 --- a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json +++ b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json @@ -26,9 +26,6 @@ "typeDescriptions": { "highlightedItem": "The newly highlighted item." } }, "plotType": { "description": "Type of plot used." }, - "resolveSizeBeforeRender": { - "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.
This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid." - }, "showHighlight": { "description": "Set to true to highlight the value. With line, it shows a point. With bar, it shows a highlight band." }, diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index cf06bc9b1cd9b..bac0f2306e568 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -243,16 +243,6 @@ BarChartPro.propTypes = { * @param {ZoomData[]} zoomData Updated zoom data. */ onZoomChange: PropTypes.func, - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx index a007a28485a5e..4b77a752926ae 100644 --- a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx +++ b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx @@ -95,16 +95,6 @@ ChartContainerPro.propTypes = { * If not provided, the container supports line, bar, scatter and pie charts. */ plugins: PropTypes.arrayOf(PropTypes.object), - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * The array of series to display. * Each type of series has its own specificity. diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx index fa6afbe1c6820..c430cd6674c56 100644 --- a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx +++ b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx @@ -286,16 +286,6 @@ Heatmap.propTypes = { * @param {HighlightItemData | null} highlightedItem The newly highlighted item. */ onHighlightChange: PropTypes.func, - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index 45b21e15c2ebd..fbd60d08f1881 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -314,16 +314,6 @@ LineChartPro.propTypes = { * @param {ZoomData[]} zoomData Updated zoom data. */ onZoomChange: PropTypes.func, - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index 5e50274d373c5..56cdfd6bc7d78 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -175,16 +175,6 @@ ScatterChartPro.propTypes = { * @param {ZoomData[]} zoomData Updated zoom data. */ onZoomChange: PropTypes.func, - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 9a0fb4abebb21..9df325e003490 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -261,16 +261,6 @@ BarChart.propTypes = { * @param {BarItemIdentifier} barItemIdentifier The bar item identifier. */ onItemClick: PropTypes.func, - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx index 0f34ea4c88a7d..64c82944b3d9e 100644 --- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx +++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx @@ -81,16 +81,6 @@ ChartContainer.propTypes = { * If not provided, the container supports line, bar, scatter and pie charts. */ plugins: PropTypes.arrayOf(PropTypes.object), - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * The array of series to display. * Each type of series has its own specificity. diff --git a/packages/x-charts/src/ChartContainer/ResizableContainer.tsx b/packages/x-charts/src/ChartContainer/ResizableContainer.tsx index aacc203af0035..e5c0f57d42a09 100644 --- a/packages/x-charts/src/ChartContainer/ResizableContainer.tsx +++ b/packages/x-charts/src/ChartContainer/ResizableContainer.tsx @@ -34,7 +34,7 @@ export const ResizableContainerRoot = styled('div', { * @ignore - do not document. */ function ResizableContainer(props: { children: React.ReactNode }) { - const { inHeight, inWidth, hasIntrinsicSize, containerRef } = useSize(); + const { inHeight, inWidth, containerRef } = useSize(); return ( - {hasIntrinsicSize && props.children} + {props.children} ); } diff --git a/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx b/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx index 9939f798d1b39..c8ffec6abaceb 100644 --- a/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx +++ b/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx @@ -7,6 +7,7 @@ import { useAxisEvents } from '../hooks/useAxisEvents'; import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients'; import { useDrawingArea } from '../hooks'; import { useSurfaceRef } from '../context/SvgRefProvider'; +import { useSize } from '../context/SizeProvider'; export interface ChartsSurfaceProps { className?: string; @@ -36,6 +37,7 @@ const ChartsSurface = React.forwardRef(functi ref: React.Ref, ) { const { width, height, left, right, top, bottom } = useDrawingArea(); + const { hasIntrinsicSize } = useSize(); const surfaceRef = useSurfaceRef(); const handleRef = useForkRef(surfaceRef, ref); const themeProps = useThemeProps({ props: inProps, name: 'MuiChartsSurface' }); @@ -56,8 +58,6 @@ const ChartsSurface = React.forwardRef(functi return ( (functi {title && {title}} {desc && {desc}} - {children} + {hasIntrinsicSize && children} ); }); diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 8da4a8e59f1da..f9e74e7043dc9 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -296,16 +296,6 @@ LineChart.propTypes = { * Callback fired when a mark element is clicked. */ onMarkClick: PropTypes.func, - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 28c41b7bfd447..49e1ccd3816db 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -210,16 +210,6 @@ PieChart.propTypes = { * Callback fired when a pie arc is clicked. */ onItemClick: PropTypes.func, - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * The series to display in the pie chart. * An array of [[PieSeriesType]] objects. diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 951ed860ef70e..686bda9690839 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -250,16 +250,6 @@ ScatterChart.propTypes = { * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier. */ onItemClick: PropTypes.func, - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index c08f0a2942b42..ed53fbff42e31 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -317,16 +317,6 @@ SparkLineChart.propTypes = { * @default 'line' */ plotType: PropTypes.oneOf(['bar', 'line']), - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * Set to `true` to highlight the value. * With line, it shows a point. diff --git a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx b/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx index 2f4e5e5d1e349..5f7618e39f855 100644 --- a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx +++ b/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx @@ -126,16 +126,6 @@ ChartDataProvider.propTypes = { * If not provided, the container supports line, bar, scatter and pie charts. */ plugins: PropTypes.arrayOf(PropTypes.object), - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender: PropTypes.bool, /** * The array of series to display. * Each type of series has its own specificity. diff --git a/packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts b/packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts index a3c77fe7801fb..a6986cd76bd43 100644 --- a/packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts +++ b/packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts @@ -26,7 +26,6 @@ export const useChartDataProviderProps = (props: ChartDataProviderProps) => { plugins, children, skipAnimation, - resolveSizeBeforeRender, } = props; const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset); @@ -68,7 +67,6 @@ export const useChartDataProviderProps = (props: ChartDataProviderProps) => { const sizeProviderProps: Omit = { width, height, - resolveSizeBeforeRender, }; return { diff --git a/packages/x-charts/src/context/SizeProvider/Size.types.ts b/packages/x-charts/src/context/SizeProvider/Size.types.ts index ea93098aa2cc4..811e5dcd498dc 100644 --- a/packages/x-charts/src/context/SizeProvider/Size.types.ts +++ b/packages/x-charts/src/context/SizeProvider/Size.types.ts @@ -9,16 +9,6 @@ export interface SizeProviderProps { * The height of the chart in px. If not defined, it takes the height of the parent element. */ height?: number; - /** - * The chart will try to wait for the parent container to resolve its size - * before it renders for the first time. - * - * This can be useful in some scenarios where the chart appear to grow after - * the first render, like when used inside a grid. - * - * @default false - */ - resolveSizeBeforeRender?: boolean; children: React.ReactNode; } diff --git a/packages/x-charts/src/context/SizeProvider/SizeProvider.tsx b/packages/x-charts/src/context/SizeProvider/SizeProvider.tsx index 7b704a92931bf..6b42cc557a854 100644 --- a/packages/x-charts/src/context/SizeProvider/SizeProvider.tsx +++ b/packages/x-charts/src/context/SizeProvider/SizeProvider.tsx @@ -12,11 +12,7 @@ import { useChartContainerDimensions } from './useChartContainerDimensions'; * This provider is also responsible for resolving the size of the container before rendering and if the parent size changes. */ function SizeProvider(props: SizeProviderProps) { - const dimensions = useChartContainerDimensions( - props.width, - props.height, - props.resolveSizeBeforeRender, - ); + const dimensions = useChartContainerDimensions(props.width, props.height); const value = React.useMemo( () => ({ diff --git a/packages/x-charts/src/context/SizeProvider/useChartContainerDimensions.ts b/packages/x-charts/src/context/SizeProvider/useChartContainerDimensions.ts index e22bd75bdadfa..032af4225d689 100644 --- a/packages/x-charts/src/context/SizeProvider/useChartContainerDimensions.ts +++ b/packages/x-charts/src/context/SizeProvider/useChartContainerDimensions.ts @@ -4,11 +4,9 @@ import * as React from 'react'; import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; import ownerWindow from '@mui/utils/ownerWindow'; -export const useChartContainerDimensions = ( - inWidth?: number, - inHeight?: number, - resolveSizeBeforeRender?: boolean, -) => { +const MAX_COMPUTE_RUN = 10; + +export const useChartContainerDimensions = (inWidth?: number, inHeight?: number) => { const hasInSize = inWidth !== undefined && inHeight !== undefined; const stateRef = React.useRef({ displayError: false, initialCompute: true, computeRun: 0 }); const rootRef = React.useRef(null); @@ -48,9 +46,8 @@ export const useChartContainerDimensions = ( // computeRun is used to avoid infinite loops. if ( hasInSize || - !resolveSizeBeforeRender || !stateRef.current.initialCompute || - stateRef.current.computeRun > 20 + stateRef.current.computeRun > MAX_COMPUTE_RUN ) { return; } @@ -61,7 +58,7 @@ export const useChartContainerDimensions = ( } else if (stateRef.current.initialCompute) { stateRef.current.initialCompute = false; } - }, [width, height, computeSize, resolveSizeBeforeRender, hasInSize]); + }, [width, height, computeSize, hasInSize]); useEnhancedEffect(() => { if (hasInSize) { @@ -111,7 +108,6 @@ export const useChartContainerDimensions = ( stateRef.current.displayError = false; } } - const finalWidth = inWidth ?? width; const finalHeight = inHeight ?? height; @@ -119,7 +115,7 @@ export const useChartContainerDimensions = ( containerRef: rootRef, width: finalWidth, height: finalHeight, - hasIntrinsicSize: Boolean(finalWidth && finalHeight), + hasIntrinsicSize: finalWidth > 0 && finalHeight > 0, inWidth, inHeight, };