[charts] Memoize axes and series with default (#17156)

Author: alexfauquette

packages/x-charts-pro/src/Heatmap/Heatmap.tsx

@@ -142,7 +142,7 @@ const Heatmap = React.forwardRef(function Heatmap(
   const id = useId();
   const clipPathId = `${id}-clip-path`;
 
-  const defaultizedXAxis = React.useMemo(
+  const xAxisWithDefault = React.useMemo(
     () =>
       (xAxis && xAxis.length > 0 ? xAxis : [{ id: DEFAULT_X_AXIS_KEY }]).map((axis) => ({
         scaleType: 'band' as const,
@@ -153,7 +153,7 @@ const Heatmap = React.forwardRef(function Heatmap(
     [series, xAxis],
   );
 
-  const defaultizedYAxis = React.useMemo(
+  const yAxisWithDefault = React.useMemo(
     () =>
       (yAxis && yAxis.length > 0 ? yAxis : [{ id: DEFAULT_Y_AXIS_KEY }]).map((axis) => ({
         scaleType: 'band' as const,
@@ -164,7 +164,7 @@ const Heatmap = React.forwardRef(function Heatmap(
     [series, yAxis],
   );
 
-  const defaultizedZAxis = React.useMemo(
+  const zAxisWithDefault = React.useMemo(
     () =>
       zAxis ?? [
         {
@@ -192,9 +192,9 @@ const Heatmap = React.forwardRef(function Heatmap(
       width={width}
       height={height}
       margin={margin}
-      xAxis={defaultizedXAxis}
-      yAxis={defaultizedYAxis}
-      zAxis={defaultizedZAxis}
+      xAxis={xAxisWithDefault}
+      yAxis={yAxisWithDefault}
+      zAxis={zAxisWithDefault}
       colors={colors}
       dataset={dataset}
       sx={sx}

packages/x-charts/src/BarChart/useBarChartProps.ts

@@ -1,4 +1,5 @@
 'use client';
+import * as React from 'react';
 import useId from '@mui/utils/useId';
 import type { BarChartProps } from './BarChart';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
@@ -11,6 +12,7 @@ import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsLegendSlotExtension } from '../ChartsLegend';
 import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
+import type { AxisConfig, ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
 import { BAR_CHART_PLUGINS, BarChartPluginsSignatures } from './BarChart.plugins';
 
 /**
@@ -56,32 +58,53 @@ export const useBarChartProps = (props: BarChartProps) => {
     layout === 'horizontal' ||
     (layout === undefined && series.some((item) => item.layout === 'horizontal'));
 
-  const defaultAxisConfig = {
-    scaleType: 'band',
-    data: Array.from(
-      { length: Math.max(...series.map((s) => (s.data ?? dataset ?? []).length)) },
-      (_, index) => index,
-    ),
-  } as const;
+  const defaultBandXAxis: AxisConfig<'band', number, ChartsXAxisProps>[] = React.useMemo(
+    () => [
+      {
+        id: DEFAULT_X_AXIS_KEY,
+        scaleType: 'band',
+        data: Array.from(
+          { length: Math.max(...series.map((s) => (s.data ?? dataset ?? []).length)) },
+          (_, index) => index,
+        ),
+      },
+    ],
+    [dataset, series],
+  );
 
+  const defaultBandYAxis: AxisConfig<'band', number, ChartsYAxisProps>[] = React.useMemo(
+    () => [
+      {
+        id: DEFAULT_Y_AXIS_KEY,
+        scaleType: 'band',
+        data: Array.from(
+          { length: Math.max(...series.map((s) => (s.data ?? dataset ?? []).length)) },
+          (_, index) => index,
+        ),
+      },
+    ],
+    [dataset, series],
+  );
+
+  const seriesWithDefault = React.useMemo(
+    () =>
+      series.map((s) => ({
+        type: 'bar' as const,
+        ...s,
+        layout: hasHorizontalSeries ? ('horizontal' as const) : ('vertical' as const),
+      })),
+    [hasHorizontalSeries, series],
+  );
   const chartContainerProps: ChartContainerProps<'bar', BarChartPluginsSignatures> = {
     ...rest,
-    series: series.map((s) => ({
-      type: 'bar' as const,
-      ...s,
-      layout: hasHorizontalSeries ? ('horizontal' as const) : ('vertical' as const),
-    })),
+    series: seriesWithDefault,
     width,
     height,
     margin,
     colors,
     dataset,
-    xAxis:
-      xAxis ??
-      (hasHorizontalSeries ? undefined : [{ id: DEFAULT_X_AXIS_KEY, ...defaultAxisConfig }]),
-    yAxis:
-      yAxis ??
-      (hasHorizontalSeries ? [{ id: DEFAULT_Y_AXIS_KEY, ...defaultAxisConfig }] : undefined),
+    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : defaultBandXAxis),
+    yAxis: yAxis ?? (hasHorizontalSeries ? defaultBandYAxis : undefined),
     highlightedItem,
     onHighlightChange,
     disableAxisListener:

packages/x-charts/src/LineChart/useLineChartProps.ts

@@ -1,4 +1,5 @@
 'use client';
+import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
@@ -55,13 +56,18 @@ export const useLineChartProps = (props: LineChartProps) => {
   const id = useId();
   const clipPathId = `${id}-clip-path`;
 
+  const seriesWithDefault = React.useMemo(
+    () =>
+      series.map((s) => ({
+        disableHighlight: !!disableLineItemHighlight,
+        type: 'line' as const,
+        ...s,
+      })),
+    [disableLineItemHighlight, series],
+  );
   const chartContainerProps: ChartContainerProps<'line', LineChartPluginsSignatures> = {
     ...other,
-    series: series.map((s) => ({
-      disableHighlight: !!disableLineItemHighlight,
-      type: 'line' as const,
-      ...s,
-    })),
+    series: seriesWithDefault,
     width,
     height,
     margin,

packages/x-charts/src/ScatterChart/useScatterChartProps.ts

@@ -1,4 +1,5 @@
 'use client';
+import * as React from 'react';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsGridProps } from '../ChartsGrid';
@@ -45,9 +46,13 @@ export const useScatterChartProps = (props: ScatterChartProps) => {
     ...other
   } = props;
 
+  const seriesWithDefault = React.useMemo(
+    () => series.map((s) => ({ type: 'scatter' as const, ...s })),
+    [series],
+  );
   const chartContainerProps: ChartContainerProps<'scatter', ScatterChartPluginsSignatures> = {
     ...other,
-    series: series.map((s) => ({ type: 'scatter' as const, ...s })),
+    series: seriesWithDefault,
     width,
     height,
     margin,