[charts] Move series default color generation in the series config (#…

…16752)
mui · Mar 4, 2025 · 03f0c05 · 03f0c05
1 parent 52b63c6
commit 03f0c05
Show file tree

Hide file tree

Showing 21 changed files with 145 additions and 42 deletions.
diff --git a/packages/x-charts-pro/src/FunnelChart/funnel.types.ts b/packages/x-charts-pro/src/FunnelChart/funnel.types.ts
@@ -43,7 +43,7 @@ export interface FunnelSeriesType
   /**
    * Data associated to the funnel section.
    */
-  data?: Readonly<FunnelValueType[]>;
+  data: Readonly<FunnelValueType[]>;
   /**
    * The label to display on the tooltip or the legend. It can be a string or a function.
    */

diff --git a/packages/x-charts-pro/src/FunnelChart/seriesConfig/getSeriesWithDefaultValues.ts b/packages/x-charts-pro/src/FunnelChart/seriesConfig/getSeriesWithDefaultValues.ts
@@ -0,0 +1,18 @@
+import { GetSeriesWithDefaultValues } from '@mui/x-charts/internals';
+
+const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'funnel'> = (
+  seriesData,
+  seriesIndex,
+  colors,
+) => {
+  return {
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    ...seriesData,
+    data: seriesData.data.map((d, index) => ({
+      color: colors[index % colors.length],
+      ...d,
+    })),
+  };
+};
+
+export default getSeriesWithDefaultValues;
diff --git a/packages/x-charts-pro/src/FunnelChart/seriesConfig/index.ts b/packages/x-charts-pro/src/FunnelChart/seriesConfig/index.ts
@@ -4,6 +4,7 @@ import seriesProcessor from './seriesProcessor';
 import getColor from './getColor';
 import legendGetter from './legend';
 import tooltipGetter from './tooltip';
+import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 
 export const seriesConfig: ChartSeriesTypeConfig<'funnel'> = {
   seriesProcessor,
@@ -12,4 +13,5 @@ export const seriesConfig: ChartSeriesTypeConfig<'funnel'> = {
   tooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues,
 };
diff --git a/packages/x-charts-pro/src/Heatmap/seriesConfig/getSeriesWithDefaultValues.ts b/packages/x-charts-pro/src/Heatmap/seriesConfig/getSeriesWithDefaultValues.ts
@@ -0,0 +1,15 @@
+import { GetSeriesWithDefaultValues } from '@mui/x-charts/internals';
+
+const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'heatmap'> = (
+  seriesData,
+  seriesIndex,
+  colors,
+) => {
+  return {
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    color: colors[seriesIndex % colors.length],
+    ...seriesData,
+  };
+};
+
+export default getSeriesWithDefaultValues;
diff --git a/packages/x-charts-pro/src/Heatmap/seriesConfig/index.ts b/packages/x-charts-pro/src/Heatmap/seriesConfig/index.ts
@@ -3,6 +3,7 @@ import { getBaseExtremum } from './extremums';
 import seriesProcessor from './seriesProcessor';
 import getColor from './getColor';
 import tooltipGetter from './tooltip';
+import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 
 export const seriesConfig: ChartSeriesTypeConfig<'heatmap'> = {
   seriesProcessor,
@@ -11,4 +12,5 @@ export const seriesConfig: ChartSeriesTypeConfig<'heatmap'> = {
   tooltipGetter,
   xExtremumGetter: getBaseExtremum,
   yExtremumGetter: getBaseExtremum,
+  getSeriesWithDefaultValues,
 };
diff --git a/packages/x-charts/src/BarChart/seriesConfig/getSeriesWithDefaultValues.ts b/packages/x-charts/src/BarChart/seriesConfig/getSeriesWithDefaultValues.ts
@@ -0,0 +1,15 @@
+import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+
+const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'bar'> = (
+  seriesData,
+  seriesIndex,
+  colors,
+) => {
+  return {
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    color: colors[seriesIndex % colors.length],
+    ...seriesData,
+  };
+};
+
+export default getSeriesWithDefaultValues;
diff --git a/packages/x-charts/src/BarChart/seriesConfig/index.ts b/packages/x-charts/src/BarChart/seriesConfig/index.ts
@@ -4,6 +4,7 @@ import seriesProcessor from './seriesProcessor';
 import legendGetter from './legend';
 import getColor from './getColor';
 import tooltipGetter from './tooltip';
+import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 
 export const seriesConfig: ChartSeriesTypeConfig<'bar'> = {
   seriesProcessor,
@@ -12,4 +13,5 @@ export const seriesConfig: ChartSeriesTypeConfig<'bar'> = {
   tooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues,
 };
diff --git a/packages/x-charts/src/BarChart/seriesConfig/seriesProcessor.ts b/packages/x-charts/src/BarChart/seriesConfig/seriesProcessor.ts
@@ -35,8 +35,11 @@ const seriesProcessor: SeriesProcessor<'bar'> = (params, dataset) => {
     }
   });
 
-  const completedSeries: { [id: string]: DefaultizedProps<ChartSeries<'bar'>, 'data' | 'layout'> } =
-    {};
+  const completedSeries: {
+    [id: string]: DefaultizedProps<ChartSeries<'bar'>, 'data' | 'layout'> & {
+      stackedData: [number, number][];
+    };
+  } = {};
 
   stackingGroups.forEach((stackingGroup) => {
     const { ids, stackingOffset, stackingOrder } = stackingGroup;

diff --git a/packages/x-charts/src/LineChart/seriesConfig/getSeriesWithDefaultValues.ts b/packages/x-charts/src/LineChart/seriesConfig/getSeriesWithDefaultValues.ts
@@ -0,0 +1,15 @@
+import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+
+const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'line'> = (
+  seriesData,
+  seriesIndex,
+  colors,
+) => {
+  return {
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    color: colors[seriesIndex % colors.length],
+    ...seriesData,
+  };
+};
+
+export default getSeriesWithDefaultValues;
diff --git a/packages/x-charts/src/LineChart/seriesConfig/index.ts b/packages/x-charts/src/LineChart/seriesConfig/index.ts
@@ -4,6 +4,7 @@ import seriesProcessor from './seriesProcessor';
 import getColor from './getColor';
 import legendGetter from './legend';
 import tooltipGetter from './tooltip';
+import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 
 export const seriesConfig: ChartSeriesTypeConfig<'line'> = {
   colorProcessor: getColor,
@@ -12,4 +13,5 @@ export const seriesConfig: ChartSeriesTypeConfig<'line'> = {
   tooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues,
 };
diff --git a/packages/x-charts/src/LineChart/seriesConfig/seriesProcessor.ts b/packages/x-charts/src/LineChart/seriesConfig/seriesProcessor.ts
@@ -34,7 +34,10 @@ const seriesProcessor: SeriesProcessor<'line'> = (params, dataset) => {
     }
   });
 
-  const completedSeries: Record<SeriesId, DefaultizedProps<ChartSeries<'line'>, 'data'>> = {};
+  const completedSeries: Record<
+    SeriesId,
+    DefaultizedProps<ChartSeries<'line'>, 'data'> & { stackedData: [number, number][] }
+  > = {};
 
   stackingGroups.forEach((stackingGroup) => {
     // Get stacked values, and derive the domain

diff --git a/packages/x-charts/src/PieChart/seriesConfig/getSeriesWithDefaultValues.ts b/packages/x-charts/src/PieChart/seriesConfig/getSeriesWithDefaultValues.ts
@@ -0,0 +1,18 @@
+import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+
+const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'> = (
+  seriesData,
+  seriesIndex,
+  colors,
+) => {
+  return {
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    ...seriesData,
+    data: seriesData.data.map((d, index) => ({
+      color: colors[index % colors.length],
+      ...d,
+    })),
+  };
+};
+
+export default getSeriesWithDefaultValues;
diff --git a/packages/x-charts/src/PieChart/seriesConfig/index.ts b/packages/x-charts/src/PieChart/seriesConfig/index.ts
@@ -3,10 +3,12 @@ import seriesProcessor from './seriesProcessor';
 import getColor from './getColor';
 import legendGetter from './legend';
 import tooltipGetter from './tooltip';
+import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 
 export const seriesConfig: ChartSeriesTypeConfig<'pie'> = {
   colorProcessor: getColor,
   seriesProcessor,
   legendGetter,
   tooltipGetter,
+  getSeriesWithDefaultValues,
 };
diff --git a/packages/x-charts/src/ScatterChart/seriesConfig/getSeriesWithDefaultValues.ts b/packages/x-charts/src/ScatterChart/seriesConfig/getSeriesWithDefaultValues.ts
@@ -0,0 +1,15 @@
+import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+
+const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'scatter'> = (
+  seriesData,
+  seriesIndex,
+  colors,
+) => {
+  return {
+    id: seriesData.id ?? `auto-generated-id-${seriesIndex}`,
+    color: colors[seriesIndex % colors.length],
+    ...seriesData,
+  };
+};
+
+export default getSeriesWithDefaultValues;
diff --git a/packages/x-charts/src/ScatterChart/seriesConfig/index.ts b/packages/x-charts/src/ScatterChart/seriesConfig/index.ts
@@ -4,6 +4,7 @@ import seriesProcessor from './seriesProcessor';
 import getColor from './getColor';
 import legendGetter from './legend';
 import tooltipGetter from './tooltip';
+import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 
 export const seriesConfig: ChartSeriesTypeConfig<'scatter'> = {
   seriesProcessor,
@@ -12,4 +13,5 @@ export const seriesConfig: ChartSeriesTypeConfig<'scatter'> = {
   tooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
+  getSeriesWithDefaultValues,
 };
diff --git a/packages/x-charts/src/internals/defaultizeColor.ts b/packages/x-charts/src/internals/defaultizeColor.ts
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/processSeries.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/processSeries.ts
@@ -1,5 +1,5 @@
+import { SeriesId } from '../../../../models/seriesType/common';
 import { AllSeriesType } from '../../../../models/seriesType';
-import { defaultizeColor } from '../../../defaultizeColor';
 import { ChartSeriesType, DatasetType } from '../../../../models/seriesType/config';
 import { ChartSeriesConfig } from '../../models/seriesConfig';
 import {
@@ -31,23 +31,25 @@ export const preprocessSeries = <TSeriesType extends ChartSeriesType>({
   // Notice the line about uses `ChartSeriesType` instead of TSeriesType.
   // That's probably because the series.type is not propagated from the generic but hardcoded in the config.
 
-  series.forEach((seriesData, seriesIndex: number) => {
-    const { id = `auto-generated-id-${seriesIndex}`, type } =
-      seriesData as AllSeriesType<TSeriesType>;
+  series.forEach(<T extends TSeriesType>(seriesData: AllSeriesType<T>, seriesIndex: number) => {
+    const seriesWithDefaultValues = seriesConfig[seriesData.type as T].getSeriesWithDefaultValues(
+      seriesData,
+      seriesIndex,
+      colors,
+    );
 
-    if (seriesGroups[type] === undefined) {
-      seriesGroups[type] = { series: {}, seriesOrder: [] };
+    const id: SeriesId = seriesWithDefaultValues.id;
+
+    if (seriesGroups[seriesData.type] === undefined) {
+      seriesGroups[seriesData.type] = { series: {}, seriesOrder: [] };
     }
-    if (seriesGroups[type]?.series[id] !== undefined) {
+
+    if (seriesGroups[seriesData.type]?.series[id] !== undefined) {
       throw new Error(`MUI X: series' id "${id}" is not unique.`);
     }
 
-    // @ts-ignore
-    seriesGroups[type]!.series[id] = {
-      id,
-      ...defaultizeColor(seriesData, seriesIndex, colors),
-    };
-    seriesGroups[type]!.seriesOrder.push(id);
+    seriesGroups[seriesData.type]!.series[id] = seriesWithDefaultValues;
+    seriesGroups[seriesData.type]!.seriesOrder.push(id);
   });
 
   const processedSeries: { [type in TSeriesType]?: SeriesProcessorResult<TSeriesType> } = {};

diff --git a/...es/x-charts/src/internals/plugins/models/seriesConfig/getSeriesWithDefaultValues.types.ts b/...es/x-charts/src/internals/plugins/models/seriesConfig/getSeriesWithDefaultValues.types.ts
@@ -0,0 +1,8 @@
+import type { ChartSeries, ChartSeriesType } from '../../../../models/seriesType/config';
+import type { AllSeriesType } from '../../../../models/seriesType';
+
+export type GetSeriesWithDefaultValues<T extends ChartSeriesType> = (
+  series: AllSeriesType<T>,
+  seriesIndex: number,
+  colors: string[],
+) => ChartSeries<T>;
diff --git a/packages/x-charts/src/internals/plugins/models/seriesConfig/index.ts b/packages/x-charts/src/internals/plugins/models/seriesConfig/index.ts
@@ -4,3 +4,4 @@ export * from './seriesConfig.types';
 export * from './seriesProcessor.types';
 export * from './tooltipGetter.types';
 export * from './legendGetter.types';
+export * from './getSeriesWithDefaultValues.types';
diff --git a/packages/x-charts/src/internals/plugins/models/seriesConfig/seriesConfig.types.ts b/packages/x-charts/src/internals/plugins/models/seriesConfig/seriesConfig.types.ts
@@ -7,12 +7,14 @@ import type { ColorProcessor } from './colorProcessor.types';
 import type { CartesianExtremumGetter } from './extremumGetter.types';
 import type { LegendGetter } from './legendGetter.types';
 import type { TooltipGetter } from './tooltipGetter.types';
+import { GetSeriesWithDefaultValues } from './getSeriesWithDefaultValues.types';
 
 export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
   seriesProcessor: SeriesProcessor<TSeriesType>;
   colorProcessor: ColorProcessor<TSeriesType>;
   legendGetter: LegendGetter<TSeriesType>;
   tooltipGetter: TooltipGetter<TSeriesType>;
+  getSeriesWithDefaultValues: GetSeriesWithDefaultValues<TSeriesType>;
   // rotationExtremumGetters: ExtremumGettersConfig<Key>;
   // radiusExtremumGetters: ExtremumGettersConfig<Key>;
 } & (TSeriesType extends CartesianChartSeriesType

diff --git a/packages/x-charts/src/models/seriesType/config.ts b/packages/x-charts/src/models/seriesType/config.ts
@@ -78,11 +78,7 @@ export type StackableChartSeriesType = keyof Pick<
   }[ChartSeriesType]
 >;
 
-export type ChartSeries<T extends ChartSeriesType> = ChartsSeriesConfig[T] extends {
-  canBeStacked: true;
-}
-  ? ChartsSeriesConfig[T]['seriesInput'] & { stackedData: [number, number][] }
-  : ChartsSeriesConfig[T]['seriesInput'];
+export type ChartSeries<T extends ChartSeriesType> = ChartsSeriesConfig[T]['seriesInput'];
 
 export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConfig[T] extends {
   canBeStacked: true;