[charts] Use selectors from @mui/x-internals (#20052)

Co-authored-by: Jose Quintas <[email protected]>

Author: alexfauquette

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

@@ -40,8 +40,8 @@ interface ChartZoomSliderProps {
 export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderProps) {
   const store = useStore();
   const drawingArea = useDrawingArea();
-  const zoomData = useSelector(store, selectorChartAxisZoomData, [axisId]);
-  const zoomOptions = useSelector(store, selectorChartAxisZoomOptionsLookup, [axisId]);
+  const zoomData = useSelector(store, selectorChartAxisZoomData, axisId);
+  const zoomOptions = useSelector(store, selectorChartAxisZoomOptionsLookup, axisId);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const { xAxis } = useXAxes();
   const { yAxis } = useYAxes();

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.tsx

@@ -75,7 +75,7 @@ export function ChartAxisZoomSliderActiveTrack({
 }: ChartAxisZoomSliderActiveTrackProps) {
   const { instance, svgRef } = useChartContext<[UseChartProZoomSignature]>();
   const store = useStore<[UseChartProZoomSignature]>();
-  const axis = useSelector(store, selectorChartAxis, [axisId]);
+  const axis = useSelector(store, selectorChartAxis, axisId);
   const drawingArea = useDrawingArea();
   const activePreviewRectRef = React.useRef<SVGRectElement>(null);
   const [startThumbEl, setStartThumbEl] = React.useState<SVGRectElement | null>(null);

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.tsx

@@ -54,8 +54,8 @@ function PreviewRectangles(props: {
   const { axisId, axisDirection } = props;
   const store = useStore();
 
-  const zoomData = useSelector(store, selectorChartAxisZoomData, [axisId]);
-  const zoomOptions = useSelector(store, selectorChartAxisZoomOptionsLookup, [axisId]);
+  const zoomData = useSelector(store, selectorChartAxisZoomData, axisId);
+  const zoomOptions = useSelector(store, selectorChartAxisZoomOptionsLookup, axisId);
   const id = useId();
 
   if (!zoomData) {

packages/x-charts-pro/src/ChartZoomSlider/internals/previews/AreaPreviewPlot.tsx

@@ -65,8 +65,8 @@ function PreviewAreaElement({ id, color, gradientId, onClick, ...other }: Previe
 function useAreaPreviewData(axisId: AxisId) {
   const store = useStore();
 
-  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
-  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, axisId);
 
   return useAreaPlotData(xAxes, yAxes);
 }

packages/x-charts-pro/src/ChartZoomSlider/internals/previews/BarPreviewPlot.tsx

@@ -60,8 +60,8 @@ export function BarPreviewPlot(props: BarPreviewPlotProps) {
 function useBarPreviewData(axisId: AxisId, drawingArea: ChartDrawingArea) {
   const store = useStore();
 
-  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
-  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, axisId);
 
   return useBarPlotData(drawingArea, xAxes, yAxes);
 }

packages/x-charts-pro/src/ChartZoomSlider/internals/previews/LinePreviewPlot.tsx

@@ -59,8 +59,8 @@ function PreviewLineElement({ id, color, gradientId, onClick, ...other }: Previe
 function useLinePreviewData(axisId: AxisId) {
   const store = useStore();
 
-  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
-  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, axisId);
 
   return useLinePlotData(xAxes, yAxes);
 }

packages/x-charts-pro/src/ChartZoomSlider/internals/previews/ScatterPreviewPlot.tsx

@@ -24,8 +24,8 @@ interface ScatterPreviewPlotProps extends PreviewPlotProps {
 export function ScatterPreviewPlot({ axisId, x, y, height, width }: ScatterPreviewPlotProps) {
   const store = useStore();
   const seriesData = useScatterSeriesContext();
-  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, [axisId]);
-  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, [axisId]);
+  const xAxes = useSelector(store, selectorChartPreviewComputedXAxis, axisId);
+  const yAxes = useSelector(store, selectorChartPreviewComputedYAxis, axisId);
   const defaultXAxisId = useXAxes().xAxisIds[0];
   const defaultYAxisId = useYAxes().yAxisIds[0];
   const { zAxis: zAxes, zAxisIds } = useZAxes();

packages/x-charts-pro/src/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.ts

@@ -1,3 +1,4 @@
+import { createSelectorMemoized } from '@mui/x-internals/store';
 import {
   createSelector,
   selectorChartSeriesConfig,
@@ -15,14 +16,13 @@ export const selectorFunnel = (state: ChartState<[], [UseChartFunnelAxisSignatur
 
 export const selectorFunnelGap = createSelector([selectorFunnel], (funnel) => funnel?.gap ?? 0);
 
-export const selectorChartXAxis = createSelector(
-  [
-    selectorChartRawXAxis,
-    selectorChartDrawingArea,
-    selectorChartSeriesProcessed,
-    selectorChartSeriesConfig,
-    selectorFunnelGap,
-  ],
+export const selectorChartXAxis = createSelectorMemoized(
+  selectorChartRawXAxis,
+  selectorChartDrawingArea,
+  selectorChartSeriesProcessed,
+  selectorChartSeriesConfig,
+  selectorFunnelGap,
+
   (axis, drawingArea, formattedSeries, seriesConfig, gap) =>
     computeAxisValue({
       drawingArea,
@@ -34,14 +34,13 @@ export const selectorChartXAxis = createSelector(
     }),
 );
 
-export const selectorChartYAxis = createSelector(
-  [
-    selectorChartRawYAxis,
-    selectorChartDrawingArea,
-    selectorChartSeriesProcessed,
-    selectorChartSeriesConfig,
-    selectorFunnelGap,
-  ],
+export const selectorChartYAxis = createSelectorMemoized(
+  selectorChartRawYAxis,
+  selectorChartDrawingArea,
+  selectorChartSeriesProcessed,
+  selectorChartSeriesConfig,
+  selectorFunnelGap,
+
   (axis, drawingArea, formattedSeries, seriesConfig, gap) =>
     computeAxisValue({
       drawingArea,

packages/x-charts-pro/src/SankeyChart/SankeyLinkElement.tsx

@@ -48,8 +48,8 @@ export const SankeyLinkElement = React.forwardRef<SVGPathElement, SankeyLinkElem
       link,
     };
 
-    const isHighlighted = useSelector(store, selectorIsLinkHighlighted, [link]);
-    const isFaded = useSelector(store, selectorIsSankeyItemFaded, [isHighlighted]);
+    const isHighlighted = useSelector(store, selectorIsLinkHighlighted, link);
+    const isFaded = useSelector(store, selectorIsSankeyItemFaded, isHighlighted);
 
     // Add interaction props for tooltips
     const interactionProps = useInteractionItemProps(identifier);

packages/x-charts-pro/src/SankeyChart/SankeyNodeElement.tsx

@@ -65,8 +65,8 @@ export const SankeyNodeElement = React.forwardRef<SVGGElement, SankeyNodeElement
       node,
     };
 
-    const isHighlighted = useSelector(store, selectorIsNodeHighlighted, [node]);
-    const isFaded = useSelector(store, selectorIsSankeyItemFaded, [isHighlighted]);
+    const isHighlighted = useSelector(store, selectorIsNodeHighlighted, node.id);
+    const isFaded = useSelector(store, selectorIsSankeyItemFaded, isHighlighted);
 
     // Add interaction props for tooltips
     const interactionProps = useInteractionItemProps(identifier);