[charts] Export more utils (#12744)

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingContext } from '../context/DrawingProvider';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 
 export type ChartsClipPathProps = {
   id: string;
@@ -14,7 +14,7 @@ export type ChartsClipPathProps = {
  */
 function ChartsClipPath(props: ChartsClipPathProps) {
   const { id, offset: offsetProps } = props;
-  const { left, top, width, height } = React.useContext(DrawingContext);
+  const { left, top, width, height } = useDrawingArea();
 
   const offset = { top: 0, right: 0, bottom: 0, left: 0, ...offsetProps };
   return (

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

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
-import { DrawingContext } from '../context/DrawingProvider';
 import { AnchorPosition, Direction, getSeriesToDisplay } from './utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { ChartsLegendClasses, getLegendUtilityClass } from './chartsLegendClasses';
 import { DefaultizedProps } from '../models/helpers';
 import { DefaultChartsLegend, LegendRendererProps } from './DefaultChartsLegend';
+import { useDrawingArea } from '../hooks';
 
 export interface ChartsLegendSlots {
   /**
@@ -82,7 +82,7 @@ function ChartsLegend(inProps: ChartsLegendProps) {
   const theme = useTheme();
   const classes = useUtilityClasses({ ...props, theme });
 
-  const drawingArea = React.useContext(DrawingContext);
+  const drawingArea = useDrawingArea();
   const series = React.useContext(SeriesContext);
 
   const seriesToDisplay = getSeriesToDisplay(series);

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

@@ -4,12 +4,12 @@ import { Delaunay } from 'd3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { SvgContext, DrawingContext } from '../context/DrawingProvider';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
 import { ScatterItemIdentifier } from '../models';
 import { SeriesId } from '../models/seriesType/common';
+import { useDrawingArea, useSvgRef } from '../hooks';
 
 export type ChartsVoronoiHandlerProps = {
   /**
@@ -29,8 +29,8 @@ type VoronoiSeries = { seriesId: SeriesId; startIndex: number; endIndex: number
 
 function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
   const { voronoiMaxRadius, onItemClick } = props;
-  const svgRef = React.useContext(SvgContext);
-  const { width, height, top, left } = React.useContext(DrawingContext);
+  const svgRef = useSvgRef();
+  const { left, top, width, height } = useDrawingArea();
   const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext);
   const { dispatch } = React.useContext(InteractionContext);
 

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

@@ -4,14 +4,14 @@ import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { DrawingContext } from '../context/DrawingProvider';
 import { useTicks, TickItemType } from '../hooks/useTicks';
 import { AxisDefaultized, ChartsXAxisProps } from '../models/axis';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText, ChartsTextProps } from '../ChartsText';
 import { getMinXTranslation } from '../internals/geometry';
 import { useMounted } from '../hooks/useMounted';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { getWordsByLines } from '../internals/getWordsByLines';
 
 const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => {
@@ -130,8 +130,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
 
   const theme = useTheme();
   const classes = useUtilityClasses({ ...defaultizedProps, theme });
-
-  const { left, top, width, height } = React.useContext(DrawingContext);
+  const { left, top, width, height } = useDrawingArea();
 
   const tickSize = disableTicks ? 4 : tickSizeProp;
 

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

@@ -4,8 +4,8 @@ import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { DrawingContext } from '../context/DrawingProvider';
 import { useTicks } from '../hooks/useTicks';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { ChartsYAxisProps } from '../models/axis';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText, ChartsTextProps } from '../ChartsText';
@@ -75,7 +75,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   const theme = useTheme();
   const classes = useUtilityClasses({ ...defaultizedProps, theme });
 
-  const { left, top, width, height } = React.useContext(DrawingContext);
+  const { left, top, width, height } = useDrawingArea();
 
   const tickSize = disableTicks ? 4 : tickSizeProp;
 

packages/x-charts/src/Gauge/GaugeProvider.tsx

@@ -1,8 +1,8 @@
 // @ignore - do not document.
 import * as React from 'react';
-import { DrawingContext } from '../context/DrawingProvider';
 import { getPercentageValue } from '../internals/utils';
 import { getArcRatios, getAvailableRadius } from './utils';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 
 interface CircularConfig {
   /**
@@ -148,7 +148,7 @@ export function GaugeProvider(props: GaugeProviderProps) {
     children,
   } = props;
 
-  const { width, height, top, left } = React.useContext(DrawingContext);
+  const { left, top, width, height } = useDrawingArea();
 
   const ratios = getArcRatios(startAngle, endAngle);
 

packages/x-charts/src/LineChart/AnimatedArea.tsx

@@ -4,9 +4,9 @@ import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import { animated, useSpring } from '@react-spring/web';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { DrawingContext } from '../context/DrawingProvider';
 import { cleanId } from '../internals/utils';
 import type { AreaElementOwnerState } from './AreaElement';
+import { useChartId, useDrawingArea } from '../hooks';
 
 export const AreaElementPath = styled(animated.path, {
   name: 'MuiAreaElement',
@@ -43,7 +43,8 @@ export interface AnimatedAreaProps extends React.ComponentPropsWithoutRef<'path'
  */
 function AnimatedArea(props: AnimatedAreaProps) {
   const { d, skipAnimation, ownerState, ...other } = props;
-  const { left, top, right, bottom, width, height, chartId } = React.useContext(DrawingContext);
+  const { left, top, right, bottom, width, height } = useDrawingArea();
+  const chartId = useChartId();
 
   const path = useAnimatedPath(d!, skipAnimation);
 

packages/x-charts/src/LineChart/AnimatedLine.tsx

@@ -4,9 +4,10 @@ import { animated, useSpring } from '@react-spring/web';
 import { color as d3Color } from 'd3-color';
 import { styled } from '@mui/material/styles';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { DrawingContext } from '../context/DrawingProvider';
 import { cleanId } from '../internals/utils';
 import type { LineElementOwnerState } from './LineElement';
+import { useChartId } from '../hooks/useChartId';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 
 export const LineElementPath = styled(animated.path, {
   name: 'MuiLineElement',
@@ -45,7 +46,8 @@ export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path'
  */
 function AnimatedLine(props: AnimatedLineProps) {
   const { d, skipAnimation, ownerState, ...other } = props;
-  const { left, top, bottom, width, height, right, chartId } = React.useContext(DrawingContext);
+  const { left, top, bottom, width, height, right } = useDrawingArea();
+  const chartId = useChartId();
 
   const path = useAnimatedPath(d, skipAnimation);
 

packages/x-charts/src/LineChart/MarkPlot.tsx

@@ -4,9 +4,9 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement, MarkElementProps } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
+import { useChartId } from '../hooks/useChartId';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { LineItemIdentifier } from '../models/seriesType/line';
-import { DrawingContext } from '../context/DrawingProvider';
 import { cleanId } from '../internals/utils';
 
 export interface MarkPlotSlots {
@@ -56,7 +56,7 @@ function MarkPlot(props: MarkPlotProps) {
 
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
-  const { chartId } = React.useContext(DrawingContext);
+  const chartId = useChartId();
 
   const Mark = slots?.mark ?? MarkElement;
 

packages/x-charts/src/PieChart/PiePlot.tsx

@@ -5,6 +5,7 @@ import { DrawingContext } from '../context/DrawingProvider';
 import { PieArcPlot, PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } from './PieArcPlot';
 import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps, PieArcLabelPlot } from './PieArcLabelPlot';
 import { getPercentageValue } from '../internals/utils';
+import { getPieCoordinates } from './getPieCoordinates';
 
 export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
 
@@ -41,7 +42,6 @@ function PiePlot(props: PiePlotProps) {
   if (seriesData === undefined) {
     return null;
   }
-  const availableRadius = Math.min(width, height) / 2;
 
   const { series, seriesOrder } = seriesData;
 
@@ -61,13 +61,16 @@ function PiePlot(props: PiePlotProps) {
           highlightScope,
         } = series[seriesId];
 
+        const { cx, cy, availableRadius } = getPieCoordinates(
+          { cx: cxParam, cy: cyParam },
+          { width, height },
+        );
+
         const outerRadius = getPercentageValue(
           outerRadiusParam ?? availableRadius,
           availableRadius,
         );
         const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
-        const cx = getPercentageValue(cxParam ?? '50%', width);
-        const cy = getPercentageValue(cyParam ?? '50%', height);
         return (
           <g key={seriesId} transform={`translate(${left + cx}, ${top + cy})`}>
             <PieArcPlot
@@ -102,6 +105,12 @@ function PiePlot(props: PiePlotProps) {
           cy: cyParam,
           highlightScope,
         } = series[seriesId];
+
+        const { cx, cy, availableRadius } = getPieCoordinates(
+          { cx: cxParam, cy: cyParam },
+          { width, height },
+        );
+
         const outerRadius = getPercentageValue(
           outerRadiusParam ?? availableRadius,
           availableRadius,
@@ -113,8 +122,6 @@ function PiePlot(props: PiePlotProps) {
             ? (outerRadius + innerRadius) / 2
             : getPercentageValue(arcLabelRadiusParam, availableRadius);
 
-        const cx = getPercentageValue(cxParam ?? '50%', width);
-        const cy = getPercentageValue(cyParam ?? '50%', height);
         return (
           <g key={seriesId} transform={`translate(${left + cx}, ${top + cy})`}>
             <PieArcLabelPlot

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

@@ -0,0 +1,17 @@
+import { DrawingArea } from '../context/DrawingProvider';
+import { getPercentageValue } from '../internals/utils';
+import { DefaultizedPieSeriesType } from '../models/seriesType/pie';
+
+export function getPieCoordinates(
+  series: Pick<DefaultizedPieSeriesType, 'cx' | 'cy'>,
+  drawing: Pick<DrawingArea, 'width' | 'height'>,
+): { cx: number; cy: number; availableRadius: number } {
+  const { height, width } = drawing;
+  const { cx: cxParam, cy: cyParam } = series;
+
+  const availableRadius = Math.min(width, height) / 2;
+  const cx = getPercentageValue(cxParam ?? '50%', width);
+  const cy = getPercentageValue(cyParam ?? '50%', height);
+
+  return { cx, cy, availableRadius };
+}

packages/x-charts/src/PieChart/index.tsx

@@ -6,3 +6,5 @@ export * from './PieArcLabelPlot';
 
 export * from './PieArc';
 export * from './PieArcLabel';
+
+export * from './getPieCoordinates';

packages/x-charts/src/context/CartesianContextProvider.tsx

@@ -14,7 +14,6 @@ import {
 } from '../LineChart/extremums';
 import { AxisConfig, AxisDefaultized, isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { getScale } from '../internals/getScale';
-import { DrawingContext } from './DrawingProvider';
 import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import {
@@ -26,6 +25,7 @@ import {
 } from '../models/seriesType/config';
 import { MakeOptional } from '../models/helpers';
 import { getTickNumber } from '../hooks/useTicks';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { SeriesId } from '../models/seriesType/common';
 
 export type CartesianContextProviderProps = {
@@ -97,7 +97,7 @@ if (process.env.NODE_ENV !== 'production') {
 function CartesianContextProvider(props: CartesianContextProviderProps) {
   const { xAxis: inXAxis, yAxis: inYAxis, dataset, children } = props;
   const formattedSeries = React.useContext(SeriesContext);
-  const drawingArea = React.useContext(DrawingContext);
+  const drawingArea = useDrawingArea();
 
   const xAxis = React.useMemo(
     () =>

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

@@ -1,2 +1,11 @@
 export * from './useDrawingArea';
+export * from './useChartId';
 export * from './useScale';
+export * from './useSvgRef';
+export {
+  useSeries as unstable_useSeries,
+  usePieSeries as unstable_usePieSeries,
+  useLineSeries as unstable_useLineSeries,
+  useBarSeries as unstable_useBarSeries,
+  useScatterSeries as unstable_useScatterSeries,
+} from './useSeries';

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

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { SvgContext, DrawingContext } from '../context/DrawingProvider';
 import { isBandScale } from '../internals/isBandScale';
 import { AxisDefaultized } from '../models/axis';
 import { getSVGPoint } from '../internals/utils';
+import { useSvgRef } from './useSvgRef';
+import { useDrawingArea } from './useDrawingArea';
 
 function getAsANumber(value: number | Date) {
   return value instanceof Date ? value.getTime() : value;
 }
 export const useAxisEvents = (disableAxisListener: boolean) => {
-  const svgRef = React.useContext(SvgContext);
-  const { width, height, top, left } = React.useContext(DrawingContext);
+  const svgRef = useSvgRef();
+  const { left, top, width, height } = useDrawingArea();
   const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext);
   const { dispatch } = React.useContext(InteractionContext);
 

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { DrawingContext } from '../context/DrawingProvider';
+
+export function useChartId() {
+  const { chartId } = React.useContext(DrawingContext);
+
+  return React.useMemo(() => chartId, [chartId]);
+}