From 15f5a84f46c7069ed446b536d404c3653ff872c5 Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Wed, 19 Feb 2025 11:58:43 +0100 Subject: [PATCH] [charts] Make `series.data` readonly (#16645) --- docs/data/charts/axis/CustomDomainYAxis.tsx | 6 +-- docs/pages/x/api/charts/pie-series-type.json | 2 +- packages/x-charts-pro/src/Heatmap/Heatmap.tsx | 6 +-- .../src/models/seriesType/heatmap.ts | 2 +- .../src/typeOverloads/readonly.spec.tsx | 49 +++++++++++++++++++ packages/x-charts/src/BarChart/BarChart.tsx | 2 +- packages/x-charts/src/LineChart/LineChart.tsx | 2 +- packages/x-charts/src/PieChart/PieChart.tsx | 2 +- .../src/ScatterChart/ScatterChart.tsx | 2 +- .../src/internals/calculateMargins.ts | 2 +- .../useChartSeries/processSeries.ts | 2 +- .../useChartSeries/useChartSeries.types.ts | 4 +- .../x-charts/src/models/seriesType/pie.ts | 2 +- packages/x-charts/src/tests/readonly.spec.tsx | 45 +++++++++++++++++ 14 files changed, 111 insertions(+), 17 deletions(-) create mode 100644 packages/x-charts-pro/src/typeOverloads/readonly.spec.tsx create mode 100644 packages/x-charts/src/tests/readonly.spec.tsx diff --git a/docs/data/charts/axis/CustomDomainYAxis.tsx b/docs/data/charts/axis/CustomDomainYAxis.tsx index 6e771e3878a91..c0b038965288a 100644 --- a/docs/data/charts/axis/CustomDomainYAxis.tsx +++ b/docs/data/charts/axis/CustomDomainYAxis.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { BarChart, BarChartProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; -const settings: BarChartProps = { +const settings = { height: 200, series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }], margin: { top: 10, bottom: 20 }, -}; +} as const; // Extend a value to match a multiple of the step. function extend(value: number, step: number) { diff --git a/docs/pages/x/api/charts/pie-series-type.json b/docs/pages/x/api/charts/pie-series-type.json index 598ad4c27b0df..3416296031e22 100644 --- a/docs/pages/x/api/charts/pie-series-type.json +++ b/docs/pages/x/api/charts/pie-series-type.json @@ -5,7 +5,7 @@ "import { PieSeriesType } from '@mui/x-charts'" ], "properties": { - "data": { "type": { "description": "TData[]" }, "required": true }, + "data": { "type": { "description": "Readonly<TData[]>" }, "required": true }, "type": { "type": { "description": "'pie'" }, "required": true }, "arcLabel": { "type": { diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx index 6dfce9ef2cb90..79638fb3b0de9 100644 --- a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx +++ b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx @@ -56,18 +56,18 @@ export interface HeatmapProps * If not provided, a default axis config is used. * An array of [[AxisConfig]] objects. */ - xAxis: MakeOptional, 'id' | 'scaleType'>[]; + xAxis: Readonly, 'id' | 'scaleType'>[]>; /** * The configuration of the y-axes. * If not provided, a default axis config is used. * An array of [[AxisConfig]] objects. */ - yAxis: MakeOptional, 'id' | 'scaleType'>[]; + yAxis: Readonly, 'id' | 'scaleType'>[]>; /** * The series to display in the bar chart. * An array of [[HeatmapSeriesType]] objects. */ - series: MakeOptional[]; + series: Readonly[]>; /** * The configuration of the tooltip. * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details. diff --git a/packages/x-charts-pro/src/models/seriesType/heatmap.ts b/packages/x-charts-pro/src/models/seriesType/heatmap.ts index 4528b0523b823..95cb5c497ba06 100644 --- a/packages/x-charts-pro/src/models/seriesType/heatmap.ts +++ b/packages/x-charts-pro/src/models/seriesType/heatmap.ts @@ -5,7 +5,7 @@ import { CartesianSeriesType, } from '@mui/x-charts/internals'; -export type HeatmapValueType = [number, number, number]; +export type HeatmapValueType = readonly [number, number, number]; export interface HeatmapSeriesType extends Omit, 'color'>, diff --git a/packages/x-charts-pro/src/typeOverloads/readonly.spec.tsx b/packages/x-charts-pro/src/typeOverloads/readonly.spec.tsx new file mode 100644 index 0000000000000..7ddc4117ea852 --- /dev/null +++ b/packages/x-charts-pro/src/typeOverloads/readonly.spec.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; +import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; +import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; +import { Heatmap } from '@mui/x-charts-pro/Heatmap'; + +const settings = { + height: 200, + series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }], + xAxis: [{ position: 'top' }], + yAxis: [{ data: [1, 2, 3] }], + margin: { top: 10, bottom: 20 }, +} as const; + +const scatterSettings = { + ...settings, + series: [ + { + data: [ + { x: 1, y: 1 }, + { x: 2, y: 2 }, + ], + }, + ], +} as const; + +const heatmapSettings = { + ...settings, + series: [ + { + data: [ + [0, 0, 10], + [0, 1, 20], + [0, 2, 40], + ], + }, + ], +} as const; + +export const Component = () => { + return ( + + + + + + + ); +}; diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 92e0595540582..9525751ce65cc 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -52,7 +52,7 @@ export interface BarChartProps * The series to display in the bar chart. * An array of [[BarSeriesType]] objects. */ - series: MakeOptional[]; + series: Readonly[]>; /** * Option to display a cartesian grid in the background. */ diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index f1395a3232dad..a3fe2ebb256dc 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -64,7 +64,7 @@ export interface LineChartProps * The series to display in the line chart. * An array of [[LineSeriesType]] objects. */ - series: MakeOptional[]; + series: Readonly[]>; /** * Option to display a cartesian grid in the background. */ diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 1e8ded882ee54..c60832503ed44 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -42,7 +42,7 @@ export interface PieChartProps * The series to display in the pie chart. * An array of [[PieSeriesType]] objects. */ - series: MakeOptional>, 'type'>[]; + series: Readonly>, 'type'>[]>; /** * If `true`, the legend is not rendered. */ diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index f4c9605e686c3..88af094401d4e 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -56,7 +56,7 @@ export interface ScatterChartProps * The series to display in the scatter chart. * An array of [[ScatterSeriesType]] objects. */ - series: MakeOptional[]; + series: Readonly[]>; /** * The configuration of axes highlight. * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details. diff --git a/packages/x-charts/src/internals/calculateMargins.ts b/packages/x-charts/src/internals/calculateMargins.ts index cd65f1902e98a..8fbbe03dda3e4 100644 --- a/packages/x-charts/src/internals/calculateMargins.ts +++ b/packages/x-charts/src/internals/calculateMargins.ts @@ -7,7 +7,7 @@ export const calculateMargins = < T extends ChartsLegendSlotExtension & Pick & { hideLegend?: boolean; - series?: Partial[]; + series?: Readonly[]>; }, >( props: T, diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/processSeries.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/processSeries.ts index 24f149b9a024f..5cae46d271638 100644 --- a/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/processSeries.ts +++ b/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/processSeries.ts @@ -21,7 +21,7 @@ export const preprocessSeries = ({ seriesConfig, dataset, }: { - series: readonly AllSeriesType[]; + series: Readonly[]>; colors: string[]; seriesConfig: ChartSeriesConfig; dataset?: Readonly; diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.ts index f144ae79a9dd6..85623c84dc085 100644 --- a/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.ts +++ b/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.ts @@ -14,7 +14,7 @@ export interface UseChartSeriesParameters[]; + series?: Readonly[]>; /** * Color palette used to colorize multiple series. * @default rainbowSurgePalette @@ -30,7 +30,7 @@ export type UseChartSeriesDefaultizedParameters[]; + series: Readonly[]>; /** * Color palette used to colorize multiple series. * @default rainbowSurgePalette diff --git a/packages/x-charts/src/models/seriesType/pie.ts b/packages/x-charts/src/models/seriesType/pie.ts index f04e74ab3baab..34b9a3b615969 100644 --- a/packages/x-charts/src/models/seriesType/pie.ts +++ b/packages/x-charts/src/models/seriesType/pie.ts @@ -30,7 +30,7 @@ export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) export interface PieSeriesType extends CommonSeriesType { type: 'pie'; - data: TData[]; + data: Readonly; /** * The radius between circle center and the beginning of the arc. * Can be a number (in px) or a string with a percentage such as '50%'. diff --git a/packages/x-charts/src/tests/readonly.spec.tsx b/packages/x-charts/src/tests/readonly.spec.tsx new file mode 100644 index 0000000000000..b9141b17f22b3 --- /dev/null +++ b/packages/x-charts/src/tests/readonly.spec.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; +import { LineChart } from '@mui/x-charts/LineChart'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import { PieChart } from '@mui/x-charts/PieChart'; + +const settings = { + height: 200, + series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }], + xAxis: [{ position: 'top' }], + yAxis: [{ data: [1, 2, 3] }], + margin: { top: 10, bottom: 20 }, +} as const; + +const scatterSettings = { + ...settings, + series: [ + { + data: [ + { x: 1, y: 1 }, + { x: 2, y: 2 }, + ], + }, + ], +} as const; + +const pieSettings = { + ...settings, + series: [ + { + data: [{ value: 10 }, { value: 20 }, { value: 30 }], + }, + ], +} as const; + +export const Component = () => { + return ( + + + + + + + ); +};