[charts] Split DrawingProvider into DrawingAreaProvider and `SvgR…

…efProvider` (#15417)
mui · Nov 14, 2024 · 51e84ba · 51e84ba
1 parent 3c3e7de
commit 51e84ba
Show file tree

Hide file tree

Showing 29 changed files with 290 additions and 243 deletions.
diff --git a/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx b/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx
@@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
 import {
   ChartDataProviderProps,
   ChartsAxesGradients,
-  DrawingProvider,
+  DrawingAreaProvider,
   InteractionProvider,
   PluginProvider,
   SeriesProvider,
   AnimationProvider,
+  SvgRefProvider,
 } from '@mui/x-charts/internals';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { HighlightedProvider, ZAxisContextProvider } from '@mui/x-charts/context';
@@ -36,34 +37,37 @@ const ChartDataProviderPro = React.forwardRef(function ChartDataProviderPro(
     chartsSurfaceProps,
     pluginProviderProps,
     animationProviderProps,
+    svgRefProviderProps,
     children,
   } = useChartContainerProProps(props, ref);
 
   useLicenseVerifier('x-charts-pro', releaseInfo);
 
   return (
-    <DrawingProvider {...drawingProviderProps}>
-      <AnimationProvider {...animationProviderProps}>
-        <PluginProvider {...pluginProviderProps}>
-          <ZoomProvider {...zoomProviderProps}>
-            <SeriesProvider {...seriesProviderProps}>
-              <CartesianProviderPro {...cartesianProviderProps}>
-                <ZAxisContextProvider {...zAxisContextProps}>
-                  <InteractionProvider>
-                    <HighlightedProvider {...highlightedProviderProps}>
-                      <ChartsSurface {...chartsSurfaceProps}>
-                        <ChartsAxesGradients />
-                        {children}
-                      </ChartsSurface>
-                    </HighlightedProvider>
-                  </InteractionProvider>
-                </ZAxisContextProvider>
-              </CartesianProviderPro>
-            </SeriesProvider>
-          </ZoomProvider>
-        </PluginProvider>
-      </AnimationProvider>
-    </DrawingProvider>
+    <DrawingAreaProvider {...drawingProviderProps}>
+      <SvgRefProvider {...svgRefProviderProps}>
+        <AnimationProvider {...animationProviderProps}>
+          <PluginProvider {...pluginProviderProps}>
+            <ZoomProvider {...zoomProviderProps}>
+              <SeriesProvider {...seriesProviderProps}>
+                <CartesianProviderPro {...cartesianProviderProps}>
+                  <ZAxisContextProvider {...zAxisContextProps}>
+                    <InteractionProvider>
+                      <HighlightedProvider {...highlightedProviderProps}>
+                        <ChartsSurface {...chartsSurfaceProps}>
+                          <ChartsAxesGradients />
+                          {children}
+                        </ChartsSurface>
+                      </HighlightedProvider>
+                    </InteractionProvider>
+                  </ZAxisContextProvider>
+                </CartesianProviderPro>
+              </SeriesProvider>
+            </ZoomProvider>
+          </PluginProvider>
+        </AnimationProvider>
+      </SvgRefProvider>
+    </DrawingAreaProvider>
   );
 });
 

diff --git a/packages/x-charts-pro/src/context/ChartDataProviderPro/useChartDataProviderProProps.ts b/packages/x-charts-pro/src/context/ChartDataProviderPro/useChartDataProviderProProps.ts
@@ -19,6 +19,7 @@ export const useChartContainerProProps = (
     chartsSurfaceProps,
     pluginProviderProps,
     animationProviderProps,
+    svgRefProviderProps,
     xAxis,
     yAxis,
   } = useChartDataProviderProps(baseProps, ref);
@@ -41,5 +42,6 @@ export const useChartContainerProProps = (
     highlightedProviderProps,
     chartsSurfaceProps,
     animationProviderProps,
+    svgRefProviderProps,
   };
 };
diff --git a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
@@ -6,7 +6,7 @@ import { useThemeProps } from '@mui/material/styles';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { ChartsGridClasses, getChartsGridUtilityClass } from './chartsGridClasses';
 import { useDrawingArea } from '../hooks/useDrawingArea';
-import { GridRoot } from './styledCommonents';
+import { GridRoot } from './styledComponents';
 import { ChartsGridVertical } from './ChartsVerticalGrid';
 import { ChartsGridHorizontal } from './ChartsHorizontalGrid';
 

diff --git a/packages/x-charts/src/ChartsGrid/ChartsHorizontalGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsHorizontalGrid.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { DrawingArea } from '../context/DrawingProvider';
+import { DrawingAreaState } from '../context/DrawingAreaProvider';
 import { useTicks } from '../hooks/useTicks';
 import { AxisDefaultized, ChartsYAxisProps, ScaleName } from '../models/axis';
-import { GridLine } from './styledCommonents';
+import { GridLine } from './styledComponents';
 import { ChartsGridClasses } from './chartsGridClasses';
 
 interface ChartsGridHorizontalProps {
   axis: AxisDefaultized<ScaleName, any, ChartsYAxisProps>;
-  drawingArea: DrawingArea;
+  drawingArea: DrawingAreaState;
   classes: Partial<ChartsGridClasses>;
 }
 

diff --git a/packages/x-charts/src/ChartsGrid/ChartsVerticalGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsVerticalGrid.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { DrawingArea } from '../context/DrawingProvider';
+import { DrawingAreaState } from '../context/DrawingAreaProvider';
 import { useTicks } from '../hooks/useTicks';
 import { AxisDefaultized, ChartsXAxisProps, ScaleName } from '../models/axis';
-import { GridLine } from './styledCommonents';
+import { GridLine } from './styledComponents';
 import { ChartsGridClasses } from './chartsGridClasses';
 
 interface ChartsGridVerticalProps {
   axis: AxisDefaultized<ScaleName, any, ChartsXAxisProps>;
-  drawingArea: DrawingArea;
+  drawingArea: DrawingAreaState;
   classes: Partial<ChartsGridClasses>;
 }
 

diff --git a/...harts/src/ChartsGrid/styledCommonents.tsx → ...harts/src/ChartsGrid/styledComponents.tsx b/...harts/src/ChartsGrid/styledCommonents.tsx → ...harts/src/ChartsGrid/styledComponents.tsx
diff --git a/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx b/packages/x-charts/src/ChartsLegend/LegendPerItem.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
-import { DrawingArea } from '../context/DrawingProvider';
+import { DrawingAreaState } from '../context/DrawingAreaProvider';
 import { ChartsTextStyle } from '../ChartsText';
 import { CardinalDirections } from '../models/layout';
 import { getWordsByLines } from '../internals/getWordsByLines';
@@ -17,7 +17,7 @@ import { ChartsLegendClasses } from './chartsLegendClasses';
 export type ChartsLegendRootOwnerState = {
   position: AnchorPosition;
   direction: Direction;
-  drawingArea: DrawingArea;
+  drawingArea: DrawingAreaState;
   offsetX?: number;
   offsetY?: number;
   seriesNumber: number;

diff --git a/packages/x-charts/src/Gauge/Gauge.tsx b/packages/x-charts/src/Gauge/Gauge.tsx
@@ -27,7 +27,7 @@ const useUtilityClasses = (props: GaugeProps) => {
   return composeClasses(slots, getGaugeUtilityClass, classes);
 };
 
-const Gauge = React.forwardRef(function Gauge(props: GaugeProps, ref) {
+const Gauge = React.forwardRef(function Gauge(props: GaugeProps, ref: React.Ref<SVGSVGElement>) {
   const { text, children, classes: propsClasses, className, ...other } = props;
   const classes = useUtilityClasses(props);
   return (

diff --git a/packages/x-charts/src/Gauge/GaugeContainer.tsx b/packages/x-charts/src/Gauge/GaugeContainer.tsx
@@ -5,12 +5,13 @@ import { styled } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
 import { useChartContainerDimensions } from '../ChartContainer/useChartContainerDimensions';
 import { ChartsSurface, ChartsSurfaceProps } from '../ChartsSurface';
-import { DrawingProvider, DrawingProviderProps } from '../context/DrawingProvider';
+import { DrawingAreaProvider, DrawingAreaProviderProps } from '../context/DrawingAreaProvider';
 import { GaugeProvider, GaugeProviderProps } from './GaugeProvider';
+import { SvgRefProvider } from '../context/SvgRefProvider';
 
 export interface GaugeContainerProps
   extends Omit<ChartsSurfaceProps, 'width' | 'height' | 'children'>,
-    Omit<DrawingProviderProps, 'svgRef' | 'width' | 'height' | 'children'>,
+    Omit<DrawingAreaProviderProps, 'svgRef' | 'width' | 'height' | 'children'>,
     Omit<GaugeProviderProps, 'children'> {
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -45,7 +46,10 @@ const ResizableContainer = styled('div', {
   },
 }));
 
-const GaugeContainer = React.forwardRef(function GaugeContainer(props: GaugeContainerProps, ref) {
+const GaugeContainer = React.forwardRef(function GaugeContainer(
+  props: GaugeContainerProps,
+  ref: React.Ref<SVGSVGElement>,
+) {
   const {
     width: inWidth,
     height: inHeight,
@@ -81,37 +85,38 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(props: GaugeCont
       {...other}
     >
       {width && height ? (
-        <DrawingProvider
-          width={width}
-          height={height}
-          margin={{ left: 10, right: 10, top: 10, bottom: 10, ...margin }}
-          svgRef={svgRef}
-        >
-          <GaugeProvider
-            value={value}
-            valueMin={valueMin}
-            valueMax={valueMax}
-            startAngle={startAngle}
-            endAngle={endAngle}
-            outerRadius={outerRadius}
-            innerRadius={innerRadius}
-            cornerRadius={cornerRadius}
-            cx={cx}
-            cy={cy}
+        <SvgRefProvider svgRef={svgRef}>
+          <DrawingAreaProvider
+            width={width}
+            height={height}
+            margin={{ left: 10, right: 10, top: 10, bottom: 10, ...margin }}
           >
-            <ChartsSurface
-              width={width}
-              height={height}
-              ref={chartSurfaceRef}
-              title={title}
-              desc={desc}
-              disableAxisListener
-              aria-hidden="true"
+            <GaugeProvider
+              value={value}
+              valueMin={valueMin}
+              valueMax={valueMax}
+              startAngle={startAngle}
+              endAngle={endAngle}
+              outerRadius={outerRadius}
+              innerRadius={innerRadius}
+              cornerRadius={cornerRadius}
+              cx={cx}
+              cy={cy}
             >
-              {children}
-            </ChartsSurface>
-          </GaugeProvider>
-        </DrawingProvider>
+              <ChartsSurface
+                width={width}
+                height={height}
+                ref={chartSurfaceRef}
+                title={title}
+                desc={desc}
+                disableAxisListener
+                aria-hidden="true"
+              >
+                {children}
+              </ChartsSurface>
+            </GaugeProvider>
+          </DrawingAreaProvider>
+        </SvgRefProvider>
       ) : null}
     </ResizableContainer>
   );

diff --git a/packages/x-charts/src/PieChart/PiePlot.tsx b/packages/x-charts/src/PieChart/PiePlot.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingContext } from '../context/DrawingProvider';
+import { DrawingAreaContext } from '../context/DrawingAreaProvider';
 import { PieArcPlot, PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } from './PieArcPlot';
 import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps, PieArcLabelPlot } from './PieArcLabelPlot';
 import { getPercentageValue } from '../internals/getPercentageValue';
@@ -39,7 +39,7 @@ export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'o
 function PiePlot(props: PiePlotProps) {
   const { skipAnimation: inSkipAnimation, slots, slotProps, onItemClick } = props;
   const seriesData = usePieSeries();
-  const { left, top, width, height } = React.useContext(DrawingContext);
+  const { left, top, width, height } = React.useContext(DrawingAreaContext);
   const skipAnimation = useSkipAnimation(inSkipAnimation);
 
   if (seriesData === undefined) {

diff --git a/packages/x-charts/src/PieChart/getPieCoordinates.ts b/packages/x-charts/src/PieChart/getPieCoordinates.ts
@@ -1,10 +1,10 @@
-import { DrawingArea } from '../context/DrawingProvider';
+import { DrawingAreaState } from '../context/DrawingAreaProvider';
 import { getPercentageValue } from '../internals/getPercentageValue';
 import { DefaultizedPieSeriesType } from '../models/seriesType/pie';
 
 export function getPieCoordinates(
   series: Pick<DefaultizedPieSeriesType, 'cx' | 'cy'>,
-  drawing: Pick<DrawingArea, 'width' | 'height'>,
+  drawing: Pick<DrawingAreaState, 'width' | 'height'>,
 ): { cx: number; cy: number; availableRadius: number } {
   const { height, width } = drawing;
   const { cx: cxParam, cy: cyParam } = series;

diff --git a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx b/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { MakeOptional } from '@mui/x-internals/types';
-import { DrawingProvider, DrawingProviderProps } from '../DrawingProvider';
+import { DrawingAreaProvider, DrawingAreaProviderProps } from '../DrawingAreaProvider';
 import { SeriesProvider, SeriesProviderProps } from '../SeriesProvider';
 import { InteractionProvider } from '../InteractionProvider';
 import { ChartsSurface, ChartsSurfaceProps } from '../../ChartsSurface';
@@ -18,11 +18,12 @@ import { PluginProvider, PluginProviderProps } from '../PluginProvider';
 import { useChartDataProviderProps } from './useChartDataProviderProps';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../models/axis';
 import { AnimationProvider, AnimationProviderProps } from '../AnimationProvider';
+import { SvgRefProvider } from '../SvgRefProvider';
 
 export type ChartDataProviderProps = Omit<
   ChartsSurfaceProps &
     Omit<SeriesProviderProps, 'seriesFormatters'> &
-    Omit<DrawingProviderProps, 'svgRef'> &
+    Omit<DrawingAreaProviderProps, 'svgRef'> &
     Pick<CartesianProviderProps, 'dataset'> &
     ZAxisContextProviderProps &
     HighlightedProviderProps &
@@ -59,29 +60,32 @@ const ChartDataProvider = React.forwardRef(function ChartDataProvider(
     chartsSurfaceProps,
     pluginProviderProps,
     animationProviderProps,
+    svgRefProviderProps,
   } = useChartDataProviderProps(props, ref);
 
   return (
-    <DrawingProvider {...drawingProviderProps}>
-      <PluginProvider {...pluginProviderProps}>
-        <SeriesProvider {...seriesProviderProps}>
-          <CartesianProvider {...cartesianProviderProps}>
-            <ZAxisContextProvider {...zAxisContextProps}>
-              <InteractionProvider>
-                <HighlightedProvider {...highlightedProviderProps}>
-                  <AnimationProvider {...animationProviderProps}>
-                    <ChartsSurface {...chartsSurfaceProps}>
-                      <ChartsAxesGradients />
-                      {children}
-                    </ChartsSurface>
-                  </AnimationProvider>
-                </HighlightedProvider>
-              </InteractionProvider>
-            </ZAxisContextProvider>
-          </CartesianProvider>
-        </SeriesProvider>
-      </PluginProvider>
-    </DrawingProvider>
+    <DrawingAreaProvider {...drawingProviderProps}>
+      <SvgRefProvider {...svgRefProviderProps}>
+        <PluginProvider {...pluginProviderProps}>
+          <SeriesProvider {...seriesProviderProps}>
+            <CartesianProvider {...cartesianProviderProps}>
+              <ZAxisContextProvider {...zAxisContextProps}>
+                <InteractionProvider>
+                  <HighlightedProvider {...highlightedProviderProps}>
+                    <AnimationProvider {...animationProviderProps}>
+                      <ChartsSurface {...chartsSurfaceProps}>
+                        <ChartsAxesGradients />
+                        {children}
+                      </ChartsSurface>
+                    </AnimationProvider>
+                  </HighlightedProvider>
+                </InteractionProvider>
+              </ZAxisContextProvider>
+            </CartesianProvider>
+          </SeriesProvider>
+        </PluginProvider>
+      </SvgRefProvider>
+    </DrawingAreaProvider>
   );
 });