[charts] Add a PolarProvider to manage polar axes

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 { useDrawingArea } from '../../hooks/useDrawingArea';
+import { useSeries } from '../../hooks/useSeries';
+import { PolarContext } from './PolarContext';
+import { computeValue } from './computeValue';
+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(
+    () =>
+      computeValue({
+        drawingArea,
+        formattedSeries,
+        axis: rotationAxis,
+        extremumGetters: rotationExtremumGetters,
+        axisDirection: 'rotation',
+      }),
+    [drawingArea, formattedSeries, rotationAxis, rotationExtremumGetters],
+  );
+
+  const radiusValues = React.useMemo(
+    () =>
+      computeValue({
+        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 };