[charts] Divide CartesianProvider to use logic in Pro package (mui#…

…13531) Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com> Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
DungTiger · Jul 23, 2024 · ef475af · ef475af
1 parent 0ce3dfe
commit ef475af
Show file tree

Hide file tree

Showing 34 changed files with 442 additions and 418 deletions.
diff --git a/packages/x-charts/src/BarChart/BarPlot.tsx b/packages/x-charts/src/BarChart/BarPlot.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { BarElement, BarElementSlotProps, BarElementSlots } from './BarElement';
 import { AxisDefaultized } from '../models/axis';
 import { FormatterResult } from '../models/seriesType/config';
@@ -89,7 +89,7 @@ const useAggregatedData = (): {
   const seriesData =
     useBarSeries() ??
     ({ series: {}, stackingGroups: [], seriesOrder: [] } as FormatterResult<'bar'>);
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const chartId = useChartId();
 
   const { series, stackingGroups } = seriesData;

diff --git a/packages/x-charts/src/BarChart/checkScaleErrors.ts b/packages/x-charts/src/BarChart/checkScaleErrors.ts
@@ -1,8 +1,8 @@
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-import { AxisDefaultized, isBandScaleConfig, isPointScaleConfig } from '../models/axis';
+import { AxisDefaultized, AxisId, isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { SeriesId } from '../models/seriesType/common';
 
-const getAxisMessage = (axisDirection: 'x' | 'y', axisKey: string) => {
+const getAxisMessage = (axisDirection: 'x' | 'y', axisKey: AxisId) => {
   const axisName = `${axisDirection}-axis`;
   const axisKeyName = `${axisDirection}Axis`;
   const axisDefaultKey = axisDirection === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
@@ -14,10 +14,10 @@ const getAxisMessage = (axisDirection: 'x' | 'y', axisKey: string) => {
 export function checkScaleErrors(
   verticalLayout: boolean,
   seriesId: SeriesId,
-  xAxisKey: string,
-  xAxis: { DEFAULT_X_AXIS_KEY: AxisDefaultized } & { [axisKey: string]: AxisDefaultized },
-  yAxisKey: string,
-  yAxis: { DEFAULT_X_AXIS_KEY: AxisDefaultized } & { [axisKey: string]: AxisDefaultized },
+  xAxisKey: AxisId,
+  xAxis: { [axisKey: AxisId]: AxisDefaultized },
+  yAxisKey: AxisId,
+  yAxis: { [axisKey: AxisId]: AxisDefaultized },
 ): void {
   const xAxisConfig = xAxis[xAxisKey];
   const yAxisConfig = yAxis[yAxisKey];

diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx
@@ -13,7 +13,7 @@ import { ChartsSurface, ChartsSurfaceProps } from '../ChartsSurface';
 import {
   CartesianContextProvider,
   CartesianContextProviderProps,
-} from '../context/CartesianContextProvider';
+} from '../context/CartesianProvider';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import {
   HighlightedProvider,

diff --git a/packages/x-charts/src/ChartContainer/usePluginsMerge.ts b/packages/x-charts/src/ChartContainer/usePluginsMerge.ts
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { ChartsPluginType, ColorProcessorsConfig } from '../models';
+import { ChartsPluginType, ColorProcessorsConfig, ExtremumGettersConfig } from '../models';
 import { ChartSeriesType } from '../models/seriesType/config';
-import { ExtremumGettersConfig } from '../context/CartesianContextProvider';
 import { SeriesFormatterConfig } from '../context/SeriesContextProvider';
 import { defaultPlugins } from './defaultPlugins';
 

diff --git a/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx b/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { ChartsXAxis } from '../ChartsXAxis';
 import { ChartsYAxis } from '../ChartsYAxis';
 import {
@@ -49,8 +49,8 @@ export interface ChartsAxisProps {
 }
 
 const getAxisId = (
-  propsValue: undefined | null | string | ChartsXAxisProps | ChartsYAxisProps,
-  defaultAxisId?: string,
+  propsValue: undefined | null | AxisId | ChartsXAxisProps | ChartsYAxisProps,
+  defaultAxisId?: AxisId,
 ): AxisId | null => {
   if (propsValue == null) {
     return null;
@@ -62,7 +62,7 @@ const getAxisId = (
 };
 
 const mergeProps = (
-  axisConfig: undefined | null | string | ChartsXAxisProps | ChartsYAxisProps,
+  axisConfig: undefined | null | AxisId | ChartsXAxisProps | ChartsYAxisProps,
   slots?: Partial<ChartsAxisSlots>,
   slotProps?: Partial<ChartsAxisSlotProps>,
 ) => {
@@ -86,7 +86,7 @@ const mergeProps = (
  */
 function ChartsAxis(props: ChartsAxisProps) {
   const { topAxis, leftAxis, rightAxis, bottomAxis, slots, slotProps } = props;
-  const { xAxis, xAxisIds, yAxis, yAxisIds } = React.useContext(CartesianContext);
+  const { xAxis, xAxisIds, yAxis, yAxisIds } = useCartesianContext();
 
   // TODO: use for plotting line without ticks or any thing
   // const drawingArea = React.useContext(DrawingContext);

diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
@@ -5,7 +5,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { styled } from '@mui/material/styles';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { isBandScale } from '../internals/isBandScale';
 
@@ -67,7 +67,7 @@ export type ChartsAxisHighlightProps = {
  */
 function ChartsAxisHighlight(props: ChartsAxisHighlightProps) {
   const { x: xAxisHighlight, y: yAxisHighlight } = props;
-  const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext);
+  const { xAxisIds, xAxis, yAxisIds, yAxis } = useCartesianContext();
   const classes = useUtilityClasses();
 
   const USED_X_AXIS_ID = xAxisIds[0];

diff --git a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, useThemeProps } from '@mui/material/styles';
 
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import {
   ChartsGridClasses,
@@ -69,7 +69,7 @@ function ChartsGrid(props: ChartsGridProps) {
   const themeProps = useThemeProps({ props, name: 'MuiChartsGrid' });
 
   const { vertical, horizontal, ...other } = themeProps;
-  const { xAxis, xAxisIds, yAxis, yAxisIds } = React.useContext(CartesianContext);
+  const { xAxis, xAxisIds, yAxis, yAxisIds } = useCartesianContext();
 
   const classes = useUtilityClasses(themeProps);
 

diff --git a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
 import { useSeries } from '../hooks/useSeries';
 import { useSvgRef } from '../hooks';
+import { useCartesianContext } from '../context/CartesianProvider';
 
 type AxisData = {
   dataIndex: number;
@@ -27,7 +27,7 @@ function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) {
   const svgRef = useSvgRef();
   const series = useSeries();
   const { axis } = React.useContext(InteractionContext);
-  const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext);
+  const { xAxisIds, xAxis, yAxisIds, yAxis } = useCartesianContext();
 
   React.useEffect(() => {
     const element = svgRef.current;

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { SxProps, Theme } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { AxisInteractionData } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 import { AxisDefaultized } from '../models/axis';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
@@ -59,7 +59,7 @@ function ChartsAxisTooltipContent(props: {
   const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index;
   const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value;
 
-  const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext);
+  const { xAxisIds, xAxis, yAxisIds, yAxis } = useCartesianContext();
   const { zAxisIds, zAxis } = React.useContext(ZAxisContext);
   const series = useSeries();
 

diff --git a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx
@@ -6,7 +6,7 @@ import { ItemInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
 import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
 import { useColorProcessor } from '../hooks/useColor';
 import { useSeries } from '../hooks/useSeries';
@@ -44,7 +44,7 @@ function ChartsItemTooltipContent<T extends ChartSeriesType>(props: {
 
   const series = useSeries()[itemData.type]!.series[itemData.seriesId] as ChartSeriesDefaultized<T>;
 
-  const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext);
+  const { xAxis, yAxis, xAxisIds, yAxisIds } = useCartesianContext();
   const { zAxis, zAxisIds } = React.useContext(ZAxisContext);
   const colorProcessors = useColorProcessor();
 

diff --git a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Delaunay } from 'd3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
 import { ScatterItemIdentifier } from '../models';
@@ -32,7 +32,7 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
   const { voronoiMaxRadius, onItemClick } = props;
   const svgRef = useSvgRef();
   const { left, top, width, height } = useDrawingArea();
-  const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext);
+  const { xAxis, yAxis, xAxisIds, yAxisIds } = useCartesianContext();
   const { dispatch } = React.useContext(InteractionContext);
 
   const { series, seriesOrder } = useScatterSeries() ?? {};

diff --git a/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx b/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx
@@ -3,7 +3,7 @@ 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 { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks, TickItemType } from '../hooks/useTicks';
 import { AxisDefaultized, ChartsXAxisProps } from '../models/axis';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
@@ -98,7 +98,7 @@ const defaultProps = {
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
  */
 function ChartsXAxis(inProps: ChartsXAxisProps) {
-  const { xAxisIds, xAxis } = React.useContext(CartesianContext);
+  const { xAxisIds, xAxis } = useCartesianContext();
   const { scale: xScale, tickNumber, reverse, ...settings } = xAxis[inProps.axisId ?? xAxisIds[0]];
 
   const isMounted = useMounted();

diff --git a/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx b/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx
@@ -3,7 +3,7 @@ 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 { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { ChartsYAxisProps } from '../models/axis';
@@ -44,7 +44,7 @@ const defaultProps = {
  * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
  */
 function ChartsYAxis(inProps: ChartsYAxisProps) {
-  const { yAxisIds, yAxis } = React.useContext(CartesianContext);
+  const { yAxisIds, yAxis } = useCartesianContext();
   const { scale: yScale, tickNumber, ...settings } = yAxis[inProps.axisId ?? yAxisIds[0]];
 
   const themedProps = useThemeProps({ props: { ...settings, ...inProps }, name: 'MuiChartsYAxis' });

diff --git a/packages/x-charts/src/LineChart/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { area as d3Area } from 'd3-shape';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import {
   AreaElement,
   AreaElementProps,
@@ -14,6 +14,7 @@ import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { LineItemIdentifier } from '../models/seriesType/line';
 import { useChartGradient } from '../internals/components/ChartsAxesGradients';
 import { useLineSeries } from '../hooks/useSeries';
+import { AxisId } from '../models/axis';
 
 export interface AreaPlotSlots extends AreaElementSlots {}
 
@@ -35,7 +36,7 @@ export interface AreaPlotProps
 
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
 
   if (seriesData === undefined) {
     return [];
@@ -62,7 +63,7 @@ const useAggregatedData = () => {
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
 
-        const gradientUsed: [string, 'x' | 'y'] | undefined =
+        const gradientUsed: [AxisId, 'x' | 'y'] | undefined =
           (yAxis[yAxisKey].colorScale && [yAxisKey, 'y']) ||
           (xAxis[xAxisKey].colorScale && [xAxisKey, 'x']) ||
           undefined;

diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { LineHighlightElement, LineHighlightElementProps } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { InteractionContext } from '../context/InteractionProvider';
@@ -43,7 +43,7 @@ function LineHighlightPlot(props: LineHighlightPlotProps) {
   const { slots, slotProps, ...other } = props;
 
   const seriesData = useLineSeries();
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const { axis } = React.useContext(InteractionContext);
 
   const highlightedIndex = axis.x?.index;

diff --git a/packages/x-charts/src/LineChart/LinePlot.tsx b/packages/x-charts/src/LineChart/LinePlot.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from 'd3-shape';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import {
   LineElement,
   LineElementProps,
@@ -14,6 +14,7 @@ import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { LineItemIdentifier } from '../models/seriesType/line';
 import { useChartGradient } from '../internals/components/ChartsAxesGradients';
 import { useLineSeries } from '../hooks/useSeries';
+import { AxisId } from '../models/axis';
 
 export interface LinePlotSlots extends LineElementSlots {}
 
@@ -35,7 +36,7 @@ export interface LinePlotProps
 
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
 
   if (seriesData === undefined) {
     return [];
@@ -60,7 +61,7 @@ const useAggregatedData = () => {
       const yScale = yAxis[yAxisKey].scale;
       const xData = xAxis[xAxisKey].data;
 
-      const gradientUsed: [string, 'x' | 'y'] | undefined =
+      const gradientUsed: [AxisId, 'x' | 'y'] | undefined =
         (yAxis[yAxisKey].colorScale && [yAxisKey, 'y']) ||
         (xAxis[xAxisKey].colorScale && [xAxisKey, 'x']) ||
         undefined;

diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { MarkElement, MarkElementProps } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { useChartId } from '../hooks/useChartId';
@@ -56,7 +56,7 @@ function MarkPlot(props: MarkPlotProps) {
   const { slots, slotProps, skipAnimation, onItemClick, ...other } = props;
 
   const seriesData = useLineSeries();
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const chartId = useChartId();
 
   const Mark = slots?.mark ?? MarkElement;

diff --git a/packages/x-charts/src/ScatterChart/ScatterPlot.tsx b/packages/x-charts/src/ScatterChart/ScatterPlot.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Scatter, ScatterProps } from './Scatter';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import getColor from './getColor';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
 import { useScatterSeries } from '../hooks/useSeries';
@@ -40,7 +40,7 @@ export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
 function ScatterPlot(props: ScatterPlotProps) {
   const { slots, slotProps, onItemClick } = props;
   const seriesData = useScatterSeries();
-  const axisData = React.useContext(CartesianContext);
+  const axisData = useCartesianContext();
   const { zAxis, zAxisIds } = React.useContext(ZAxisContext);
 
   if (seriesData === undefined) {