[charts] Move seriesConfig to useChartSeriesConfig plugin (mui#21004)

Author: JCQuintas

packages/x-charts-premium/src/BarChartPremium/BarChartPremium.tsx

@@ -126,7 +126,9 @@ const BarChartPremium = React.forwardRef(function BarChartPremium(
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
 
   return (
-    <ChartDataProviderPremium {...chartDataProviderProProps}>
+    <ChartDataProviderPremium<'bar' | 'rangeBar', BarChartPremiumPluginSignatures>
+      {...chartDataProviderProProps}
+    >
       <ChartsWrapper {...chartsWrapperProps}>
         {showToolbar ? <Toolbar {...props.slotProps?.toolbar} /> : null}
         {!props.hideLegend && <ChartsLegend {...legendProps} />}

packages/x-charts-premium/src/BarChartPremium/RangeBar/useRangeBarPlotData.ts

@@ -6,7 +6,6 @@ import {
   type D3Scale,
   getBandSize,
   type ScaleName,
-  selectorChartSeriesConfig,
   useStore,
 } from '@mui/x-charts/internals';
 import { type ChartsXAxisProps, type ChartsYAxisProps } from '@mui/x-charts/models';
@@ -23,7 +22,7 @@ export function useRangeBarPlotData(
   const seriesData = useRangeBarSeriesContext() ?? { series: {}, seriesOrder: [] };
   const defaultXAxisId = useXAxes().xAxisIds[0];
   const defaultYAxisId = useYAxes().yAxisIds[0];
-  const getColor = store.use(selectorChartSeriesConfig).rangeBar.colorProcessor;
+  const getColor = store.state.seriesConfig.config.rangeBar.colorProcessor;
 
   const { series, seriesOrder } = seriesData;
 

packages/x-charts-premium/src/ChartContainerPremium/ChartContainerPremium.tsx

@@ -59,7 +59,7 @@ const ChartContainerPremium = React.forwardRef(function ChartContainerPremium<
     useChartContainerPremiumProps<TSeries, TSignatures>(props, ref);
 
   return (
-    <ChartDataProviderPremium {...chartDataProviderPremiumProps}>
+    <ChartDataProviderPremium<TSeries, TSignatures> {...chartDataProviderPremiumProps}>
       <ChartsSurface {...chartsSurfaceProps}>{children}</ChartsSurface>
     </ChartDataProviderPremium>
   );

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

@@ -108,7 +108,7 @@ const BarChartPro = React.forwardRef(function BarChartPro(
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
 
   return (
-    <ChartDataProviderPro {...chartDataProviderProProps}>
+    <ChartDataProviderPro<'bar', BarChartProPluginSignatures> {...chartDataProviderProProps}>
       <ChartsWrapper {...chartsWrapperProps}>
         {showToolbar ? <Toolbar {...props.slotProps?.toolbar} /> : null}
         {!props.hideLegend && <ChartsLegend {...legendProps} />}

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

@@ -57,7 +57,7 @@ const ChartContainerPro = React.forwardRef(function ChartContainerProInner<
   >(props, ref);
 
   return (
-    <ChartDataProviderPro {...chartDataProviderProProps}>
+    <ChartDataProviderPro<TSeries, TSignatures> {...chartDataProviderProProps}>
       <ChartsSurface {...chartsSurfaceProps}>{children}</ChartsSurface>
     </ChartDataProviderPro>
   );

packages/x-charts-pro/src/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.ts

@@ -18,7 +18,6 @@ import { selectorChartXAxis, selectorChartYAxis } from './useChartFunnelAxisRend
 export const useChartFunnelAxis: ChartPlugin<UseChartFunnelAxisSignature> = ({
   params,
   store,
-  seriesConfig,
   svgRef,
   instance,
 }) => {
@@ -61,7 +60,7 @@ export const useChartFunnelAxis: ChartPlugin<UseChartFunnelAxisSignature> = ({
         y: defaultizeYAxis(yAxis, dataset, 0),
       },
     });
-  }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store, gap]);
+  }, [drawingArea, xAxis, yAxis, dataset, store, gap]);
 
   React.useEffect(() => {
     const element = svgRef.current;

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

@@ -88,6 +88,7 @@ export interface HeatmapProps
       | 'experimentalFeatures'
       | 'highlightedAxis'
       | 'onHighlightedAxisChange'
+      | 'seriesConfig'
       | 'onAxisClick'
     >,
     Omit<ChartsAxisProps, 'slots' | 'slotProps'>,
@@ -330,11 +331,6 @@ Heatmap.propTypes = {
    * An array of [[HeatmapSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * The configuration helpers used to compute attributes according to the series type.
-   * @ignore Unstable props for internal usage.
-   */
-  seriesConfig: PropTypes.object,
   /**
    * If true, shows the default chart toolbar.
    * @default false

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

@@ -112,7 +112,7 @@ const LineChartPro = React.forwardRef(function LineChartPro(
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
 
   return (
-    <ChartDataProviderPro {...chartDataProviderProProps}>
+    <ChartDataProviderPro<'line', LineChartProPluginSignatures> {...chartDataProviderProProps}>
       <ChartsWrapper {...chartsWrapperProps}>
         {showToolbar ? <Toolbar {...props.slotProps?.toolbar} /> : null}
         {!props.hideLegend && <ChartsLegend {...legendProps} />}

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

@@ -118,7 +118,9 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro(
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
 
   return (
-    <ChartDataProviderPro {...chartDataProviderProProps}>
+    <ChartDataProviderPro<'scatter', ScatterChartProPluginSignatures>
+      {...chartDataProviderProProps}
+    >
       <ChartsWrapper {...chartsWrapperProps}>
         {showToolbar ? <Toolbar {...props.slotProps?.toolbar} /> : null}
         {!props.hideLegend && <ChartsLegend {...legendProps} />}

packages/x-charts/src/ChartDataProvider/ChartDataProvider.tsx

@@ -28,7 +28,7 @@ export type ChartDataProviderProps<
   TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>,
 > = React.PropsWithChildren<
   ChartProviderProps<TSeries, TSignatures>['pluginParams'] &
-    Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'>
+    Pick<ChartProviderProps<TSeries, TSignatures>, 'plugins'>
 > &
   ChartsLocalizationProviderProps & {
     /**