@mui/x-charts 9.1.0 → 9.2.0

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

@@ -18,9 +18,29 @@ export declare const selectorChartsInteractionTooltipRotationAxes: (args_0: impo
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => AxisItemIdentifier[];
 /**
- * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ * Helper to get the radius associated to the interaction coordinate.
  */
-export declare const selectorChartsInteractionTooltipRadiusAxes: () => never[];
+export declare const selectorChartsInteractionRadius: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => number | null;
+export declare const selectorChartsInteractionRadiusAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => number | null;
+export declare const selectorChartsInteractionRadiusAxisIndexes: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => number[] | null;
+export declare const selectorChartsInteractionRadiusAxisValue: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => any;
+export declare const selectorChartsInteractionRadiusAxisValues: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => any[] | null;
+/**
+ * Get radius-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export declare const selectorChartsInteractionTooltipRadiusAxes: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => AxisItemIdentifier[];
 /**
  * Return `true` if the axis tooltip has something to display.
  */

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsInteractionTooltipRotationAxes = exports.selectorChartsInteractionTooltipRadiusAxes = exports.selectorChartsInteractionRotationAxisValues = exports.selectorChartsInteractionRotationAxisValue = exports.selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionPolarAxisTooltip = void 0;
+exports.selectorChartsInteractionTooltipRotationAxes = exports.selectorChartsInteractionTooltipRadiusAxes = exports.selectorChartsInteractionRotationAxisValues = exports.selectorChartsInteractionRotationAxisValue = exports.selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionRadiusAxisValues = exports.selectorChartsInteractionRadiusAxisValue = exports.selectorChartsInteractionRadiusAxisIndexes = exports.selectorChartsInteractionRadiusAxisIndex = exports.selectorChartsInteractionRadius = exports.selectorChartsInteractionPolarAxisTooltip = void 0;
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _store = require("@mui/x-internals/store");
 var _useChartInteraction = require("../useChartInteraction/useChartInteraction.selectors");
@@ -17,10 +17,17 @@ const optionalGetAxisIds = (_, ids) => ids;
  * Get interaction indexes
  */
 
-function indexGetter(value, axes, ids) {
-  return Array.isArray(ids) ? ids.map(id => (0, _getAxisIndex.getAxisIndex)(axes.axis[id], value)) : (0, _getAxisIndex.getAxisIndex)(axes.axis[ids], value);
+function indexGetter(value, axes, ids, type) {
+  if (type === 'rotation') {
+    const rotationAxes = axes;
+    return Array.isArray(ids) ? ids.map(id => (0, _getAxisIndex.getRotationAxisIndex)(rotationAxes.axis[id], value)) : (0, _getAxisIndex.getRotationAxisIndex)(rotationAxes.axis[ids], value);
+  }
+  const radiusAxes = axes;
+  return Array.isArray(ids) ? ids.map(id => (0, _getAxisIndex.getRadiusAxisIndex)(radiusAxes.axis[id], value)) : (0, _getAxisIndex.getRadiusAxisIndex)(radiusAxes.axis[ids], value);
 }
 
+// ============================= Rotation axis =============================
+
 /**
  * Helper to get the rotation associated to the interaction coordinate.
  */
@@ -30,8 +37,8 @@ const selectorChartsInteractionRotationAngle = (0, _store.createSelector)(_useCh
   }
   return (0, _coordinateTransformation.generateSvg2rotation)(center)(x, y);
 });
-const selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionRotationAxisIndex = (0, _store.createSelector)(selectorChartsInteractionRotationAngle, _useChartPolarAxis.selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0]));
-const selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndexes = (0, _store.createSelector)(selectorChartsInteractionRotationAngle, _useChartPolarAxis.selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds));
+const selectorChartsInteractionRotationAxisIndex = exports.selectorChartsInteractionRotationAxisIndex = (0, _store.createSelector)(selectorChartsInteractionRotationAngle, _useChartPolarAxis.selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0], 'rotation'));
+const selectorChartsInteractionRotationAxisIndexes = exports.selectorChartsInteractionRotationAxisIndexes = (0, _store.createSelector)(selectorChartsInteractionRotationAngle, _useChartPolarAxis.selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds, 'rotation'));
 const selectorChartsInteractionRotationAxisValue = exports.selectorChartsInteractionRotationAxisValue = (0, _store.createSelector)(_useChartPolarAxis.selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex, optionalGetAxisId, (rotationAxis, rotationIndex, id) => {
   id = id ?? rotationAxis.axisIds[0];
   if (rotationIndex === null || rotationIndex === -1 || rotationAxis.axisIds.length === 0) {
@@ -80,16 +87,70 @@ const selectorChartsInteractionTooltipRotationAxes = exports.selectorChartsInter
   }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
 });
 
+// ============================= Radius axis =============================
+
 /**
- * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ * Helper to get the radius associated to the interaction coordinate.
  */
-const selectorChartsInteractionTooltipRadiusAxes = () => {
-  // TODO implement this selector and add it to the `selectorChartsInteractionPolarAxisTooltip`
-  return [];
-};
+const selectorChartsInteractionRadius = exports.selectorChartsInteractionRadius = (0, _store.createSelector)(_useChartInteraction.selectorChartsInteractionPointerX, _useChartInteraction.selectorChartsInteractionPointerY, _useChartPolarAxis.selectorChartPolarCenter, (x, y, center) => {
+  if (x === null || y === null) {
+    return null;
+  }
+  return Math.sqrt((x - center.cx) ** 2 + (y - center.cy) ** 2);
+});
+const selectorChartsInteractionRadiusAxisIndex = exports.selectorChartsInteractionRadiusAxisIndex = (0, _store.createSelector)(selectorChartsInteractionRadius, _useChartPolarAxis.selectorChartRadiusAxis, optionalGetAxisId, (radius, radiusAxis, id) => radius === null ? null : indexGetter(radius, radiusAxis, id ?? radiusAxis.axisIds[0], 'radius'));
+const selectorChartsInteractionRadiusAxisIndexes = exports.selectorChartsInteractionRadiusAxisIndexes = (0, _store.createSelector)(selectorChartsInteractionRadius, _useChartPolarAxis.selectorChartRadiusAxis, optionalGetAxisIds, (radius, radiusAxis, ids) => radius === null ? null : indexGetter(radius, radiusAxis, ids ?? radiusAxis.axisIds, 'radius'));
+const selectorChartsInteractionRadiusAxisValue = exports.selectorChartsInteractionRadiusAxisValue = (0, _store.createSelector)(_useChartPolarAxis.selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndex, optionalGetAxisId, (radiusAxis, radiusIndex, id) => {
+  id = id ?? radiusAxis.axisIds[0];
+  if (radiusIndex === null || radiusIndex === -1 || radiusAxis.axisIds.length === 0) {
+    return null;
+  }
+  const data = radiusAxis.axis[id]?.data;
+  if (!data) {
+    return null;
+  }
+  return data[radiusIndex];
+});
+const selectorChartsInteractionRadiusAxisValues = exports.selectorChartsInteractionRadiusAxisValues = (0, _store.createSelector)(_useChartPolarAxis.selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndexes, optionalGetAxisIds, (radiusAxis, radiusIndexes, ids) => {
+  ids = ids ?? radiusAxis.axisIds;
+  if (radiusIndexes === null) {
+    return null;
+  }
+  return ids.map((id, axisIndex) => {
+    const radiusIndex = radiusIndexes[axisIndex];
+    if (radiusIndex === -1) {
+      return null;
+    }
+    return radiusAxis.axis[id].data?.[radiusIndex];
+  });
+});
+
+/**
+ * Get radius-axis ids and corresponding data index that should be display in the tooltip.
+ */
+const selectorChartsInteractionTooltipRadiusAxes = exports.selectorChartsInteractionTooltipRadiusAxes = (0, _store.createSelectorMemoizedWithOptions)({
+  memoizeOptions: {
+    // Keep the same reference if array content is the same.
+    // If possible, avoid this pattern by creating selectors that
+    // uses string/number as arguments.
+    resultEqualityCheck: _isDeepEqual.isDeepEqual
+  }
+})(selectorChartsInteractionRadiusAxisIndexes, _useChartPolarAxis.selectorChartRadiusAxis, (indexes, axes) => {
+  if (indexes === null) {
+    return [];
+  }
+  return axes.axisIds.map((axisId, axisIndex) => ({
+    axisId,
+    dataIndex: indexes[axisIndex]
+  })).filter(({
+    axisId,
+    dataIndex
+  }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
+});
+
+// ============================= Cross axes selectors =============================
 
 /**
  * Return `true` if the axis tooltip has something to display.
  */
-exports.selectorChartsInteractionTooltipRadiusAxes = selectorChartsInteractionTooltipRadiusAxes;
-const selectorChartsInteractionPolarAxisTooltip = exports.selectorChartsInteractionPolarAxisTooltip = (0, _store.createSelector)(selectorChartsInteractionTooltipRotationAxes, rotationTooltip => rotationTooltip.length > 0);
+const selectorChartsInteractionPolarAxisTooltip = exports.selectorChartsInteractionPolarAxisTooltip = (0, _store.createSelector)(selectorChartsInteractionTooltipRotationAxes, selectorChartsInteractionTooltipRadiusAxes, (rotationTooltip, radiusTooltip) => rotationTooltip.length > 0 || radiusTooltip.length > 0);

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

@@ -2,8 +2,8 @@ import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { createSelector, createSelectorMemoizedWithOptions } from '@mui/x-internals/store';
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.mjs";
 import { generateSvg2rotation } from "./coordinateTransformation.mjs";
-import { getAxisIndex } from "./getAxisIndex.mjs";
-import { selectorChartPolarCenter, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.mjs";
+import { getRotationAxisIndex, getRadiusAxisIndex } from "./getAxisIndex.mjs";
+import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.mjs";
 const optionalGetAxisId = (_, id) => id;
 const optionalGetAxisIds = (_, ids) => ids;
 
@@ -11,10 +11,17 @@ const optionalGetAxisIds = (_, ids) => ids;
  * Get interaction indexes
  */
 
-function indexGetter(value, axes, ids) {
-  return Array.isArray(ids) ? ids.map(id => getAxisIndex(axes.axis[id], value)) : getAxisIndex(axes.axis[ids], value);
+function indexGetter(value, axes, ids, type) {
+  if (type === 'rotation') {
+    const rotationAxes = axes;
+    return Array.isArray(ids) ? ids.map(id => getRotationAxisIndex(rotationAxes.axis[id], value)) : getRotationAxisIndex(rotationAxes.axis[ids], value);
+  }
+  const radiusAxes = axes;
+  return Array.isArray(ids) ? ids.map(id => getRadiusAxisIndex(radiusAxes.axis[id], value)) : getRadiusAxisIndex(radiusAxes.axis[ids], value);
 }
 
+// ============================= Rotation axis =============================
+
 /**
  * Helper to get the rotation associated to the interaction coordinate.
  */
@@ -24,8 +31,8 @@ const selectorChartsInteractionRotationAngle = createSelector(selectorChartsInte
   }
   return generateSvg2rotation(center)(x, y);
 });
-export const selectorChartsInteractionRotationAxisIndex = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0]));
-export const selectorChartsInteractionRotationAxisIndexes = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds));
+export const selectorChartsInteractionRotationAxisIndex = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisId, (rotation, rotationAxis, id) => rotation === null ? null : indexGetter(rotation, rotationAxis, id ?? rotationAxis.axisIds[0], 'rotation'));
+export const selectorChartsInteractionRotationAxisIndexes = createSelector(selectorChartsInteractionRotationAngle, selectorChartRotationAxis, optionalGetAxisIds, (rotation, rotationAxis, ids) => rotation === null ? null : indexGetter(rotation, rotationAxis, ids ?? rotationAxis.axisIds, 'rotation'));
 export const selectorChartsInteractionRotationAxisValue = createSelector(selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex, optionalGetAxisId, (rotationAxis, rotationIndex, id) => {
   id = id ?? rotationAxis.axisIds[0];
   if (rotationIndex === null || rotationIndex === -1 || rotationAxis.axisIds.length === 0) {
@@ -74,15 +81,70 @@ export const selectorChartsInteractionTooltipRotationAxes = createSelectorMemoiz
   }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
 });
 
+// ============================= Radius axis =============================
+
 /**
- * Get radius-axis ids and corresponding data index that should be displayed in the tooltip.
+ * Helper to get the radius associated to the interaction coordinate.
  */
-export const selectorChartsInteractionTooltipRadiusAxes = () => {
-  // TODO implement this selector and add it to the `selectorChartsInteractionPolarAxisTooltip`
-  return [];
-};
+export const selectorChartsInteractionRadius = createSelector(selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter, (x, y, center) => {
+  if (x === null || y === null) {
+    return null;
+  }
+  return Math.sqrt((x - center.cx) ** 2 + (y - center.cy) ** 2);
+});
+export const selectorChartsInteractionRadiusAxisIndex = createSelector(selectorChartsInteractionRadius, selectorChartRadiusAxis, optionalGetAxisId, (radius, radiusAxis, id) => radius === null ? null : indexGetter(radius, radiusAxis, id ?? radiusAxis.axisIds[0], 'radius'));
+export const selectorChartsInteractionRadiusAxisIndexes = createSelector(selectorChartsInteractionRadius, selectorChartRadiusAxis, optionalGetAxisIds, (radius, radiusAxis, ids) => radius === null ? null : indexGetter(radius, radiusAxis, ids ?? radiusAxis.axisIds, 'radius'));
+export const selectorChartsInteractionRadiusAxisValue = createSelector(selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndex, optionalGetAxisId, (radiusAxis, radiusIndex, id) => {
+  id = id ?? radiusAxis.axisIds[0];
+  if (radiusIndex === null || radiusIndex === -1 || radiusAxis.axisIds.length === 0) {
+    return null;
+  }
+  const data = radiusAxis.axis[id]?.data;
+  if (!data) {
+    return null;
+  }
+  return data[radiusIndex];
+});
+export const selectorChartsInteractionRadiusAxisValues = createSelector(selectorChartRadiusAxis, selectorChartsInteractionRadiusAxisIndexes, optionalGetAxisIds, (radiusAxis, radiusIndexes, ids) => {
+  ids = ids ?? radiusAxis.axisIds;
+  if (radiusIndexes === null) {
+    return null;
+  }
+  return ids.map((id, axisIndex) => {
+    const radiusIndex = radiusIndexes[axisIndex];
+    if (radiusIndex === -1) {
+      return null;
+    }
+    return radiusAxis.axis[id].data?.[radiusIndex];
+  });
+});
+
+/**
+ * Get radius-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipRadiusAxes = createSelectorMemoizedWithOptions({
+  memoizeOptions: {
+    // Keep the same reference if array content is the same.
+    // If possible, avoid this pattern by creating selectors that
+    // uses string/number as arguments.
+    resultEqualityCheck: isDeepEqual
+  }
+})(selectorChartsInteractionRadiusAxisIndexes, selectorChartRadiusAxis, (indexes, axes) => {
+  if (indexes === null) {
+    return [];
+  }
+  return axes.axisIds.map((axisId, axisIndex) => ({
+    axisId,
+    dataIndex: indexes[axisIndex]
+  })).filter(({
+    axisId,
+    dataIndex
+  }) => axes.axis[axisId].triggerTooltip && dataIndex >= 0);
+});
+
+// ============================= Cross axes selectors =============================
 
 /**
  * Return `true` if the axis tooltip has something to display.
  */
-export const selectorChartsInteractionPolarAxisTooltip = createSelector(selectorChartsInteractionTooltipRotationAxes, rotationTooltip => rotationTooltip.length > 0);
+export const selectorChartsInteractionPolarAxisTooltip = createSelector(selectorChartsInteractionTooltipRotationAxes, selectorChartsInteractionTooltipRadiusAxes, (rotationTooltip, radiusTooltip) => rotationTooltip.length > 0 || radiusTooltip.length > 0);

package/models/axis.d.mts

@@ -10,6 +10,7 @@ import type { ChartsTextProps } from "../ChartsText/index.mjs";
 import type { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from "./colorMapping.mjs";
 import type { OrdinalTimeTicks } from "./timeTicks.mjs";
 import { type ChartsTypeFeatureFlags } from "./featureFlags.mjs";
+import { type ChartsRadialAxisClasses } from "../ChartsRadiusAxis/sharedRadialAxisClasses.mjs";
 export type AxisId = string | number;
 export type D3Scale<Domain extends {
   toString(): string;
@@ -139,7 +140,9 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
    */
   tickLabelMinGap?: number;
 }
-type AxisSideConfig<AxisProps extends ChartsXAxisProps | ChartsYAxisProps> = {
+export type ChartsCartesianAxisProps = ChartsXAxisProps | ChartsYAxisProps;
+export type ChartsRadialAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps;
+type AxisSideConfig<AxisProps extends ChartsCartesianAxisProps> = {
   /**
    * Position of the axis.
    *
@@ -177,6 +180,28 @@ export interface ChartsRotationAxisProps extends ChartsAxisProps {
    * The gap between the axis and the label.
    */
   labelGap?: number;
+  /**
+   * The position of the rotation axis.
+   * It can be 'inside' or 'outside'.
+   * @default 'outside'
+   */
+  position?: 'inside' | 'outside' | 'none';
+  /**
+   * Set the position of the tick labels relative to the axis line.
+   * `'after'` places them outside the arc, `'before'` inside.
+   * @default position === 'outside' ? 'after' : 'before'
+   */
+  tickLabelPosition?: 'after' | 'before';
+  /**
+   * Set the position of the tick relative to the axis line.
+   * `'after'` places them outside the arc, `'before'` inside.
+   * @default position === 'outside' ? 'after' : 'before'
+   */
+  tickPosition?: 'after' | 'before';
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsRadialAxisClasses>;
 }
 export interface ChartsRadiusAxisProps extends ChartsAxisProps {
   axis?: 'radius';
@@ -188,6 +213,29 @@ export interface ChartsRadiusAxisProps extends ChartsAxisProps {
    * The maximal radius.
    */
   maxRadius?: number;
+  /**
+   * The position of the axis in polar coordinates.
+   * It can be 'start', 'end', or a specific angle in degrees.
+   * @default 'start'
+   */
+  position?: 'start' | 'end' | number | 'none';
+  /**
+   * Set the position of the tick labels relative to the axis line.
+   * The before/after is defined based on clockwise direction.
+   * Using `'auto'` sets it to `'before'` if position is `'start'` and `'after'` otherwise.
+   * @default 'auto'
+   */
+  tickLabelPosition?: 'center' | 'after' | 'before' | 'auto';
+  /**
+   * Set the position of the tick relative to the axis line.
+   * The before/after is defined based on clockwise direction.
+   * @default position === 'start' ? 'before' : 'after'
+   */
+  tickPosition?: 'after' | 'before';
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsRadialAxisClasses>;
 }
 export type ScaleName = keyof AxisScaleConfig;
 export type ContinuousScaleName = 'linear' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc';
@@ -475,7 +523,7 @@ type CommonAxisConfig<S extends ScaleName = ScaleName, V = any> = {
 /**
  * Use this type for advanced typing. For basic usage, use `RotationAxis` or `RadiusAxis`.
  */
-export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsRotationAxisProps | ChartsRadiusAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps> = {
+export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsRadialAxisProps = ChartsRadialAxisProps> = {
   /**
    * The offset of the axis in pixels. It can be used to move the axis from its default position.
    * X-axis: A top axis will move up, and a bottom axis will move down.
@@ -487,7 +535,7 @@ export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps
 /**
  * Use this type for advanced typing. For basic usage, use `XAxis` or `YAxis`.
  */
-export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsXAxisProps | ChartsYAxisProps = ChartsXAxisProps | ChartsYAxisProps> = {
+export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsCartesianAxisProps = ChartsCartesianAxisProps> = {
   /**
    * The offset of the axis in pixels. It can be used to move the axis from its default position.
    * X-axis: A top axis will move up, and a bottom axis will move down.
@@ -497,13 +545,13 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps exten
   offset?: number;
 } & CommonAxisConfig<S, V> & MinMaxConfig<S> & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension;
 export interface AxisConfigExtension {}
-export type PolarAxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps> = Omit<PolarAxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
+export type PolarAxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsRadialAxisProps> = Omit<PolarAxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
   /**
    * If true, the contents of the axis will be displayed by a tooltip with `trigger='axis'`.
    */
   triggerTooltip?: boolean;
 };
-export type ComputedAxis<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = MakeRequired<Omit<DefaultedAxis<S, V, AxisProps>, 'scaleType'>, 'offset'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
+export type ComputedAxis<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsCartesianAxisProps> = AxisProps extends any ? MakeRequired<Omit<DefaultedAxis<S, V, AxisProps>, 'scaleType'>, 'offset'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
   /**
    * An indication of the expected number of ticks.
    */
@@ -518,7 +566,7 @@ export type ComputedAxis<S extends ScaleName = ScaleName, V = any, AxisProps ext
   height: number;
 } : {}) & (AxisProps extends ChartsYAxisProps ? AxisSideConfig<AxisProps> & {
   width: number;
-} : {});
+} : {}) : never;
 export type ComputedXAxis<S extends ScaleName = ScaleName, V = any> = ComputedAxis<S, V, ChartsXAxisProps>;
 export type ComputedYAxis<S extends ScaleName = ScaleName, V = any> = ComputedAxis<S, V, ChartsYAxisProps>;
 export declare function isBandScaleConfig(scaleConfig: PolarAxisConfig<ScaleName>): scaleConfig is PolarAxisConfig<'band'> & {
@@ -580,7 +628,7 @@ export type RadiusAxis<S extends ScaleName = ScaleName, V = any> = S extends Sca
 /**
  * The axis configuration with missing values filled with default values.
  */
-export type DefaultedAxis<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = AxisConfig<S, V, AxisProps> & {
+export type DefaultedAxis<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsCartesianAxisProps> = AxisConfig<S, V, AxisProps> & {
   zoom: DefaultizedZoomOptions | undefined;
 };
 /**

package/models/axis.d.ts

@@ -10,6 +10,7 @@ import type { ChartsTextProps } from "../ChartsText/index.js";
 import type { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from "./colorMapping.js";
 import type { OrdinalTimeTicks } from "./timeTicks.js";
 import { type ChartsTypeFeatureFlags } from "./featureFlags.js";
+import { type ChartsRadialAxisClasses } from "../ChartsRadiusAxis/sharedRadialAxisClasses.js";
 export type AxisId = string | number;
 export type D3Scale<Domain extends {
   toString(): string;
@@ -139,7 +140,9 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
    */
   tickLabelMinGap?: number;
 }
-type AxisSideConfig<AxisProps extends ChartsXAxisProps | ChartsYAxisProps> = {
+export type ChartsCartesianAxisProps = ChartsXAxisProps | ChartsYAxisProps;
+export type ChartsRadialAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps;
+type AxisSideConfig<AxisProps extends ChartsCartesianAxisProps> = {
   /**
    * Position of the axis.
    *
@@ -177,6 +180,28 @@ export interface ChartsRotationAxisProps extends ChartsAxisProps {
    * The gap between the axis and the label.
    */
   labelGap?: number;
+  /**
+   * The position of the rotation axis.
+   * It can be 'inside' or 'outside'.
+   * @default 'outside'
+   */
+  position?: 'inside' | 'outside' | 'none';
+  /**
+   * Set the position of the tick labels relative to the axis line.
+   * `'after'` places them outside the arc, `'before'` inside.
+   * @default position === 'outside' ? 'after' : 'before'
+   */
+  tickLabelPosition?: 'after' | 'before';
+  /**
+   * Set the position of the tick relative to the axis line.
+   * `'after'` places them outside the arc, `'before'` inside.
+   * @default position === 'outside' ? 'after' : 'before'
+   */
+  tickPosition?: 'after' | 'before';
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsRadialAxisClasses>;
 }
 export interface ChartsRadiusAxisProps extends ChartsAxisProps {
   axis?: 'radius';
@@ -188,6 +213,29 @@ export interface ChartsRadiusAxisProps extends ChartsAxisProps {
    * The maximal radius.
    */
   maxRadius?: number;
+  /**
+   * The position of the axis in polar coordinates.
+   * It can be 'start', 'end', or a specific angle in degrees.
+   * @default 'start'
+   */
+  position?: 'start' | 'end' | number | 'none';
+  /**
+   * Set the position of the tick labels relative to the axis line.
+   * The before/after is defined based on clockwise direction.
+   * Using `'auto'` sets it to `'before'` if position is `'start'` and `'after'` otherwise.
+   * @default 'auto'
+   */
+  tickLabelPosition?: 'center' | 'after' | 'before' | 'auto';
+  /**
+   * Set the position of the tick relative to the axis line.
+   * The before/after is defined based on clockwise direction.
+   * @default position === 'start' ? 'before' : 'after'
+   */
+  tickPosition?: 'after' | 'before';
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsRadialAxisClasses>;
 }
 export type ScaleName = keyof AxisScaleConfig;
 export type ContinuousScaleName = 'linear' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc';
@@ -475,7 +523,7 @@ type CommonAxisConfig<S extends ScaleName = ScaleName, V = any> = {
 /**
  * Use this type for advanced typing. For basic usage, use `RotationAxis` or `RadiusAxis`.
  */
-export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsRotationAxisProps | ChartsRadiusAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps> = {
+export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsRadialAxisProps = ChartsRadialAxisProps> = {
   /**
    * The offset of the axis in pixels. It can be used to move the axis from its default position.
    * X-axis: A top axis will move up, and a bottom axis will move down.
@@ -487,7 +535,7 @@ export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps
 /**
  * Use this type for advanced typing. For basic usage, use `XAxis` or `YAxis`.
  */
-export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsXAxisProps | ChartsYAxisProps = ChartsXAxisProps | ChartsYAxisProps> = {
+export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsCartesianAxisProps = ChartsCartesianAxisProps> = {
   /**
    * The offset of the axis in pixels. It can be used to move the axis from its default position.
    * X-axis: A top axis will move up, and a bottom axis will move down.
@@ -497,13 +545,13 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps exten
   offset?: number;
 } & CommonAxisConfig<S, V> & MinMaxConfig<S> & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & AxisSideConfig<AxisProps> & TickParams & AxisConfigExtension;
 export interface AxisConfigExtension {}
-export type PolarAxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps> = Omit<PolarAxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
+export type PolarAxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsRadialAxisProps> = Omit<PolarAxisConfig<S, V, AxisProps>, 'scaleType'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
   /**
    * If true, the contents of the axis will be displayed by a tooltip with `trigger='axis'`.
    */
   triggerTooltip?: boolean;
 };
-export type ComputedAxis<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = MakeRequired<Omit<DefaultedAxis<S, V, AxisProps>, 'scaleType'>, 'offset'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
+export type ComputedAxis<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsCartesianAxisProps> = AxisProps extends any ? MakeRequired<Omit<DefaultedAxis<S, V, AxisProps>, 'scaleType'>, 'offset'> & AxisScaleConfig[S] & AxisScaleComputedConfig[S] & {
   /**
    * An indication of the expected number of ticks.
    */
@@ -518,7 +566,7 @@ export type ComputedAxis<S extends ScaleName = ScaleName, V = any, AxisProps ext
   height: number;
 } : {}) & (AxisProps extends ChartsYAxisProps ? AxisSideConfig<AxisProps> & {
   width: number;
-} : {});
+} : {}) : never;
 export type ComputedXAxis<S extends ScaleName = ScaleName, V = any> = ComputedAxis<S, V, ChartsXAxisProps>;
 export type ComputedYAxis<S extends ScaleName = ScaleName, V = any> = ComputedAxis<S, V, ChartsYAxisProps>;
 export declare function isBandScaleConfig(scaleConfig: PolarAxisConfig<ScaleName>): scaleConfig is PolarAxisConfig<'band'> & {
@@ -580,7 +628,7 @@ export type RadiusAxis<S extends ScaleName = ScaleName, V = any> = S extends Sca
 /**
  * The axis configuration with missing values filled with default values.
  */
-export type DefaultedAxis<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsXAxisProps | ChartsYAxisProps> = AxisConfig<S, V, AxisProps> & {
+export type DefaultedAxis<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsCartesianAxisProps> = AxisConfig<S, V, AxisProps> & {
   zoom: DefaultizedZoomOptions | undefined;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -28,15 +28,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@mui/utils": "9.0.0",
+    "@mui/utils": "9.0.1",
     "bezier-easing": "^2.1.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internal-gestures": "^9.1.0",
     "@mui/x-charts-vendor": "^9.0.0",
-    "@mui/x-internals": "^9.1.0"
+    "@mui/x-internals": "^9.1.0",
+    "@mui/x-internal-gestures": "^9.2.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",