Use new useCartesianContext hook

mui · JCQuintas · Jun 19, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024
commit 765499e6f89ef899be2c4409e2bde1a6f3dd3ab9
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/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) {

diff --git a/packages/x-charts/src/hooks/useAxisEvents.ts b/packages/x-charts/src/hooks/useAxisEvents.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { isBandScale } from '../internals/isBandScale';
 import { AxisDefaultized } from '../models/axis';
-import { getSVGPoint } from '../internals/utils';
+import { getSVGPoint } from '../internals/getSVGPoint';
 import { useSvgRef } from './useSvgRef';
 import { useDrawingArea } from './useDrawingArea';
 
@@ -13,7 +13,7 @@ function getAsANumber(value: number | Date) {
 export const useAxisEvents = (disableAxisListener: boolean) => {
  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 usedXAxis = xAxisIds[0];