@mui/x-charts-premium 9.0.4 → 9.2.0

package/RadialBarChart/RadialBarPlot.mjs

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { selectorChartPolarCenter, useChartsContext } from '@mui/x-charts/internals';
+import { useUtilityClasses } from "./radialBarClasses.mjs";
+import { useRadialBarPlotData } from "./useRadialBarPlotData.mjs";
+import { RadialBarElement } from "./RadialBarElement.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RadialBarPlotRoot = styled('g', {
+  name: 'MuiRadialBarPlot',
+  slot: 'Root'
+})();
+
+/**
+ * Demos:
+ *
+ * - [Radial bar demonstration](https://mui.com/x/react-charts/radial-bars/)
+ *
+ * API:
+ *
+ * - [RadialBarPlot API](https://mui.com/x/api/charts/radial-bar-plot/)
+ */
+function RadialBarPlot(props) {
+  const {
+    className
+  } = props;
+  const {
+    completedData
+  } = useRadialBarPlotData();
+  const {
+    store
+  } = useChartsContext();
+  const {
+    cx,
+    cy
+  } = store.use(selectorChartPolarCenter);
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsx(RadialBarPlotRoot, {
+    className: clsx(classes.root, className),
+    transform: `translate(${cx} ${cy})`,
+    children: completedData.map(({
+      seriesId,
+      data
+    }) => /*#__PURE__*/_jsx("g", {
+      "data-series": seriesId,
+      className: classes.series,
+      children: data.map(({
+        dataIndex,
+        color,
+        startAngle,
+        endAngle,
+        innerRadius,
+        outerRadius
+      }) => /*#__PURE__*/_jsx(RadialBarElement, {
+        seriesId: seriesId,
+        dataIndex: dataIndex,
+        color: color,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        innerRadius: innerRadius,
+        outerRadius: outerRadius
+      }, dataIndex))
+    }, seriesId))
+  });
+}
+process.env.NODE_ENV !== "production" ? RadialBarPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className: PropTypes.string
+} : void 0;
+export { RadialBarPlot };

package/RadialBarChart/index.d.mts

@@ -0,0 +1,3 @@
+export * from "./RadialBarChart.mjs";
+export * from "./RadialBarPlot.mjs";
+export { type RadialBarClasses, type RadialBarClassKey, radialBarClasses } from "./radialBarClasses.mjs";

package/RadialBarChart/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./RadialBarChart.js";
+export * from "./RadialBarPlot.js";
+export { type RadialBarClasses, type RadialBarClassKey, radialBarClasses } from "./radialBarClasses.js";

package/RadialBarChart/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  radialBarClasses: true
+};
+Object.defineProperty(exports, "radialBarClasses", {
+  enumerable: true,
+  get: function () {
+    return _radialBarClasses.radialBarClasses;
+  }
+});
+var _RadialBarChart = require("./RadialBarChart");
+Object.keys(_RadialBarChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RadialBarChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RadialBarChart[key];
+    }
+  });
+});
+var _RadialBarPlot = require("./RadialBarPlot");
+Object.keys(_RadialBarPlot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RadialBarPlot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RadialBarPlot[key];
+    }
+  });
+});
+var _radialBarClasses = require("./radialBarClasses");

package/RadialBarChart/index.mjs

@@ -0,0 +1,3 @@
+export * from "./RadialBarChart.mjs";
+export * from "./RadialBarPlot.mjs";
+export { radialBarClasses } from "./radialBarClasses.mjs";

package/RadialBarChart/radialBarClasses.d.mts

@@ -0,0 +1,15 @@
+export interface RadialBarClasses {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+}
+export type RadialBarClassKey = keyof RadialBarClasses;
+export declare const radialBarClasses: RadialBarClasses;
+interface UseUtilityClassesOptions {
+  classes?: Partial<RadialBarClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "series" | "element", string>;
+export {};

package/RadialBarChart/radialBarClasses.d.ts

@@ -0,0 +1,15 @@
+export interface RadialBarClasses {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+}
+export type RadialBarClassKey = keyof RadialBarClasses;
+export declare const radialBarClasses: RadialBarClasses;
+interface UseUtilityClassesOptions {
+  classes?: Partial<RadialBarClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "series" | "element", string>;
+export {};

package/RadialBarChart/radialBarClasses.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUtilityClasses = exports.radialBarClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getRadialBarUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiRadialBarChart', slot);
+}
+const radialBarClasses = exports.radialBarClasses = (0, _generateUtilityClasses.default)('MuiRadialBarChart', ['root', 'series', 'element']);
+const useUtilityClasses = options => {
+  const {
+    classes
+  } = options ?? {};
+  const slots = {
+    root: ['root'],
+    series: ['series'],
+    element: ['element']
+  };
+  return (0, _composeClasses.default)(slots, getRadialBarUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/RadialBarChart/radialBarClasses.mjs

@@ -0,0 +1,18 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+function getRadialBarUtilityClass(slot) {
+  return generateUtilityClass('MuiRadialBarChart', slot);
+}
+export const radialBarClasses = generateUtilityClasses('MuiRadialBarChart', ['root', 'series', 'element']);
+export const useUtilityClasses = options => {
+  const {
+    classes
+  } = options ?? {};
+  const slots = {
+    root: ['root'],
+    series: ['series'],
+    element: ['element']
+  };
+  return composeClasses(slots, getRadialBarUtilityClass, classes);
+};

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/seriesConfig/seriesProcessor.js

@@ -45,12 +45,16 @@ function seriesProcessor(params, dataset, isItemVisible) {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Radial bar series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : (0, _formatErrorMessage2.default)(269, id));
     }
     if (process.env.NODE_ENV !== 'production') {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
         if (!dataKey && !series[id].valueGetter) {
+          // TODO: fix mui/no-guarded-throw
+          // eslint-disable-next-line mui/no-guarded-throw
           throw new Error(`MUI X Charts: Radial bar series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
         }
         if (dataKey) {

package/RadialBarChart/seriesConfig/seriesProcessor.mjs

@@ -38,12 +38,16 @@ function seriesProcessor(params, dataset, isItemVisible) {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
+      // TODO: fix mui/no-guarded-throw
+      // eslint-disable-next-line mui/no-guarded-throw
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Radial bar series with id="${id}" has no data. ` + 'The chart cannot render this series without data. ' + 'Provide a data property to the series or use the dataset prop.' : _formatErrorMessage(269, id));
     }
     if (process.env.NODE_ENV !== 'production') {
       if (!data && dataset) {
         const dataKey = series[id].dataKey;
         if (!dataKey && !series[id].valueGetter) {
+          // TODO: fix mui/no-guarded-throw
+          // eslint-disable-next-line mui/no-guarded-throw
           throw new Error(`MUI X Charts: Radial bar series with id="${id}" has no data, no dataKey, and no valueGetter. ` + 'When using the dataset prop, each series must have a dataKey or valueGetter to identify which dataset values to use. ' + 'Add a dataKey or valueGetter property to the series configuration.');
         }
         if (dataKey) {

package/RadialBarChart/useRadialBarChartProps.d.mts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { type ChartsClipPathProps } from "../ChartsClipPath/index.mjs";
+import { type ChartsRadialGridProps } from "../ChartsRadialGrid/index.mjs";
+import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.mjs";
+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
+ * and returns an object with props for the children components of RadialBarChart.
+ *
+ * @param props The input props for RadialBarChart
+ * @returns An object with props for the children components of RadialBarChart
+ */
+export declare const useRadialBarChartProps: (props: RadialBarChartProps) => {
+  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+  chartsContainerProps: ChartsRadialDataProviderProps<"radialBar", RadialBarChartPluginSignatures>;
+  gridProps: ChartsRadialGridProps | undefined;
+  clipPathProps: ChartsClipPathProps;
+  clipPathGroupProps: {
+    clipPath: string;
+  };
+  overlayProps: ChartsOverlayProps;
+  legendProps: ChartsLegendSlotExtension;
+  axisHighlightProps: ChartsRadialAxisHighlightProps;
+  children: React.ReactNode;
+};

package/RadialBarChart/useRadialBarChartProps.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { type ChartsClipPathProps } from "../ChartsClipPath/index.js";
+import { type ChartsRadialGridProps } from "../ChartsRadialGrid/index.js";
+import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
+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
+ * and returns an object with props for the children components of RadialBarChart.
+ *
+ * @param props The input props for RadialBarChart
+ * @returns An object with props for the children components of RadialBarChart
+ */
+export declare const useRadialBarChartProps: (props: RadialBarChartProps) => {
+  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+  chartsContainerProps: ChartsRadialDataProviderProps<"radialBar", RadialBarChartPluginSignatures>;
+  gridProps: ChartsRadialGridProps | undefined;
+  clipPathProps: ChartsClipPathProps;
+  clipPathGroupProps: {
+    clipPath: string;
+  };
+  overlayProps: ChartsOverlayProps;
+  legendProps: ChartsLegendSlotExtension;
+  axisHighlightProps: ChartsRadialAxisHighlightProps;
+  children: React.ReactNode;
+};

package/RadialBarChart/useRadialBarChartProps.js

@@ -0,0 +1,108 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRadialBarChartProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+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", "axisHighlight"];
+/**
+ * A helper function that extracts RadialBarChartProps from the input props
+ * and returns an object with props for the children components of RadialBarChart.
+ *
+ * @param props The input props for RadialBarChart
+ * @returns An object with props for the children components of RadialBarChart
+ */
+const useRadialBarChartProps = props => {
+  const {
+      rotationAxis,
+      radiusAxis,
+      series,
+      width,
+      height,
+      margin,
+      colors,
+      dataset,
+      grid,
+      children,
+      slots,
+      slotProps,
+      skipAnimation,
+      loading,
+      axisHighlight
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const id = (0, _useId.default)();
+  const clipPathId = `${id}-clip-path`;
+  const seriesWithDefault = React.useMemo(() => series.map(s => (0, _extends2.default)({
+    type: 'radialBar'
+  }, s)), [series]);
+  const defaultRotationAxis = React.useMemo(() => {
+    return [{
+      id: _constants.DEFAULT_ROTATION_AXIS_KEY,
+      scaleType: 'band',
+      data: Array.from({
+        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+      }, (_, index) => index)
+    }];
+  }, [series, dataset]);
+  const chartsContainerProps = (0, _extends2.default)({}, other, {
+    series: seriesWithDefault,
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    rotationAxis: rotationAxis ?? defaultRotationAxis,
+    radiusAxis,
+    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})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const legendProps = {
+    slots,
+    slotProps
+  };
+  const chartsWrapperProps = {
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false
+  };
+  return {
+    chartsWrapperProps,
+    chartsContainerProps,
+    gridProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    legendProps,
+    axisHighlightProps,
+    children
+  };
+};
+exports.useRadialBarChartProps = useRadialBarChartProps;