@mui/x-charts-premium 9.1.0 → 9.2.0

package/RadialBarChart/RadialBarElement.js

@@ -13,6 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _styles = require("@mui/material/styles");
+var _hooks = require("../hooks");
 var _radialBarClasses = require("./radialBarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "dataIndex", "color", "startAngle", "endAngle", "innerRadius", "outerRadius", "className", "classes", "onClick"];
@@ -22,6 +23,7 @@ const RadialBarElementRoot = (0, _styles.styled)('path', {
 })();
 function RadialBarElement(props) {
   const {
+      seriesId,
       dataIndex,
       color,
       startAngle,
@@ -36,6 +38,14 @@ function RadialBarElement(props) {
   const classes = (0, _radialBarClasses.useUtilityClasses)({
     classes: innerClasses
   });
+  const identifier = React.useMemo(() => ({
+    type: 'radialBar',
+    seriesId,
+    dataIndex
+  }), [seriesId, dataIndex]);
+  const highlightState = (0, _hooks.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = (0, _d3Shape.arc)()({
     startAngle,
     endAngle,
@@ -49,6 +59,10 @@ function RadialBarElement(props) {
     stroke: "none",
     onClick: onClick,
     cursor: onClick ? 'pointer' : undefined,
-    "data-index": dataIndex
+    "data-index": dataIndex,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: isFaded ? 0.3 : 1
   }, other));
 }

package/RadialBarChart/RadialBarElement.mjs

@@ -7,6 +7,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
+import { useItemHighlightState } from "../hooks/index.mjs";
 import { useUtilityClasses } from "./radialBarClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RadialBarElementRoot = styled('path', {
@@ -15,6 +16,7 @@ const RadialBarElementRoot = styled('path', {
 })();
 function RadialBarElement(props) {
   const {
+      seriesId,
       dataIndex,
       color,
       startAngle,
@@ -29,6 +31,14 @@ function RadialBarElement(props) {
   const classes = useUtilityClasses({
     classes: innerClasses
   });
+  const identifier = React.useMemo(() => ({
+    type: 'radialBar',
+    seriesId,
+    dataIndex
+  }), [seriesId, dataIndex]);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = d3Arc()({
     startAngle,
     endAngle,
@@ -42,7 +52,11 @@ function RadialBarElement(props) {
     stroke: "none",
     onClick: onClick,
     cursor: onClick ? 'pointer' : undefined,
-    "data-index": dataIndex
+    "data-index": dataIndex,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: isFaded ? 0.3 : 1
   }, other));
 }
 export { RadialBarElement };

package/RadialBarChart/radialBarClasses.d.mts

@@ -11,5 +11,5 @@ export declare const radialBarClasses: RadialBarClasses;
 interface UseUtilityClassesOptions {
   classes?: Partial<RadialBarClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"series" | "root" | "element", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "series" | "element", string>;
 export {};

package/RadialBarChart/radialBarClasses.d.ts

@@ -11,5 +11,5 @@ export declare const radialBarClasses: RadialBarClasses;
 interface UseUtilityClassesOptions {
   classes?: Partial<RadialBarClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"series" | "root" | "element", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "series" | "element", string>;
 export {};

package/RadialBarChart/seriesConfig/axisTooltipGetter.js

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.axisTooltipGetter = void 0;
 const axisTooltipGetter = series => {
-  return Object.values(series).map(s => ({
+  return Object.values(series).map(s => s.layout === 'horizontal' ? {
+    direction: 'radius',
+    axisId: 'radiusAxisId' in s ? s.radiusAxisId : undefined
+  } : {
     direction: 'rotation',
     axisId: 'rotationAxisId' in s ? s.rotationAxisId : undefined
-  }));
+  });
 };
 exports.axisTooltipGetter = axisTooltipGetter;

package/RadialBarChart/seriesConfig/axisTooltipGetter.mjs

@@ -1,6 +1,9 @@
 export const axisTooltipGetter = series => {
-  return Object.values(series).map(s => ({
+  return Object.values(series).map(s => s.layout === 'horizontal' ? {
+    direction: 'radius',
+    axisId: 'radiusAxisId' in s ? s.radiusAxisId : undefined
+  } : {
     direction: 'rotation',
     axisId: 'rotationAxisId' in s ? s.rotationAxisId : undefined
-  }));
+  });
 };

package/RadialBarChart/seriesConfig/getItemAtPosition.d.mts

@@ -0,0 +1,6 @@
+import { type ChartState, type UseChartPolarAxisSignature } from '@mui/x-charts/internals';
+import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
+export default function getItemAtPosition(state: ChartState<[UseChartPolarAxisSignature]>, point: {
+  x: number;
+  y: number;
+}): SeriesItemIdentifierWithType<'radialBar'> | undefined;

package/RadialBarChart/seriesConfig/getItemAtPosition.d.ts

@@ -0,0 +1,6 @@
+import { type ChartState, type UseChartPolarAxisSignature } from '@mui/x-charts/internals';
+import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
+export default function getItemAtPosition(state: ChartState<[UseChartPolarAxisSignature]>, point: {
+  x: number;
+  y: number;
+}): SeriesItemIdentifierWithType<'radialBar'> | undefined;

package/RadialBarChart/seriesConfig/getItemAtPosition.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getItemAtPosition;
+var _internals = require("@mui/x-charts/internals");
+function getItemAtPosition(state, point) {
+  const {
+    axis: rotationAxes,
+    axisIds: rotationAxisIds
+  } = (0, _internals.selectorChartRotationAxis)(state);
+  const {
+    axis: radiusAxes,
+    axisIds: radiusAxisIds
+  } = (0, _internals.selectorChartRadiusAxis)(state);
+  const center = (0, _internals.selectorChartPolarCenter)(state);
+  const seriesState = (0, _internals.selectorAllSeriesOfType)(state, 'radialBar');
+  if (!seriesState || seriesState.seriesOrder.length === 0) {
+    return undefined;
+  }
+  const defaultRotationAxisId = rotationAxisIds[0];
+  const defaultRadiusAxisId = radiusAxisIds[0];
+  const polarCoordinate = {
+    rotation: (0, _internals.generateSvg2rotation)(center)(point.x, point.y),
+    radius: Math.sqrt((point.x - center.cx) ** 2 + (point.y - center.cy) ** 2)
+  };
+  for (let stackIndex = 0; stackIndex < seriesState.stackingGroups.length; stackIndex += 1) {
+    const group = seriesState.stackingGroups[stackIndex];
+    const seriesIds = group.ids;
+    for (const seriesId of seriesIds) {
+      const series = (seriesState.series ?? {})[seriesId];
+      const rotationAxisId = series.rotationAxisId ?? defaultRotationAxisId;
+      const radiusAxisId = series.radiusAxisId ?? defaultRadiusAxisId;
+      const rotationAxis = rotationAxes[rotationAxisId];
+      const radiusAxis = radiusAxes[radiusAxisId];
+      const bandAxis = series.layout === 'horizontal' ? radiusAxis : rotationAxis;
+      const continuousAxis = series.layout === 'horizontal' ? rotationAxis : radiusAxis;
+      const clampedAngle = rotationAxis.scale.range()[0] + (0, _internals.clampAngleRad)(polarCoordinate.rotation - rotationAxis.scale.range()[0]);
+      const bandCoordinate = series.layout === 'horizontal' ? polarCoordinate.radius : clampedAngle;
+      const valueCoordinate = series.layout === 'horizontal' ? clampedAngle : polarCoordinate.radius;
+      const dataIndex = (0, _internals.getBandIndex)(bandAxis, {
+        groupNumber: seriesState.stackingGroups.length,
+        groupIndex: stackIndex
+      }, bandCoordinate);
+      if (dataIndex === -1) {
+        continue;
+      }
+
+      // The point is inside the band for this series
+      const bar = series.visibleStackedData[dataIndex];
+      const start = continuousAxis.scale(bar[0]);
+      const end = continuousAxis.scale(bar[1]);
+      if (start == null || end == null) {
+        continue;
+      }
+      const continuousMin = Math.min(start, end);
+      const continuousMax = Math.max(start, end);
+      if (valueCoordinate >= continuousMin && valueCoordinate <= continuousMax) {
+        return {
+          type: 'radialBar',
+          seriesId,
+          dataIndex
+        };
+      }
+    }
+  }
+  return undefined;
+}

package/RadialBarChart/seriesConfig/getItemAtPosition.mjs

@@ -0,0 +1,63 @@
+import { selectorAllSeriesOfType, selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis, getBandIndex, clampAngleRad, generateSvg2rotation } from '@mui/x-charts/internals';
+export default function getItemAtPosition(state, point) {
+  const {
+    axis: rotationAxes,
+    axisIds: rotationAxisIds
+  } = selectorChartRotationAxis(state);
+  const {
+    axis: radiusAxes,
+    axisIds: radiusAxisIds
+  } = selectorChartRadiusAxis(state);
+  const center = selectorChartPolarCenter(state);
+  const seriesState = selectorAllSeriesOfType(state, 'radialBar');
+  if (!seriesState || seriesState.seriesOrder.length === 0) {
+    return undefined;
+  }
+  const defaultRotationAxisId = rotationAxisIds[0];
+  const defaultRadiusAxisId = radiusAxisIds[0];
+  const polarCoordinate = {
+    rotation: generateSvg2rotation(center)(point.x, point.y),
+    radius: Math.sqrt((point.x - center.cx) ** 2 + (point.y - center.cy) ** 2)
+  };
+  for (let stackIndex = 0; stackIndex < seriesState.stackingGroups.length; stackIndex += 1) {
+    const group = seriesState.stackingGroups[stackIndex];
+    const seriesIds = group.ids;
+    for (const seriesId of seriesIds) {
+      const series = (seriesState.series ?? {})[seriesId];
+      const rotationAxisId = series.rotationAxisId ?? defaultRotationAxisId;
+      const radiusAxisId = series.radiusAxisId ?? defaultRadiusAxisId;
+      const rotationAxis = rotationAxes[rotationAxisId];
+      const radiusAxis = radiusAxes[radiusAxisId];
+      const bandAxis = series.layout === 'horizontal' ? radiusAxis : rotationAxis;
+      const continuousAxis = series.layout === 'horizontal' ? rotationAxis : radiusAxis;
+      const clampedAngle = rotationAxis.scale.range()[0] + clampAngleRad(polarCoordinate.rotation - rotationAxis.scale.range()[0]);
+      const bandCoordinate = series.layout === 'horizontal' ? polarCoordinate.radius : clampedAngle;
+      const valueCoordinate = series.layout === 'horizontal' ? clampedAngle : polarCoordinate.radius;
+      const dataIndex = getBandIndex(bandAxis, {
+        groupNumber: seriesState.stackingGroups.length,
+        groupIndex: stackIndex
+      }, bandCoordinate);
+      if (dataIndex === -1) {
+        continue;
+      }
+
+      // The point is inside the band for this series
+      const bar = series.visibleStackedData[dataIndex];
+      const start = continuousAxis.scale(bar[0]);
+      const end = continuousAxis.scale(bar[1]);
+      if (start == null || end == null) {
+        continue;
+      }
+      const continuousMin = Math.min(start, end);
+      const continuousMax = Math.max(start, end);
+      if (valueCoordinate >= continuousMin && valueCoordinate <= continuousMax) {
+        return {
+          type: 'radialBar',
+          seriesId,
+          dataIndex
+        };
+      }
+    }
+  }
+  return undefined;
+}

package/RadialBarChart/seriesConfig/index.js

@@ -14,6 +14,7 @@ var _getColor = _interopRequireDefault(require("./getColor"));
 var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _descriptionGetter = _interopRequireDefault(require("./descriptionGetter"));
+var _getItemAtPosition = _interopRequireDefault(require("./getItemAtPosition"));
 var _extremums = require("./extremums");
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 _internals.polarSeriesTypes.addType('radialBar');
@@ -27,7 +28,7 @@ const radialBarSeriesConfig = exports.radialBarSeriesConfig = {
   rotationExtremumGetter: _extremums.rotationExtremumGetter,
   radiusExtremumGetter: _extremums.radiusExtremumGetter,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
-  // getItemAtPosition,
+  getItemAtPosition: _getItemAtPosition.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
   identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
   identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex,

package/RadialBarChart/seriesConfig/index.mjs

@@ -7,6 +7,7 @@ import colorProcessor from "./getColor.mjs";
 import seriesProcessor from "./seriesProcessor.mjs";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
 import descriptionGetter from "./descriptionGetter.mjs";
+import getItemAtPosition from "./getItemAtPosition.mjs";
 import { radiusExtremumGetter, rotationExtremumGetter } from "./extremums.mjs";
 import tooltipGetter from "./tooltip.mjs";
 polarSeriesTypes.addType('radialBar');
@@ -20,7 +21,7 @@ export const radialBarSeriesConfig = {
   rotationExtremumGetter,
   radiusExtremumGetter,
   getSeriesWithDefaultValues,
-  // getItemAtPosition,
+  getItemAtPosition,
   keyboardFocusHandler,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
   identifierCleaner: identifierCleanerSeriesIdDataIndex,

package/RadialBarChart/useRadialBarChartProps.d.mts

@@ -6,6 +6,7 @@ import { type ChartsOverlayProps } from "../ChartsOverlay/index.mjs";
 import { type ChartsRadialDataProviderProps } from "../ChartsRadialDataProvider/index.mjs";
 import type { RadialBarChartProps } from "./RadialBarChart.mjs";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.mjs";
+import type { ChartsRadialAxisHighlightProps } from "../ChartsRadialAxisHighlight/index.mjs";
 import { type RadialBarChartPluginSignatures } from "./RadialBarChart.plugins.mjs";
 /**
  * A helper function that extracts RadialBarChartProps from the input props
@@ -24,5 +25,6 @@ export declare const useRadialBarChartProps: (props: RadialBarChartProps) => {
   };
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;
+  axisHighlightProps: ChartsRadialAxisHighlightProps;
   children: React.ReactNode;
 };

package/RadialBarChart/useRadialBarChartProps.d.ts

@@ -6,6 +6,7 @@ import { type ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { type ChartsRadialDataProviderProps } from "../ChartsRadialDataProvider/index.js";
 import type { RadialBarChartProps } from "./RadialBarChart.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
+import type { ChartsRadialAxisHighlightProps } from "../ChartsRadialAxisHighlight/index.js";
 import { type RadialBarChartPluginSignatures } from "./RadialBarChart.plugins.js";
 /**
  * A helper function that extracts RadialBarChartProps from the input props
@@ -24,5 +25,6 @@ export declare const useRadialBarChartProps: (props: RadialBarChartProps) => {
   };
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;
+  axisHighlightProps: ChartsRadialAxisHighlightProps;
   children: React.ReactNode;
 };

package/RadialBarChart/useRadialBarChartProps.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _RadialBarChart = require("./RadialBarChart.plugins");
 var _constants = require("../constants");
-const _excluded = ["rotationAxis", "radiusAxis", "series", "width", "height", "margin", "colors", "dataset", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "showToolbar"];
+const _excluded = ["rotationAxis", "radiusAxis", "series", "width", "height", "margin", "colors", "dataset", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "showToolbar", "axisHighlight"];
 /**
  * A helper function that extracts RadialBarChartProps from the input props
  * and returns an object with props for the children components of RadialBarChart.
@@ -36,7 +36,8 @@ const useRadialBarChartProps = props => {
       slots,
       slotProps,
       skipAnimation,
-      loading
+      loading,
+      axisHighlight
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
@@ -65,6 +66,12 @@ const useRadialBarChartProps = props => {
     skipAnimation,
     plugins: _RadialBarChart.RADIAL_BAR_CHART_PLUGINS
   });
+  const isHorizontal = series.some(s => s.layout === 'horizontal');
+  const axisHighlightProps = (0, _extends2.default)({}, isHorizontal ? {
+    radius: 'band'
+  } : {
+    rotation: 'band'
+  }, axisHighlight);
   const gridProps = grid;
   const clipPathGroupProps = {
     clipPath: `url(#${clipPathId})`
@@ -94,6 +101,7 @@ const useRadialBarChartProps = props => {
     clipPathGroupProps,
     overlayProps,
     legendProps,
+    axisHighlightProps,
     children
   };
 };

package/RadialBarChart/useRadialBarChartProps.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["rotationAxis", "radiusAxis", "series", "width", "height", "margin", "colors", "dataset", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "showToolbar"];
+const _excluded = ["rotationAxis", "radiusAxis", "series", "width", "height", "margin", "colors", "dataset", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "showToolbar", "axisHighlight"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { RADIAL_BAR_CHART_PLUGINS } from "./RadialBarChart.plugins.mjs";
@@ -30,7 +30,8 @@ export const useRadialBarChartProps = props => {
       slots,
       slotProps,
       skipAnimation,
-      loading
+      loading,
+      axisHighlight
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -59,6 +60,12 @@ export const useRadialBarChartProps = props => {
     skipAnimation,
     plugins: RADIAL_BAR_CHART_PLUGINS
   });
+  const isHorizontal = series.some(s => s.layout === 'horizontal');
+  const axisHighlightProps = _extends({}, isHorizontal ? {
+    radius: 'band'
+  } : {
+    rotation: 'band'
+  }, axisHighlight);
   const gridProps = grid;
   const clipPathGroupProps = {
     clipPath: `url(#${clipPathId})`
@@ -88,6 +95,7 @@ export const useRadialBarChartProps = props => {
     clipPathGroupProps,
     overlayProps,
     legendProps,
+    axisHighlightProps,
     children
   };
 };

package/RadialLineChart/RadialLineChart.js

@@ -13,6 +13,8 @@ var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-charts/internals");
 var _ChartsRadialGrid = require("@mui/x-charts/ChartsRadialGrid");
 var _ChartsRadialAxisHighlight = require("@mui/x-charts/ChartsRadialAxisHighlight");
+var _ChartsRadiusAxis = require("@mui/x-charts/ChartsRadiusAxis");
+var _ChartsRotationAxis = require("@mui/x-charts/ChartsRotationAxis");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsTooltip = require("../ChartsTooltip");
@@ -69,7 +71,7 @@ const RadialLineChart = exports.Unstable_RadialLineChart = /*#__PURE__*/React.fo
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialGrid.Unstable_ChartsRadialGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadialAreaPlot.RadialAreaPlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadialLinePlot.RadialLinePlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlight.Unstable_ChartsRadialAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadialMarkPlot.RadialMarkPlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadialLineHighlightPlot.RadialLineHighlightPlot, {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlight.Unstable_ChartsRadialAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRotationAxis.Unstable_ChartsRotationAxis, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadiusAxis.Unstable_ChartsRadiusAxis, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadialMarkPlot.RadialMarkPlot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadialLineHighlightPlot.RadialLineHighlightPlot, {
           slots: props.slots,
           slotProps: props.slotProps
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
@@ -95,7 +97,7 @@ process.env.NODE_ENV !== "production" ? RadialLineChart.propTypes = {
    * @default { rotation: 'line' }
    */
   axisHighlight: _propTypes.default.shape({
-    radius: _propTypes.default.oneOf(['line', 'none']),
+    radius: _propTypes.default.oneOf(['band', 'line', 'none']),
     rotation: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
   /**

package/RadialLineChart/RadialLineChart.mjs

@@ -5,6 +5,8 @@ import { useThemeProps } from '@mui/material/styles';
 import { useChartsContainerProps } from '@mui/x-charts/internals';
 import { Unstable_ChartsRadialGrid as ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
 import { Unstable_ChartsRadialAxisHighlight as ChartsRadialAxisHighlight } from '@mui/x-charts/ChartsRadialAxisHighlight';
+import { Unstable_ChartsRadiusAxis as ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis';
+import { Unstable_ChartsRotationAxis as ChartsRotationAxis } from '@mui/x-charts/ChartsRotationAxis';
 import { ChartsLegend } from "../ChartsLegend/index.mjs";
 import { ChartsSurface } from "../ChartsSurface/index.mjs";
 import { ChartsTooltip } from "../ChartsTooltip/index.mjs";
@@ -61,7 +63,7 @@ const RadialLineChart = /*#__PURE__*/React.forwardRef(function RadialLineChart(i
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsRadialGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(RadialAreaPlot, {}), /*#__PURE__*/_jsx(RadialLinePlot, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps))]
-        })), /*#__PURE__*/_jsx(ChartsRadialAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(RadialMarkPlot, {}), /*#__PURE__*/_jsx(RadialLineHighlightPlot, {
+        })), /*#__PURE__*/_jsx(ChartsRadialAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(ChartsRotationAxis, {}), /*#__PURE__*/_jsx(ChartsRadiusAxis, {}), /*#__PURE__*/_jsx(RadialMarkPlot, {}), /*#__PURE__*/_jsx(RadialLineHighlightPlot, {
           slots: props.slots,
           slotProps: props.slotProps
         }), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
@@ -87,7 +89,7 @@ process.env.NODE_ENV !== "production" ? RadialLineChart.propTypes = {
    * @default { rotation: 'line' }
    */
   axisHighlight: PropTypes.shape({
-    radius: PropTypes.oneOf(['line', 'none']),
+    radius: PropTypes.oneOf(['band', 'line', 'none']),
     rotation: PropTypes.oneOf(['band', 'line', 'none'])
   }),
   /**

package/RadialLineChart/RadialLineChart.plugins.d.mts

@@ -1,4 +1,4 @@
 import { type UseChartZAxisSignature, type UseChartPolarAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartKeyboardNavigationSignature, type UseChartVisibilityManagerSignature, type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
-import { type UseChartProExportSignature } from "../plugins/index.mjs";
+import { type UseChartProExportSignature } from '@mui/x-charts-pro/plugins';
 export type RadialLineChartPluginSignatures = [UseChartZAxisSignature, UseChartTooltipSignature<'radialLine'>, UseChartInteractionSignature, UseChartPolarAxisSignature<'radialLine'>, UseChartHighlightSignature<'radialLine'>, UseChartVisibilityManagerSignature<'radialLine'>, UseChartKeyboardNavigationSignature, UseChartProExportSignature];
 export declare const RADIAL_LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<RadialLineChartPluginSignatures>;

package/RadialLineChart/RadialLineChart.plugins.d.ts

@@ -1,4 +1,4 @@
 import { type UseChartZAxisSignature, type UseChartPolarAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartKeyboardNavigationSignature, type UseChartVisibilityManagerSignature, type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
-import { type UseChartProExportSignature } from "../plugins/index.js";
+import { type UseChartProExportSignature } from '@mui/x-charts-pro/plugins';
 export type RadialLineChartPluginSignatures = [UseChartZAxisSignature, UseChartTooltipSignature<'radialLine'>, UseChartInteractionSignature, UseChartPolarAxisSignature<'radialLine'>, UseChartHighlightSignature<'radialLine'>, UseChartVisibilityManagerSignature<'radialLine'>, UseChartKeyboardNavigationSignature, UseChartProExportSignature];
 export declare const RADIAL_LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<RadialLineChartPluginSignatures>;

package/RadialLineChart/RadialLineChart.plugins.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RADIAL_LINE_CHART_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
-var _plugins = require("../plugins");
+var _plugins = require("@mui/x-charts-pro/plugins");
 const RADIAL_LINE_CHART_PLUGINS = exports.RADIAL_LINE_CHART_PLUGINS = [_internals.useChartZAxis, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartPolarAxis, _internals.useChartHighlight, _internals.useChartVisibilityManager, _internals.useChartKeyboardNavigation, _plugins.useChartProExport];

package/RadialLineChart/RadialLineChart.plugins.mjs

@@ -1,3 +1,3 @@
 import { useChartZAxis, useChartPolarAxis, useChartTooltip, useChartInteraction, useChartHighlight, useChartKeyboardNavigation, useChartVisibilityManager } from '@mui/x-charts/internals';
-import { useChartProExport } from "../plugins/index.mjs";
+import { useChartProExport } from '@mui/x-charts-pro/plugins';
 export const RADIAL_LINE_CHART_PLUGINS = [useChartZAxis, useChartTooltip, useChartInteraction, useChartPolarAxis, useChartHighlight, useChartVisibilityManager, useChartKeyboardNavigation, useChartProExport];

package/RadialLineChart/seriesConfig/getItemAtPosition.js

@@ -21,7 +21,7 @@ function getBracketIndices(rotationAxis, angle) {
     return null;
   }
   if ((0, _internals.isOrdinalScale)(scale)) {
-    const index = (0, _internals.getPolarAxisIndex)(rotationAxis, angle);
+    const index = (0, _internals.getRotationAxisIndex)(rotationAxis, angle);
     if (index === -1) {
       return null;
     }
@@ -200,7 +200,7 @@ function getItemAtPosition(state, point) {
       connectNulls,
       curve
     } = seriesItem;
-    const dataIndex = (0, _internals.getPolarAxisIndex)(rotationAxis, pointerAngle);
+    const dataIndex = (0, _internals.getRotationAxisIndex)(rotationAxis, pointerAngle);
     if (dataIndex === -1) {
       continue;
     }
@@ -338,7 +338,7 @@ function getItemAtPosition(state, point) {
       const radiusMin = Math.min(innerRadius, outerRadius);
       const radiusMax = Math.max(innerRadius, outerRadius);
       if (pointerRadius >= radiusMin && pointerRadius <= radiusMax) {
-        const dataIndex = (0, _internals.getPolarAxisIndex)(rotationAxis, pointerAngle);
+        const dataIndex = (0, _internals.getRotationAxisIndex)(rotationAxis, pointerAngle);
         return {
           type: 'radialLine',
           seriesId,

package/RadialLineChart/seriesConfig/getItemAtPosition.mjs

@@ -1,5 +1,5 @@
 import { getValueToPositionMapper } from '@mui/x-charts/hooks';
-import { selectorAllSeriesOfType, selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis, getPolarAxisIndex, isOrdinalScale } from '@mui/x-charts/internals';
+import { selectorAllSeriesOfType, selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis, getRotationAxisIndex, isOrdinalScale } from '@mui/x-charts/internals';
 import { evaluateCurveAtAngle, clampAngleRad, getAsNumber } from '@mui/x-charts/internals';
 /**
  * For a continuous rotation axis, find the two data indices that bracket the pointer's angle position.
@@ -16,7 +16,7 @@ function getBracketIndices(rotationAxis, angle) {
     return null;
   }
   if (isOrdinalScale(scale)) {
-    const index = getPolarAxisIndex(rotationAxis, angle);
+    const index = getRotationAxisIndex(rotationAxis, angle);
     if (index === -1) {
       return null;
     }
@@ -195,7 +195,7 @@ export default function getItemAtPosition(state, point) {
       connectNulls,
       curve
     } = seriesItem;
-    const dataIndex = getPolarAxisIndex(rotationAxis, pointerAngle);
+    const dataIndex = getRotationAxisIndex(rotationAxis, pointerAngle);
     if (dataIndex === -1) {
       continue;
     }
@@ -333,7 +333,7 @@ export default function getItemAtPosition(state, point) {
       const radiusMin = Math.min(innerRadius, outerRadius);
       const radiusMax = Math.max(innerRadius, outerRadius);
       if (pointerRadius >= radiusMin && pointerRadius <= radiusMax) {
-        const dataIndex = getPolarAxisIndex(rotationAxis, pointerAngle);
+        const dataIndex = getRotationAxisIndex(rotationAxis, pointerAngle);
         return {
           type: 'radialLine',
           seriesId,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-premium v9.1.0
+ * @mui/x-charts-premium v9.2.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-premium v9.1.0
+ * @mui/x-charts-premium v9.2.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the