[charts] Move legend getter to series config (#16307)

packages/x-charts-pro/src/Heatmap/plugin.ts

@@ -6,6 +6,7 @@ import getColor from './getColor';
 export const plugin: ChartSeriesTypeConfig<'heatmap'> = {
   seriesProcessor: formatter,
   colorProcessor: getColor,
+  legendGetter: () => [],
   xExtremumGetter: getBaseExtremum,
   yExtremumGetter: getBaseExtremum,
 };

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

@@ -1,11 +1,13 @@
 import { ChartSeriesTypeConfig } from '../internals/plugins/models/seriesConfig';
 import { getExtremumX, getExtremumY } from './extremums';
 import formatter from './formatter';
+import legendGetter from './legend';
 import getColor from './getColor';
 
 export const plugin: ChartSeriesTypeConfig<'bar'> = {
   seriesProcessor: formatter,
   colorProcessor: getColor,
+  legendGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
 };

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

@@ -2,10 +2,12 @@ import { ChartSeriesTypeConfig } from '../internals/plugins/models/seriesConfig'
 import { getExtremumX, getExtremumY } from './extremums';
 import formatter from './formatter';
 import getColor from './getColor';
+import legendGetter from './legend';
 
 export const plugin: ChartSeriesTypeConfig<'line'> = {
   colorProcessor: getColor,
   seriesProcessor: formatter,
+  legendGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
 };

packages/x-charts/src/PieChart/plugin.ts

@@ -1,8 +1,10 @@
 import { ChartSeriesTypeConfig } from '../internals/plugins/models/seriesConfig';
 import formatter from './formatter';
 import getColor from './getColor';
+import legendGetter from './legend';
 
 export const plugin: ChartSeriesTypeConfig<'pie'> = {
   colorProcessor: getColor,
   seriesProcessor: formatter,
+  legendGetter,
 };

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

@@ -2,10 +2,12 @@ import { ChartSeriesTypeConfig } from '../internals/plugins/models/seriesConfig'
 import { getExtremumX, getExtremumY } from './extremums';
 import formatter from './formatter';
 import getColor from './getColor';
+import legendGetter from './legend';
 
 export const plugin: ChartSeriesTypeConfig<'scatter'> = {
   seriesProcessor: formatter,
   colorProcessor: getColor,
+  legendGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
 };

packages/x-charts/src/hooks/useLegend.ts

@@ -1,25 +1,23 @@
 'use client';
 import { ChartSeriesType } from '../models/seriesType/config';
-import getBarLegend from '../BarChart/legend';
-import getScatterLegend from '../ScatterChart/legend';
-import getLineLegend from '../LineChart/legend';
-import getPieLegend from '../PieChart/legend';
-import { ProcessedSeries } from '../internals/plugins/corePlugins/useChartSeries/useChartSeries.types';
-import { LegendGetter } from '../internals/plugins/models/seriesConfig/seriesProcessor.types';
+import {
+  ProcessedSeries,
+  UseChartSeriesSignature,
+  selectorChartSeriesConfig,
+} from '../internals/plugins/corePlugins/useChartSeries';
 import { useSeries } from './useSeries';
 import type { LegendItemParams } from '../ChartsLegend';
+import { useStore } from '../internals/store/useStore';
+import { useSelector } from '../internals/store/useSelector';
+import { ChartSeriesConfig } from '../internals/plugins/models/seriesConfig';
 
-const legendGetter: { [T in ChartSeriesType]?: LegendGetter<T> } = {
-  bar: getBarLegend,
-  scatter: getScatterLegend,
-  line: getLineLegend,
-  pie: getPieLegend,
-};
-
-function getSeriesToDisplay(series: ProcessedSeries) {
+function getSeriesToDisplay(
+  series: ProcessedSeries,
+  seriesConfig: ChartSeriesConfig<ChartSeriesType>,
+) {
   return (Object.keys(series) as ChartSeriesType[]).flatMap(
     <T extends ChartSeriesType>(seriesType: T) => {
-      const getter = legendGetter[seriesType as T];
+      const getter = seriesConfig[seriesType as T].legendGetter;
       return getter === undefined ? [] : getter(series[seriesType as T]!);
     },
   );
@@ -36,7 +34,10 @@ function getSeriesToDisplay(series: ProcessedSeries) {
  */
 export function useLegend(): { items: LegendItemParams[] } {
   const series = useSeries();
+  const store = useStore<[UseChartSeriesSignature]>();
+  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+
   return {
-    items: getSeriesToDisplay(series),
+    items: getSeriesToDisplay(series, seriesConfig),
   };
 }

packages/x-charts/src/internals/plugins/models/seriesConfig/seriesConfig.types.ts

@@ -1,11 +1,12 @@
-import { SeriesProcessor } from './seriesProcessor.types';
+import { LegendGetter, SeriesProcessor } from './seriesProcessor.types';
 import { CartesianChartSeriesType, ChartSeriesType } from '../../../../models/seriesType/config';
 import { ColorProcessor } from './colorProcessor.types';
 import { CartesianExtremumGetter } from './extremumGetter.types';
 
 export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
   seriesProcessor: SeriesProcessor<TSeriesType>;
   colorProcessor: ColorProcessor<TSeriesType>;
+  legendGetter: LegendGetter<TSeriesType>;
   // rotationExtremumGetters: ExtremumGettersConfig<Key>;
   // radiusExtremumGetters: ExtremumGettersConfig<Key>;
 } & (TSeriesType extends CartesianChartSeriesType