[charts] Make series.data readonly (#16645)

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) {

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": {

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<AxisConfig<'band', any, ChartsXAxisProps>, 'id' | 'scaleType'>[];
+  xAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsXAxisProps>, 'id' | 'scaleType'>[]>;
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  yAxis: MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id' | 'scaleType'>[];
+  yAxis: Readonly<MakeOptional<AxisConfig<'band', any, ChartsYAxisProps>, 'id' | 'scaleType'>[]>;
   /**
    * The series to display in the bar chart.
    * An array of [[HeatmapSeriesType]] objects.
    */
-  series: MakeOptional<HeatmapSeriesType, 'type'>[];
+  series: Readonly<MakeOptional<HeatmapSeriesType, 'type'>[]>;
   /**
    * The configuration of the tooltip.
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.

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<CommonSeriesType<HeatmapValueType>, 'color'>,

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 (
+    <React.Fragment>
+      <BarChartPro {...settings} />
+      <LineChartPro {...settings} />
+      <ScatterChartPro {...scatterSettings} />
+      <Heatmap {...heatmapSettings} />
+    </React.Fragment>
+  );
+};

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<BarSeriesType, 'type'>[];
+  series: Readonly<MakeOptional<BarSeriesType, 'type'>[]>;
   /**
    * Option to display a cartesian grid in the background.
    */

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<LineSeriesType, 'type'>[];
+  series: Readonly<MakeOptional<LineSeriesType, 'type'>[]>;
   /**
    * Option to display a cartesian grid in the background.
    */

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<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
+  series: Readonly<MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[]>;
   /**
    * If `true`, the legend is not rendered.
    */

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<ScatterSeriesType, 'type'>[];
+  series: Readonly<MakeOptional<ScatterSeriesType, 'type'>[]>;
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.

packages/x-charts/src/internals/calculateMargins.ts

@@ -7,7 +7,7 @@ export const calculateMargins = <
   T extends ChartsLegendSlotExtension &
     Pick<LayoutConfig, 'margin'> & {
       hideLegend?: boolean;
-      series?: Partial<ChartsSeriesConfig[CartesianChartSeriesType]['seriesProp']>[];
+      series?: Readonly<Partial<ChartsSeriesConfig[CartesianChartSeriesType]['seriesProp']>[]>;
     },
 >(
   props: T,

packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/processSeries.ts

@@ -21,7 +21,7 @@ export const preprocessSeries = <TSeriesType extends ChartSeriesType>({
   seriesConfig,
   dataset,
 }: {
-  series: readonly AllSeriesType<TSeriesType>[];
+  series: Readonly<AllSeriesType<TSeriesType>[]>;
   colors: string[];
   seriesConfig: ChartSeriesConfig<TSeriesType>;
   dataset?: Readonly<DatasetType>;

packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.ts

@@ -14,7 +14,7 @@ export interface UseChartSeriesParameters<T extends ChartSeriesType = ChartSerie
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series?: readonly AllSeriesType<T>[];
+  series?: Readonly<AllSeriesType<T>[]>;
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette
@@ -30,7 +30,7 @@ export type UseChartSeriesDefaultizedParameters<T extends ChartSeriesType = Char
      * Each type of series has its own specificity.
      * Please refer to the appropriate docs page to learn more about it.
      */
-    series: readonly AllSeriesType<T>[];
+    series: Readonly<AllSeriesType<T>[]>;
     /**
      * Color palette used to colorize multiple series.
      * @default rainbowSurgePalette

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<TData = PieValueType> extends CommonSeriesType<TData> {
   type: 'pie';
-  data: TData[];
+  data: Readonly<TData[]>;
   /**
    * 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%'.

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 (
+    <React.Fragment>
+      <BarChart {...settings} />
+      <LineChart {...settings} />
+      <ScatterChart {...scatterSettings} />
+      <PieChart {...pieSettings} />
+    </React.Fragment>
+  );
+};