[charts] Add a PolarProvider to manage polar axes (#14642)

packages/x-charts-pro/src/context/CartesianProviderPro/CartesianProviderPro.tsx

@@ -5,16 +5,14 @@ import {
   useSeries,
   CartesianContext,
   CartesianProviderProps,
-  cartesianProviderUtils,
+  computeAxisValue,
   useXExtremumGetter,
   useYExtremumGetter,
   ZoomAxisFilters,
 } from '@mui/x-charts/internals';
 import { useZoom } from '../ZoomProvider/useZoom';
 import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper';
 
-const { computeValue } = cartesianProviderUtils;
-
 export interface CartesianProviderProProps extends CartesianProviderProps {}
 
 function CartesianProviderPro(props: CartesianProviderProProps) {
@@ -66,7 +64,7 @@ function CartesianProviderPro(props: CartesianProviderProProps) {
 
   const xValues = React.useMemo(
     () =>
-      computeValue({
+      computeAxisValue({
         drawingArea,
         formattedSeries,
         axis: xAxis,
@@ -81,7 +79,7 @@ function CartesianProviderPro(props: CartesianProviderProProps) {
 
   const yValues = React.useMemo(
     () =>
-      computeValue({
+      computeAxisValue({
         drawingArea,
         formattedSeries,
         axis: yAxis,

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

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
+import { computeAxisValue } from '../../internals/computeAxisValue';
 import { useDrawingArea } from '../../hooks/useDrawingArea';
 import { useSeries } from '../../hooks/useSeries';
 import { CartesianContext } from './CartesianContext';
-import { computeValue } from './computeValue';
 import { useXExtremumGetter } from '../PluginProvider/useXExtremumGetter';
 import { useYExtremumGetter } from '../PluginProvider';
 import { CartesianProviderProps } from './Cartesian.types';
@@ -18,7 +18,7 @@ function CartesianProvider(props: CartesianProviderProps) {
 
   const xValues = React.useMemo(
     () =>
-      computeValue({
+      computeAxisValue({
         drawingArea,
         formattedSeries,
         axis: xAxis,
@@ -30,7 +30,7 @@ function CartesianProvider(props: CartesianProviderProps) {
 
   const yValues = React.useMemo(
     () =>
-      computeValue({
+      computeAxisValue({
         drawingArea,
         formattedSeries,
         axis: yAxis,

packages/x-charts/src/context/CartesianProvider/index.ts

@@ -1,12 +1,4 @@
-import { computeValue } from './computeValue';
-
 export * from './CartesianProvider';
 export * from './CartesianContext';
 export * from './useCartesianContext';
 export * from './Cartesian.types';
-
-const cartesianProviderUtils = {
-  computeValue,
-};
-
-export { cartesianProviderUtils };

packages/x-charts/src/context/PluginProvider/Plugin.types.ts

@@ -17,6 +17,8 @@ export type PluginContextState = {
   colorProcessors: ColorProcessorsConfig<ChartSeriesType>;
   xExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
   yExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
+  rotationExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
+  radiusExtremumGetters: ExtremumGettersConfig<ChartSeriesType>;
 };
 
 export type ChartsPlugin<T> = T extends ChartSeriesType
@@ -26,5 +28,7 @@ export type ChartsPlugin<T> = T extends ChartSeriesType
       colorProcessor: ColorProcessor<T>;
       xExtremumGetter?: ExtremumGetter<T>;
       yExtremumGetter?: ExtremumGetter<T>;
+      rotationExtremumGetter?: ExtremumGetter<T>;
+      radiusExtremumGetter?: ExtremumGetter<T>;
     }
   : never;

packages/x-charts/src/context/PluginProvider/PluginContext.ts

@@ -9,6 +9,8 @@ export const PluginContext = React.createContext<Initializable<PluginContextStat
     seriesFormatters: {},
     xExtremumGetters: {},
     yExtremumGetters: {},
+    rotationExtremumGetters: {},
+    radiusExtremumGetters: {},
   },
 });
 

packages/x-charts/src/context/PluginProvider/index.ts

@@ -8,3 +8,5 @@ export * from './useColorProcessor';
 export * from './useSeriesFormatter';
 export * from './useXExtremumGetter';
 export * from './useYExtremumGetter';
+export * from './useRadiusExtremumGetter';
+export * from './useRotationExtremumGetter';

packages/x-charts/src/context/PluginProvider/mergePlugins.ts

@@ -17,6 +17,8 @@ export function mergePlugins(plugins?: ChartsPlugin<ChartSeriesType>[]) {
   const colorProcessors: ColorProcessorsConfig<ChartSeriesType> = {};
   const xExtremumGetters: ExtremumGettersConfig<ChartSeriesType> = {};
   const yExtremumGetters: ExtremumGettersConfig<ChartSeriesType> = {};
+  const rotationExtremumGetters: ExtremumGettersConfig<ChartSeriesType> = {};
+  const radiusExtremumGetters: ExtremumGettersConfig<ChartSeriesType> = {};
 
   for (let i = 0; i < defaultizedPlugins.length; i += 1) {
     const plugin = defaultizedPlugins[i];
@@ -33,12 +35,25 @@ export function mergePlugins(plugins?: ChartsPlugin<ChartSeriesType>[]) {
     if (plugin.yExtremumGetter) {
       yExtremumGetters[seriesType] = plugin.yExtremumGetter as ExtremumGetter<typeof seriesType>;
     }
+
+    if (plugin.rotationExtremumGetter) {
+      rotationExtremumGetters[seriesType] = plugin.rotationExtremumGetter as ExtremumGetter<
+        typeof seriesType
+      >;
+    }
+    if (plugin.radiusExtremumGetter) {
+      radiusExtremumGetters[seriesType] = plugin.radiusExtremumGetter as ExtremumGetter<
+        typeof seriesType
+      >;
+    }
   }
 
   return {
     seriesFormatters,
     colorProcessors,
     xExtremumGetters,
     yExtremumGetters,
+    rotationExtremumGetters,
+    radiusExtremumGetters,
   };
 }

packages/x-charts/src/context/PluginProvider/useRadiusExtremumGetter.ts

@@ -0,0 +1,28 @@
+'use client';
+import * as React from 'react';
+import { ChartSeriesType } from '../../models/seriesType/config';
+import { PluginContext } from './PluginContext';
+import { ExtremumGettersConfig } from './ExtremumGetter.types';
+
+export function useRadiusExtremumGetter<T extends ChartSeriesType>(
+  seriesType: T,
+): ExtremumGettersConfig<T>[T];
+export function useRadiusExtremumGetter(): ExtremumGettersConfig<ChartSeriesType>;
+export function useRadiusExtremumGetter(seriesType?: ChartSeriesType) {
+  const { isInitialized, data } = React.useContext(PluginContext);
+
+  if (!isInitialized) {
+    throw new Error(
+      [
+        'MUI X: Could not find the plugin context.',
+        'It looks like you rendered your component outside of a ChartsContainer parent component.',
+      ].join('\n'),
+    );
+  }
+
+  if (!seriesType) {
+    return data.radiusExtremumGetters;
+  }
+
+  return data.radiusExtremumGetters[seriesType];
+}

packages/x-charts/src/context/PluginProvider/useRotationExtremumGetter.ts

@@ -0,0 +1,28 @@
+'use client';
+import * as React from 'react';
+import { ChartSeriesType } from '../../models/seriesType/config';
+import { PluginContext } from './PluginContext';
+import { ExtremumGettersConfig } from './ExtremumGetter.types';
+
+export function useRotationExtremumGetter<T extends ChartSeriesType>(
+  seriesType: T,
+): ExtremumGettersConfig<T>[T];
+export function useRotationExtremumGetter(): ExtremumGettersConfig<ChartSeriesType>;
+export function useRotationExtremumGetter(seriesType?: ChartSeriesType) {
+  const { isInitialized, data } = React.useContext(PluginContext);
+
+  if (!isInitialized) {
+    throw new Error(
+      [
+        'MUI X: Could not find the plugin context.',
+        'It looks like you rendered your component outside of a ChartsContainer parent component.',
+      ].join('\n'),
+    );
+  }
+
+  if (!seriesType) {
+    return data.rotationExtremumGetters;
+  }
+
+  return data.rotationExtremumGetters[seriesType];
+}

packages/x-charts/src/context/PolarProvider/Polar.types.ts

@@ -0,0 +1,52 @@
+import { DatasetType } from '../../models/seriesType/config';
+import {
+  AxisDefaultized,
+  ScaleName,
+  AxisId,
+  AxisConfig,
+  ChartsRotationAxisProps,
+  ChartsRadiusAxisProps,
+} from '../../models/axis';
+
+export type PolarProviderProps = {
+  /**
+   * The configuration of the rotation-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  rotationAxis: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
+  /**
+   * The configuration of the radial-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  radiusAxis: AxisConfig<'linear', any, ChartsRadiusAxisProps>[];
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset?: DatasetType;
+  children: React.ReactNode;
+};
+
+export type DefaultizedAxisConfig<Axis> = {
+  [axisId: AxisId]: AxisDefaultized<ScaleName, any, Axis>;
+};
+
+export type PolarContextState = {
+  /**
+   * Mapping from rotation-axis key to scaling configuration.
+   */
+  rotationAxis: DefaultizedAxisConfig<ChartsRotationAxisProps>;
+  /**
+   * Mapping from radius-axis key to scaling configuration.
+   */
+  radiusAxis: DefaultizedAxisConfig<ChartsRadiusAxisProps>;
+  /**
+   * The rotation-axes IDs sorted by order they got provided.
+   */
+  rotationAxisIds: AxisId[];
+  /**
+   * The radius-axes IDs sorted by order they got provided.
+   */
+  radiusAxisIds: AxisId[];
+};

packages/x-charts/src/context/PolarProvider/PolarContext.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { Initializable } from '../context.types';
+import { PolarContextState } from './Polar.types';
+
+export const PolarContext = React.createContext<Initializable<PolarContextState>>({
+  isInitialized: false,
+  data: {
+    rotationAxis: {},
+    radiusAxis: {},
+    rotationAxisIds: [],
+    radiusAxisIds: [],
+  },
+});
+
+if (process.env.NODE_ENV !== 'production') {
+  PolarContext.displayName = 'PolarContext';
+}

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

@@ -0,0 +1,59 @@
+'use client';
+import * as React from 'react';
+import { computeAxisValue } from '../../internals/computeAxisValue';
+import { useDrawingArea } from '../../hooks/useDrawingArea';
+import { useSeries } from '../../hooks/useSeries';
+import { PolarContext } from './PolarContext';
+import { useRadiusExtremumGetter } from '../PluginProvider/useRadiusExtremumGetter';
+import { useRotationExtremumGetter } from '../PluginProvider/useRotationExtremumGetter';
+import { PolarProviderProps } from './Polar.types';
+
+function PolarProvider(props: PolarProviderProps) {
+  const { rotationAxis, radiusAxis, children } = props;
+
+  const formattedSeries = useSeries();
+  const drawingArea = useDrawingArea();
+  const rotationExtremumGetters = useRotationExtremumGetter();
+  const radiusExtremumGetters = useRadiusExtremumGetter();
+
+  const rotationValues = React.useMemo(
+    () =>
+      computeAxisValue({
+        drawingArea,
+        formattedSeries,
+        axis: rotationAxis,
+        extremumGetters: rotationExtremumGetters,
+        axisDirection: 'rotation',
+      }),
+    [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters],
+  );
+
+  const radiusValues = React.useMemo(
+    () =>
+      computeAxisValue({
+        drawingArea,
+        formattedSeries,
+        axis: radiusAxis,
+        extremumGetters: radiusExtremumGetters,
+        axisDirection: 'radius',
+      }),
+    [drawingArea, formattedSeries, radiusAxis, radiusExtremumGetters],
+  );
+
+  const value = React.useMemo(
+    () => ({
+      isInitialized: true,
+      data: {
+        rotationAxis: rotationValues.axis,
+        radiusAxis: radiusValues.axis,
+        rotationAxisIds: rotationValues.axisIds,
+        radiusAxisIds: radiusValues.axisIds,
+      },
+    }),
+    [rotationValues, radiusValues],
+  );
+
+  return <PolarContext.Provider value={value}>{children}</PolarContext.Provider>;
+}
+
+export { PolarProvider };

packages/x-charts/src/context/PolarProvider/getAxisExtremum.ts

@@ -0,0 +1,48 @@
+import { AxisConfig } from '../../models';
+import { CartesianChartSeriesType } from '../../models/seriesType/config';
+import { FormattedSeries } from '../SeriesProvider';
+import { ExtremumGettersConfig, ExtremumGetterResult } from '../PluginProvider';
+
+const axisExtremumCallback = <T extends CartesianChartSeriesType>(
+  acc: ExtremumGetterResult,
+  chartType: T,
+  axis: AxisConfig,
+  getters: ExtremumGettersConfig<T>,
+  axisIndex: number,
+  formattedSeries: FormattedSeries,
+): ExtremumGetterResult => {
+  const getter = getters[chartType];
+  const series = formattedSeries[chartType]?.series ?? {};
+
+  const [minChartTypeData, maxChartTypeData] = getter?.({
+    series,
+    axis,
+    axisIndex,
+    isDefaultAxis: axisIndex === 0,
+  }) ?? [Infinity, -Infinity];
+
+  const [minData, maxData] = acc;
+
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
+};
+
+export const getAxisExtremum = (
+  axis: AxisConfig,
+  getters: ExtremumGettersConfig,
+  axisIndex: number,
+  formattedSeries: FormattedSeries,
+) => {
+  const charTypes = Object.keys(getters) as CartesianChartSeriesType[];
+
+  const extremums = charTypes.reduce<ExtremumGetterResult>(
+    (acc, charType) =>
+      axisExtremumCallback(acc, charType, axis, getters, axisIndex, formattedSeries),
+    [Infinity, -Infinity],
+  );
+
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+
+  return extremums;
+};

packages/x-charts/src/context/PolarProvider/usePolarContext.ts

@@ -0,0 +1,9 @@
+'use client';
+import * as React from 'react';
+import { PolarContext } from './PolarContext';
+import { PolarContextState } from './Polar.types';
+
+export const usePolarContext = (): PolarContextState => {
+  const { data } = React.useContext(PolarContext);
+  return data;
+};