@mui/x-charts 9.0.0-alpha.0 → 9.0.0-alpha.2

package/internals/plugins/featurePlugins/useChartPolarAxis/defaultizeAxis.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultizeAxis = defaultizeAxis;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _constants = require("../../../../constants");
 function defaultizeAxis(inAxis, dataset, axisName) {
@@ -21,7 +22,7 @@ function defaultizeAxis(inAxis, dataset, axisName) {
       }, axisConfig);
     }
     if (dataset === undefined) {
-      throw new Error(`MUI X Charts: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: The ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided. ` + 'When using dataKey, a dataset must be provided to retrieve the axis data. ' + `Either provide a dataset prop or use the data property directly on the ${axisName}-axis.` : (0, _formatErrorMessage2.default)(39, axisName, axisName));
     }
     return (0, _extends2.default)({
       id,

package/internals/plugins/featurePlugins/useChartPolarAxis/defaultizeAxis.mjs

@@ -0,0 +1,25 @@
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_RADIUS_AXIS_KEY, DEFAULT_ROTATION_AXIS_KEY } from "../../../../constants/index.mjs";
+export function defaultizeAxis(inAxis, dataset, axisName) {
+  const DEFAULT_AXIS_KEY = axisName === 'rotation' ? DEFAULT_ROTATION_AXIS_KEY : DEFAULT_RADIUS_AXIS_KEY;
+  const inputAxes = inAxis && inAxis.length > 0 ? inAxis : [{
+    id: DEFAULT_AXIS_KEY
+  }];
+  return inputAxes.map((axisConfig, index) => {
+    const id = `defaultized-${axisName}-axis-${index}`;
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return _extends({
+        id
+      }, axisConfig);
+    }
+    if (dataset === undefined) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: The ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided. ` + 'When using dataKey, a dataset must be provided to retrieve the axis data. ' + `Either provide a dataset prop or use the data property directly on the ${axisName}-axis.` : _formatErrorMessage(39, axisName, axisName));
+    }
+    return _extends({
+      id,
+      data: dataset.map(d => d[dataKey])
+    }, axisConfig);
+  });
+}

package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisExtremum.d.mts

@@ -0,0 +1,5 @@
+import { type AxisConfig } from "../../../../models/axis.mjs";
+import { type PolarChartSeriesType } from "../../../../models/seriesType/config.mjs";
+import { type ChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
+import { type ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.mjs";
+export declare const getAxisExtremum: <TSeriesType extends PolarChartSeriesType>(axis: AxisConfig, axisDirection: "rotation" | "radius", seriesConfig: ChartSeriesConfig<TSeriesType>, axisIndex: number, formattedSeries: ProcessedSeries<TSeriesType>) => number[];

package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisExtremum.mjs

@@ -0,0 +1,21 @@
+import { isPolarSeriesType } from "../../../isPolar.mjs";
+const axisExtremumCallback = (acc, chartType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries) => {
+  const getter = axisDirection === 'rotation' ? seriesConfig[chartType].rotationExtremumGetter : seriesConfig[chartType].radiusExtremumGetter;
+  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, axisDirection, seriesConfig, axisIndex, formattedSeries) => {
+  const polarSeriesTypes = Object.keys(seriesConfig).filter(isPolarSeriesType);
+  const extremums = polarSeriesTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, axisDirection, seriesConfig, axisIndex, formattedSeries), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
+};

package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.d.mts

@@ -0,0 +1,6 @@
+import { type PolarAxisDefaultized } from "../../../../models/axis.mjs";
+/**
+ * For a pointer coordinate, this function returns the value and dataIndex associated.
+ * Returns `-1` if the coordinate does not match a value.
+ */
+export declare function getAxisIndex(axisConfig: PolarAxisDefaultized, pointerValue: number): number;

package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getAxisIndex = getAxisIndex;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _scaleGuards = require("../../../scaleGuards");
 var _clampAngle = require("../../../clampAngle");
 /**
@@ -17,7 +19,7 @@ function getAxisIndex(axisConfig, pointerValue) {
     reverse
   } = axisConfig;
   if (!(0, _scaleGuards.isOrdinalScale)(scale)) {
-    throw new Error('MUI X Charts: getAxisValue is not implemented for polare continuous axes.');
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: getAxisValue is not implemented for polar continuous axes. ' + 'This function only supports ordinal (band/point) scales.' : (0, _formatErrorMessage2.default)(40));
   }
   if (!axisData) {
     return -1;

package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.mjs

@@ -0,0 +1,27 @@
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+import { isOrdinalScale } from "../../../scaleGuards.mjs";
+import { clampAngleRad } from "../../../clampAngle.mjs";
+
+/**
+ * For a pointer coordinate, this function returns the value and dataIndex associated.
+ * Returns `-1` if the coordinate does not match a value.
+ */
+export function getAxisIndex(axisConfig, pointerValue) {
+  const {
+    scale,
+    data: axisData,
+    reverse
+  } = axisConfig;
+  if (!isOrdinalScale(scale)) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: getAxisValue is not implemented for polar continuous axes. ' + 'This function only supports ordinal (band/point) scales.' : _formatErrorMessage(40));
+  }
+  if (!axisData) {
+    return -1;
+  }
+  const angleGap = clampAngleRad(pointerValue - Math.min(...scale.range()));
+  const dataIndex = scale.bandwidth() === 0 ? Math.floor((angleGap + scale.step() / 2) / scale.step()) % axisData.length : Math.floor(angleGap / scale.step());
+  if (dataIndex < 0 || dataIndex >= axisData.length) {
+    return -1;
+  }
+  return reverse ? axisData.length - 1 - dataIndex : dataIndex;
+}

package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisTriggerTooltip.d.mts

@@ -0,0 +1,5 @@
+import { type PolarChartSeriesType } from "../../../../models/seriesType/config.mjs";
+import { type ChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
+import { type ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries.types.mjs";
+import { type AxisId } from "../../../../models/axis.mjs";
+export declare const getAxisTriggerTooltip: <TSeriesType extends PolarChartSeriesType>(axisDirection: "radius" | "rotation", seriesConfig: ChartSeriesConfig<TSeriesType>, formattedSeries: ProcessedSeries<TSeriesType>, defaultAxisId: AxisId) => Set<AxisId>;

package/internals/plugins/featurePlugins/useChartPolarAxis/getAxisTriggerTooltip.mjs

@@ -0,0 +1,21 @@
+import { isPolarSeriesType } from "../../../isPolar.mjs";
+export const getAxisTriggerTooltip = (axisDirection, seriesConfig, formattedSeries, defaultAxisId) => {
+  const tooltipAxesIds = new Set();
+  const chartTypes = Object.keys(seriesConfig).filter(isPolarSeriesType);
+  chartTypes.forEach(chartType => {
+    const series = formattedSeries[chartType]?.series ?? {};
+    const tooltipAxes = seriesConfig[chartType].axisTooltipGetter?.(series);
+    if (tooltipAxes === undefined) {
+      return;
+    }
+    tooltipAxes.forEach(({
+      axisId,
+      direction
+    }) => {
+      if (direction === axisDirection) {
+        tooltipAxesIds.add(axisId ?? defaultAxisId);
+      }
+    });
+  });
+  return tooltipAxesIds;
+};

package/internals/plugins/featurePlugins/useChartPolarAxis/index.d.mts

@@ -0,0 +1,3 @@
+export { useChartPolarAxis } from "./useChartPolarAxis.mjs";
+export type * from "./useChartPolarAxis.types.mjs";
+export * from "./useChartPolarAxis.selectors.mjs";

package/internals/plugins/featurePlugins/useChartPolarAxis/index.mjs

@@ -0,0 +1,2 @@
+export { useChartPolarAxis } from "./useChartPolarAxis.mjs";
+export * from "./useChartPolarAxis.selectors.mjs";

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.d.mts

@@ -0,0 +1,3 @@
+import { type ChartPlugin } from "../../models/index.mjs";
+import { type UseChartPolarAxisSignature } from "./useChartPolarAxis.types.mjs";
+export declare const useChartPolarAxis: ChartPlugin<UseChartPolarAxisSignature<any>>;

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -25,7 +25,7 @@ const useChartPolarAxis = ({
   instance
 }) => {
   const {
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const {
     rotationAxis,
@@ -86,7 +86,7 @@ const useChartPolarAxis = ({
   });
   const hasInteractionPlugin = (0, _checkHasInteractionPlugin.checkHasInteractionPlugin)(instance);
   React.useEffect(() => {
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     if (!isInteractionEnabled || !hasInteractionPlugin || element === null || params.disableAxisListener) {
       return () => {};
     }
@@ -165,9 +165,9 @@ const useChartPolarAxis = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [svgRef, store, center, radiusAxisWithScale, usedRadiusAxisId, rotationAxisWithScale, usedRotationAxisId, instance, params.disableAxisListener, isInteractionEnabled, svg2rotation, hasInteractionPlugin]);
+  }, [chartsLayerContainerRef, store, center, radiusAxisWithScale, usedRadiusAxisId, rotationAxisWithScale, usedRotationAxisId, instance, params.disableAxisListener, isInteractionEnabled, svg2rotation, hasInteractionPlugin]);
   React.useEffect(() => {
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     const onAxisClick = params.onAxisClick;
     if (element === null || !onAxisClick) {
       return () => {};
@@ -204,7 +204,7 @@ const useChartPolarAxis = ({
     return () => {
       axisClickHandler.cleanup();
     };
-  }, [center, instance, params.onAxisClick, processedSeries, radiusAxisWithScale, rotationAxisWithScale, svgRef, usedRadiusAxisId, usedRotationAxisId]);
+  }, [center, instance, params.onAxisClick, processedSeries, radiusAxisWithScale, rotationAxisWithScale, chartsLayerContainerRef, usedRadiusAxisId, usedRotationAxisId]);
   return {
     instance: {
       svg2polar,

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.mjs

@@ -0,0 +1,221 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
+import { defaultizeAxis } from "./defaultizeAxis.mjs";
+import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.mjs";
+import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.mjs";
+import { getChartPoint } from "../../../getChartPoint.mjs";
+import { generatePolar2svg, generateSvg2polar, generateSvg2rotation } from "./coordinateTransformation.mjs";
+import { getAxisIndex } from "./getAxisIndex.mjs";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
+import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.mjs";
+export const useChartPolarAxis = ({
+  params,
+  store,
+  instance
+}) => {
+  const {
+    chartsLayerContainerRef
+  } = instance;
+  const {
+    rotationAxis,
+    radiusAxis,
+    dataset
+  } = params;
+  if (process.env.NODE_ENV !== 'production') {
+    const ids = [...(rotationAxis ?? []), ...(radiusAxis ?? [])].filter(axis => axis.id).map(axis => axis.id);
+    const duplicates = new Set(ids.filter((id, index) => ids.indexOf(id) !== index));
+    if (duplicates.size > 0) {
+      warnOnce([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
+    }
+  }
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const processedSeries = store.use(selectorChartSeriesProcessed);
+  const center = store.use(selectorChartPolarCenter);
+  const isInteractionEnabled = store.use(selectorChartsInteractionIsInitialized);
+  const {
+    axis: rotationAxisWithScale,
+    axisIds: rotationAxisIds
+  } = store.use(selectorChartRotationAxis);
+  const {
+    axis: radiusAxisWithScale,
+    axisIds: radiusAxisIds
+  } = store.use(selectorChartRadiusAxis);
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartPolarAxis`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    store.set('polarAxis', _extends({}, store.state.polarAxis, {
+      rotation: defaultizeAxis(rotationAxis, dataset, 'rotation'),
+      radius: defaultizeAxis(radiusAxis, dataset, 'radius')
+    }));
+  }, [drawingArea, rotationAxis, radiusAxis, dataset, store]);
+  const svg2rotation = React.useMemo(() => generateSvg2rotation({
+    cx: center.cx,
+    cy: center.cy
+  }), [center.cx, center.cy]);
+  const svg2polar = React.useMemo(() => generateSvg2polar({
+    cx: center.cx,
+    cy: center.cy
+  }), [center.cx, center.cy]);
+  const polar2svg = React.useMemo(() => generatePolar2svg({
+    cx: center.cx,
+    cy: center.cy
+  }), [center.cx, center.cy]);
+  const usedRotationAxisId = rotationAxisIds[0];
+  const usedRadiusAxisId = radiusAxisIds[0];
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const mousePosition = React.useRef({
+    isInChart: false
+  });
+  const hasInteractionPlugin = checkHasInteractionPlugin(instance);
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (!isInteractionEnabled || !hasInteractionPlugin || element === null || params.disableAxisListener) {
+      return () => {};
+    }
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
+        mousePosition.current.isInChart = false;
+        instance.cleanInteraction();
+      }
+    });
+    const panEndHandler = instance.addInteractionListener('panEnd', event => {
+      if (!event.detail.activeGestures.move) {
+        mousePosition.current.isInChart = false;
+        instance.cleanInteraction?.();
+      }
+    });
+    const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
+      if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
+        mousePosition.current.isInChart = false;
+        instance.cleanInteraction?.();
+      }
+    });
+    const gestureHandler = event => {
+      const srcEvent = event.detail.srcEvent;
+
+      // On touch, we want to allow user to interact with the entire svg area in
+      // order to better display the tooltip.
+      if (event.detail.srcEvent.pointerType === 'touch') {
+        const svgRect = element.getBoundingClientRect();
+        if (srcEvent.clientX < svgRect.left || srcEvent.clientX > svgRect.right || srcEvent.clientY < svgRect.top || srcEvent.clientY > svgRect.bottom) {
+          mousePosition.current.isInChart = false;
+          instance.cleanInteraction?.();
+          return;
+        }
+        const svgPoint = getChartPoint(element, srcEvent);
+        mousePosition.current.isInChart = true;
+        instance.setPointerCoordinate?.(svgPoint);
+        return;
+      }
+
+      // On mouse, we want to restrict the interaction to the drawing area and radar circle.
+
+      const svgPoint = getChartPoint(element, srcEvent);
+
+      // Test if it's in the drawing area
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.detail.target)) {
+        if (mousePosition.current.isInChart) {
+          instance.cleanInteraction?.();
+          mousePosition.current.isInChart = false;
+        }
+        return;
+      }
+
+      // Test if it's in the radar circle
+      const radiusSquare = (center.cx - svgPoint.x) ** 2 + (center.cy - svgPoint.y) ** 2;
+      const maxRadius = radiusAxisWithScale[usedRadiusAxisId].scale.range()[1];
+      if (radiusSquare > maxRadius ** 2) {
+        if (mousePosition.current.isInChart) {
+          instance.cleanInteraction?.();
+          mousePosition.current.isInChart = false;
+        }
+        return;
+      }
+      mousePosition.current.isInChart = true;
+      instance.setPointerCoordinate?.(svgPoint);
+    };
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
+    return () => {
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
+    };
+  }, [chartsLayerContainerRef, store, center, radiusAxisWithScale, usedRadiusAxisId, rotationAxisWithScale, usedRotationAxisId, instance, params.disableAxisListener, isInteractionEnabled, svg2rotation, hasInteractionPlugin]);
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    const onAxisClick = params.onAxisClick;
+    if (element === null || !onAxisClick) {
+      return () => {};
+    }
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
+      let dataIndex = null;
+      let isRotationAxis = false;
+      const svgPoint = getChartPoint(element, event.detail.srcEvent);
+      const rotation = generateSvg2rotation(center)(svgPoint.x, svgPoint.y);
+      const rotationIndex = getAxisIndex(rotationAxisWithScale[usedRotationAxisId], rotation);
+      isRotationAxis = rotationIndex !== -1;
+      dataIndex = isRotationAxis ? rotationIndex : null; // radius index is not yet implemented.
+
+      const USED_AXIS_ID = isRotationAxis ? usedRotationAxisId : usedRadiusAxisId;
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // The .data exist because otherwise the dataIndex would be null or -1.
+      const axisValue = (isRotationAxis ? rotationAxisWithScale : radiusAxisWithScale)[USED_AXIS_ID].data[dataIndex];
+      const seriesValues = {};
+      Object.keys(processedSeries).filter(seriesType => seriesType === 'radar').forEach(seriesType => {
+        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
+          const seriesItem = processedSeries[seriesType].series[seriesId];
+          seriesValues[seriesId] = seriesItem.data[dataIndex];
+        });
+      });
+      onAxisClick(event.detail.srcEvent, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    });
+    return () => {
+      axisClickHandler.cleanup();
+    };
+  }, [center, instance, params.onAxisClick, processedSeries, radiusAxisWithScale, rotationAxisWithScale, chartsLayerContainerRef, usedRadiusAxisId, usedRotationAxisId]);
+  return {
+    instance: {
+      svg2polar,
+      svg2rotation,
+      polar2svg
+    }
+  };
+};
+useChartPolarAxis.params = {
+  rotationAxis: true,
+  radiusAxis: true,
+  dataset: true,
+  disableAxisListener: true,
+  onAxisClick: true
+};
+useChartPolarAxis.getInitialState = params => ({
+  polarAxis: {
+    rotation: defaultizeAxis(params.rotationAxis, params.dataset, 'rotation'),
+    radius: defaultizeAxis(params.radiusAxis, params.dataset, 'radius')
+  }
+});

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.selectors.d.mts

@@ -0,0 +1,32 @@
+import { type UseChartPolarAxisSignature } from "./useChartPolarAxis.types.mjs";
+import { type ChartState } from "../../models/chart.mjs";
+import type { ChartDrawingArea } from "../../../../hooks/useDrawingArea.mjs";
+export declare const selectorChartPolarAxisState: (state: ChartState<[], [UseChartPolarAxisSignature]>) => {
+  rotation: import("../../../index.mjs").AxisConfig<import("../../../index.mjs").ScaleName, any, import("../../../index.mjs").ChartsRotationAxisProps>[];
+  radius: import("../../../index.mjs").AxisConfig<"linear", any, import("../../../index.mjs").ChartsRadiusAxisProps>[];
+} | undefined;
+export declare const selectorChartRawRotationAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.mjs").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => import("../../../index.mjs").AxisConfig<keyof import("../../../index.mjs").AxisScaleConfig, any, import("../../../index.mjs").ChartsRotationAxisProps>[] | undefined;
+export declare const selectorChartRawRadiusAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.mjs").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => import("../../../index.mjs").AxisConfig<"linear", any, import("../../../index.mjs").ChartsRadiusAxisProps>[] | undefined;
+/**
+ * The only interesting selectors that merge axis data and zoom if provided.
+ */
+export declare const selectorChartRotationAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.mjs").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => import("./computeAxisValue.mjs").ComputeResult<import("../../../index.mjs").ChartsRotationAxisProps>;
+export declare const selectorChartRadiusAxis: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.mjs").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => import("./computeAxisValue.mjs").ComputeResult<import("../../../index.mjs").ChartsRadiusAxisProps>;
+export declare function getDrawingAreaCenter(drawingArea: ChartDrawingArea): {
+  cx: number;
+  cy: number;
+};
+export declare const selectorChartPolarCenter: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<{}> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => {
+  cx: number;
+  cy: number;
+};

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.selectors.mjs

@@ -0,0 +1,34 @@
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/index.mjs";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
+import { computeAxisValue } from "./computeAxisValue.mjs";
+import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
+export const selectorChartPolarAxisState = state => state.polarAxis;
+export const selectorChartRawRotationAxis = createSelector(selectorChartPolarAxisState, axis => axis?.rotation);
+export const selectorChartRawRadiusAxis = createSelector(selectorChartPolarAxisState, axis => axis?.radius);
+
+/**
+ * The only interesting selectors that merge axis data and zoom if provided.
+ */
+
+export const selectorChartRotationAxis = createSelectorMemoized(selectorChartRawRotationAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, (axis, drawingArea, formattedSeries, seriesConfig) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'rotation'
+}));
+export const selectorChartRadiusAxis = createSelectorMemoized(selectorChartRawRadiusAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, (axis, drawingArea, formattedSeries, seriesConfig) => computeAxisValue({
+  drawingArea,
+  formattedSeries,
+  axis,
+  seriesConfig,
+  axisDirection: 'radius'
+}));
+export function getDrawingAreaCenter(drawingArea) {
+  return {
+    cx: drawingArea.left + drawingArea.width / 2,
+    cy: drawingArea.top + drawingArea.height / 2
+  };
+}
+export const selectorChartPolarCenter = createSelectorMemoized(selectorChartDrawingArea, getDrawingAreaCenter);

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.types.d.mts

@@ -0,0 +1,74 @@
+import { type ChartPluginSignature } from "../../models/index.mjs";
+import { type ChartSeriesType, type DatasetType } from "../../../../models/seriesType/config.mjs";
+import { type ScaleName, type AxisConfig, type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type RadiusAxis, type RotationAxis, type ChartsAxisData } from "../../../../models/axis.mjs";
+import { type UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.mjs";
+import { type UseChartInteractionSignature } from "../useChartInteraction/index.mjs";
+export interface UseChartPolarAxisInstance {
+  /**
+   * Transform (rotation, radius) to the SVG (x, y).
+   * @param {number} radius The radius.
+   * @param {number} rotation The rotation angle in radian.
+   * @returns {[number, number]} [x, y] the SVG coordinate.
+   */
+  polar2svg: (radius: number, rotation: number) => [number, number];
+  /**
+   * Transform the SVG (x, y) to the (rotation, radius) coordinates.
+   * @param {number} x The SVG x coordinate.
+   * @param {number} y The SVG y coordinate.
+   * @returns {[number, number]} [radius, rotation] the polar coordinate. Warning, the radius is a the power 2
+   */
+  svg2polar: (x: number, y: number) => [number, number];
+  /**
+   * Only compute the rotation from SVG coordinates.
+   * @param {number} x The SVG x coordinate.
+   * @param {number} y The SVG y coordinate.
+   * @returns {number} rotation The rotation angle in radian.
+   */
+  svg2rotation: (x: number, y: number) => number;
+}
+export interface UseChartPolarAxisParameters {
+  /**
+   * The configuration of the rotation-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  rotationAxis?: RotationAxis[];
+  /**
+   * The configuration of the radial-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  radiusAxis?: RadiusAxis[];
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset?: Readonly<DatasetType>;
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener?: boolean;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+}
+export type UseChartPolarAxisDefaultizedParameters = UseChartPolarAxisParameters & {};
+export interface UseChartPolarAxisState {
+  polarAxis: {
+    rotation: AxisConfig<ScaleName, any, ChartsRotationAxisProps>[];
+    radius: AxisConfig<'linear', any, ChartsRadiusAxisProps>[];
+  };
+}
+export type UseChartPolarAxisSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
+  params: UseChartPolarAxisParameters;
+  defaultizedParams: UseChartPolarAxisDefaultizedParameters;
+  state: UseChartPolarAxisState;
+  instance: UseChartPolarAxisInstance;
+  dependencies: [UseChartSeriesSignature<SeriesType>];
+  optionalDependencies: [UseChartInteractionSignature];
+}>;

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.mts

@@ -0,0 +1,29 @@
+import { type AxisItemIdentifier } from "../../../../models/axis.mjs";
+export declare const selectorChartsInteractionRotationAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => number | null;
+export declare const selectorChartsInteractionRotationAxisIndexes: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => number[] | null;
+export declare const selectorChartsInteractionRotationAxisValue: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.mjs").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => any;
+export declare const selectorChartsInteractionRotationAxisValues: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.mjs").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => any[] | null;
+/**
+ * Get rotation-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export declare const selectorChartsInteractionTooltipRotationAxes: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => AxisItemIdentifier[];
+/**
+ * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ */
+export declare const selectorChartsInteractionTooltipRadiusAxes: () => never[];
+/**
+ * Return `true` if the axis tooltip has something to display.
+ */
+export declare const selectorChartsInteractionPolarAxisTooltip: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.mjs").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => boolean;