[charts] Introduce the plugin system (#15513)

Signed-off-by: Alexandre Fauquette <[email protected]> Co-authored-by: Jose C Quintas Jr <[email protected]>
mui · Nov 26, 2024 · db5cf78 · db5cf78
1 parent 21195d4
commit db5cf78
Show file tree

Hide file tree

Showing 63 changed files with 817 additions and 365 deletions.
diff --git a/docs/data/charts/tooltip/ItemTooltipTopElement.js b/docs/data/charts/tooltip/ItemTooltipTopElement.js
@@ -72,7 +72,8 @@ export function ItemTooltipTopElement({ children }) {
   if (
     tooltipData.identifier.type !== 'bar' ||
     tooltipData.identifier.dataIndex === undefined ||
-    tooltipData.value === null
+    tooltipData.value === null ||
+    svgRef.current === null
   ) {
     // This demo is only about bar charts
     return null;

diff --git a/docs/data/charts/tooltip/ItemTooltipTopElement.tsx b/docs/data/charts/tooltip/ItemTooltipTopElement.tsx
@@ -78,7 +78,8 @@ export function ItemTooltipTopElement({ children }: React.PropsWithChildren) {
   if (
     tooltipData.identifier.type !== 'bar' ||
     tooltipData.identifier.dataIndex === undefined ||
-    tooltipData.value === null
+    tooltipData.value === null ||
+    svgRef.current === null
   ) {
     // This demo is only about bar charts
     return null;

diff --git a/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx b/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx
@@ -4,12 +4,11 @@ import PropTypes from 'prop-types';
 import {
   ChartDataProviderProps,
   DrawingAreaProvider,
-  InteractionProvider,
   PluginProvider,
   SeriesProvider,
   AnimationProvider,
-  SvgRefProvider,
   SizeProvider,
+  ChartProvider,
 } from '@mui/x-charts/internals';
 import { HighlightedProvider, ZAxisContextProvider } from '@mui/x-charts/context';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
@@ -39,27 +38,27 @@ function ChartDataProviderPro(props: ChartDataProviderProProps) {
   useLicenseVerifier('x-charts-pro', releaseInfo);
 
   return (
-    <SizeProvider {...sizeProviderProps}>
-      <DrawingAreaProvider {...drawingAreaProviderProps}>
-        <AnimationProvider {...animationProviderProps}>
-          <PluginProvider {...pluginProviderProps}>
-            <ZoomProvider {...zoomProviderProps}>
-              <SeriesProvider {...seriesProviderProps}>
-                <CartesianProviderPro {...cartesianProviderProps}>
-                  <ZAxisContextProvider {...zAxisContextProps}>
-                    <InteractionProvider>
+    <ChartProvider>
+      <SizeProvider {...sizeProviderProps}>
+        <DrawingAreaProvider {...drawingAreaProviderProps}>
+          <AnimationProvider {...animationProviderProps}>
+            <PluginProvider {...pluginProviderProps}>
+              <ZoomProvider {...zoomProviderProps}>
+                <SeriesProvider {...seriesProviderProps}>
+                  <CartesianProviderPro {...cartesianProviderProps}>
+                    <ZAxisContextProvider {...zAxisContextProps}>
                       <HighlightedProvider {...highlightedProviderProps}>
-                        <SvgRefProvider>{children}</SvgRefProvider>
+                        {children}
                       </HighlightedProvider>
-                    </InteractionProvider>
-                  </ZAxisContextProvider>
-                </CartesianProviderPro>
-              </SeriesProvider>
-            </ZoomProvider>
-          </PluginProvider>
-        </AnimationProvider>
-      </DrawingAreaProvider>
-    </SizeProvider>
+                    </ZAxisContextProvider>
+                  </CartesianProviderPro>
+                </SeriesProvider>
+              </ZoomProvider>
+            </PluginProvider>
+          </AnimationProvider>
+        </DrawingAreaProvider>
+      </SizeProvider>
+    </ChartProvider>
   );
 }
 

diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsXAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsXAxisHighlight.tsx
@@ -2,9 +2,9 @@
 import * as React from 'react';
 import { getValueToPositionMapper, useXScale } from '../hooks/useScale';
 import { isBandScale } from '../internals/isBandScale';
-import { useSelector } from '../internals/useSelector';
-import { useStore } from '../internals/useStore';
-import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
+import { useSelector } from '../internals/store/useSelector';
+import { useStore } from '../internals/store/useStore';
+import { selectorChartsInteractionXAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
 import { useDrawingArea } from '../hooks';
 import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types';
 import { ChartsAxisHighlightClasses } from './chartsAxisHighlightClasses';

diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsYAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsYAxisHighlight.tsx
@@ -2,9 +2,9 @@
 import * as React from 'react';
 import { getValueToPositionMapper, useYScale } from '../hooks/useScale';
 import { isBandScale } from '../internals/isBandScale';
-import { useSelector } from '../internals/useSelector';
-import { useStore } from '../internals/useStore';
-import { selectorChartsInteractionYAxis } from '../context/InteractionSelectors';
+import { useSelector } from '../internals/store/useSelector';
+import { useStore } from '../internals/store/useStore';
+import { selectorChartsInteractionYAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
 import { useDrawingArea } from '../hooks';
 import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types';
 import { ChartsAxisHighlightClasses } from './chartsAxisHighlightClasses';

diff --git a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { useSeries } from '../hooks/useSeries';
 import { useSvgRef } from '../hooks';
 import { useCartesianContext } from '../context/CartesianProvider';
-import { useStore } from '../internals/useStore';
+import { useStore } from '../internals/store/useStore';
 
 export type ChartsAxisData = {
   dataIndex: number;

diff --git a/packages/x-charts/src/ChartsSurface/ChartsSurface.test.tsx b/packages/x-charts/src/ChartsSurface/ChartsSurface.test.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { expect } from 'chai';
-import { SvgRefProvider } from '../context/SvgRefProvider';
 import { SizeProvider } from '../context/SizeProvider';
+import { ChartProvider } from '../internals';
 
 describe('<ChartsSurface />', () => {
   // JSDOM doesn't implement SVGElement
@@ -17,16 +17,16 @@ describe('<ChartsSurface />', () => {
     const ref = React.createRef<SVGSVGElement>();
 
     render(
-      <SizeProvider width={100} height={100}>
-        <SvgRefProvider>
+      <ChartProvider>
+        <SizeProvider width={100} height={100}>
           <ChartsSurface
             ref={ref}
             disableAxisListener // TODO: remove during v8 when charts store is always available
           >
             <rect width={100} height={100} />
           </ChartsSurface>
-        </SvgRefProvider>
-      </SizeProvider>,
+        </SizeProvider>
+      </ChartProvider>,
     );
 
     expect(ref.current instanceof SVGElement, 'ref is a SVGElement').to.equal(true);

diff --git a/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx b/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx
@@ -5,8 +5,8 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { useAxisEvents } from '../hooks/useAxisEvents';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
-import { useDrawingArea } from '../hooks';
-import { useSurfaceRef } from '../context/SvgRefProvider';
+import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useSvgRef } from '../hooks/useSvgRef';
 import { useSize } from '../context/SizeProvider';
 
 export interface ChartsSurfaceProps {
@@ -38,8 +38,8 @@ const ChartsSurface = React.forwardRef<SVGSVGElement, ChartsSurfaceProps>(functi
 ) {
   const { width, height, left, right, top, bottom } = useDrawingArea();
   const { hasIntrinsicSize } = useSize();
-  const surfaceRef = useSurfaceRef();
-  const handleRef = useForkRef(surfaceRef, ref);
+  const svgRef = useSvgRef();
+  const handleRef = useForkRef(svgRef, ref);
   const themeProps = useThemeProps({ props: inProps, name: 'MuiChartsSurface' });
 
   const { children, disableAxisListener = false, className, title, desc, ...other } = themeProps;

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx
@@ -8,14 +8,14 @@ import NoSsr from '@mui/material/NoSsr';
 import { useSvgRef } from '../hooks/useSvgRef';
 import { TriggerOptions, usePointerType } from './utils';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
-import { useSelector } from '../internals/useSelector';
-import { useStore } from '../internals/useStore';
+import { useSelector } from '../internals/store/useSelector';
+import { useStore } from '../internals/store/useStore';
 import { useXAxis } from '../hooks';
 import {
   selectorChartsInteractionItemIsDefined,
   selectorChartsInteractionXAxisIsDefined,
   selectorChartsInteractionYAxisIsDefined,
-} from '../context/InteractionSelectors';
+} from '../internals/plugins/featurePlugins/useChartInteraction';
 
 export interface ChartsTooltipContainerProps extends Partial<PopperProps> {
   /**

diff --git a/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx
@@ -6,16 +6,16 @@ import { ZAxisContext } from '../context/ZAxisContextProvider';
 import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
 import { SeriesId } from '../models/seriesType/common';
 import { CartesianChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config';
-import { useStore } from '../internals/useStore';
-import { useSelector } from '../internals/useSelector';
+import { useStore } from '../internals/store/useStore';
+import { useSelector } from '../internals/store/useSelector';
 import { getLabel } from '../internals/getLabel';
 import { isCartesianSeriesType } from '../internals/isCartesian';
 import { utcFormatter } from './utils';
 import { useXAxis, useYAxis } from '../hooks/useAxis';
 import {
   selectorChartsInteractionXAxis,
   selectorChartsInteractionYAxis,
-} from '../context/InteractionSelectors';
+} from '../internals/plugins/featurePlugins/useChartInteraction';
 
 export interface UseAxisTooltipReturnValue<
   SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType,

diff --git a/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx
@@ -5,19 +5,19 @@ import { useCartesianContext } from '../context/CartesianProvider';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
 import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
 import {
+  ChartItemIdentifier,
   ChartSeriesDefaultized,
   ChartSeriesType,
   ChartsSeriesConfig,
 } from '../models/seriesType/config';
 import { getLabel } from '../internals/getLabel';
 import { CommonSeriesType } from '../models/seriesType/common';
-import { selectorChartsInteractionItem } from '../context/InteractionSelectors';
-import { useSelector } from '../internals/useSelector';
-import { useStore } from '../internals/useStore';
-import { ItemInteractionData } from '../internals/plugins/models';
+import { selectorChartsInteractionItem } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { useSelector } from '../internals/store/useSelector';
+import { useStore } from '../internals/store/useStore';
 
 export interface UseItemTooltipReturnValue<T extends ChartSeriesType> {
-  identifier: ItemInteractionData<T>;
+  identifier: ChartItemIdentifier<T>;
   color: string;
   label: string | undefined;
   value: ChartsSeriesConfig[T]['valueType'];
@@ -60,7 +60,7 @@ export function useItemTooltip<T extends ChartSeriesType>(): null | UseItemToolt
     )?.(value, { dataIndex: item.dataIndex });
 
     return {
-      identifier: item as ItemInteractionData<T>,
+      identifier: item as ChartItemIdentifier<T>,
       color: getColor(item.dataIndex),
       label,
       value,
@@ -75,7 +75,7 @@ export function useItemTooltip<T extends ChartSeriesType>(): null | UseItemToolt
   )?.(value, { dataIndex: item.dataIndex });
 
   return {
-    identifier: item as ItemInteractionData<T>,
+    identifier: item as ChartItemIdentifier<T>,
     color: getColor(item.dataIndex),
     label,
     value,

diff --git a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx
@@ -5,7 +5,7 @@ import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
-import { useStore } from '../internals/useStore';
+import { useStore } from '../internals/store/useStore';
 import { getSVGPoint } from '../internals/getSVGPoint';
 import { ScatterItemIdentifier } from '../models';
 import { SeriesId } from '../models/seriesType/common';
@@ -107,10 +107,10 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
   }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
 
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
+    if (svgRef.current === null) {
       return undefined;
     }
+    const element = svgRef.current;
 
     function getClosestPoint(
       event: MouseEvent,

diff --git a/packages/x-charts/src/Gauge/GaugeContainer.tsx b/packages/x-charts/src/Gauge/GaugeContainer.tsx
@@ -6,7 +6,7 @@ import { ChartsSurface, ChartsSurfaceProps } from '../ChartsSurface';
 import { DrawingAreaProvider, DrawingAreaProviderProps } from '../context/DrawingAreaProvider';
 import { GaugeProvider, GaugeProviderProps } from './GaugeProvider';
 import { SizeProvider, useSize } from '../context/SizeProvider';
-import { SvgRefProvider } from '../context/SvgRefProvider';
+import { ChartProvider } from '../context/ChartProvider';
 
 export interface GaugeContainerProps
   extends Omit<ChartsSurfaceProps, 'width' | 'height' | 'children'>,
@@ -84,8 +84,8 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(
   } = props;
 
   return (
-    <SizeProvider width={inWidth} height={inHeight}>
-      <SvgRefProvider>
+    <ChartProvider>
+      <SizeProvider width={inWidth} height={inHeight}>
         <DrawingAreaProvider margin={{ left: 10, right: 10, top: 10, bottom: 10, ...margin }}>
           <GaugeProvider
             value={value}
@@ -118,8 +118,8 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(
             </ResizableContainer>
           </GaugeProvider>
         </DrawingAreaProvider>
-      </SvgRefProvider>
-    </SizeProvider>
+      </SizeProvider>
+    </ChartProvider>
   );
 });
 

diff --git a/packages/x-charts/src/LineChart/CircleMarkElement.tsx b/packages/x-charts/src/LineChart/CircleMarkElement.tsx
@@ -7,9 +7,9 @@ import { animated, useSpring } from '@react-spring/web';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { useItemHighlighted } from '../context';
 import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses';
-import { useSelector } from '../internals/useSelector';
-import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
-import { useStore } from '../internals/useStore';
+import { useSelector } from '../internals/store/useSelector';
+import { selectorChartsInteractionXAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { useStore } from '../internals/store/useStore';
 
 export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> &
   Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {

diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
@@ -2,16 +2,16 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { useStore } from '../internals/useStore';
-import { useSelector } from '../internals/useSelector';
+import { useStore } from '../internals/store/useStore';
+import { useSelector } from '../internals/store/useSelector';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { LineHighlightElement, LineHighlightElementProps } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import getColor from './getColor';
 import { useLineSeries } from '../hooks/useSeries';
 import { useDrawingArea } from '../hooks/useDrawingArea';
-import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
+import { selectorChartsInteractionXAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
 
 export interface LineHighlightPlotSlots {
   lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;

diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx
@@ -8,9 +8,9 @@ import { getSymbol } from '../internals/getSymbol';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { useItemHighlighted } from '../context';
 import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses';
-import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
-import { useSelector } from '../internals/useSelector';
-import { useStore } from '../internals/useStore';
+import { selectorChartsInteractionXAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { useSelector } from '../internals/store/useSelector';
+import { useStore } from '../internals/store/useStore';
 
 const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',

diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx
@@ -8,12 +8,12 @@ import {
 } from '../models/seriesType/scatter';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { useStore } from '../internals/useStore';
-import { useSelector } from '../internals/useSelector';
+import { useStore } from '../internals/store/useStore';
+import { useSelector } from '../internals/store/useSelector';
 import { D3Scale } from '../models/axis';
 import { useHighlighted } from '../context';
 import { useDrawingArea } from '../hooks/useDrawingArea';
-import { selectorChartsInteractionIsVoronoiEnabled } from '../context/InteractionSelectors';
+import { selectorChartsInteractionIsVoronoiEnabled } from '../internals/plugins/featurePlugins/useChartInteraction';
 
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;