@mui/x-charts 9.1.0 → 9.2.0

package/ChartsRotationAxis/ChartsRotationAxis.js

@@ -17,12 +17,12 @@ var _chartsRotationAxisClasses = require("./chartsRotationAxisClasses");
 var _createGetLabelTextAnchors = require("../ChartsRadiusAxis/createGetLabelTextAnchors");
 var _getLabelTransform = require("./getLabelTransform");
 var _jsxRuntime = require("react/jsx-runtime");
-/* Gap between a tick and its label. */
-const TICK_LABEL_GAP = 3;
+/* Gap between a tick and its label. */const TICK_LABEL_GAP = 3;
 const getLabelTextAnchors = (0, _createGetLabelTextAnchors.createGetLabelTextAnchors)(_getLabelTransform.getLabelTransform);
 function ChartsRotationAxis(props) {
+  const rotationAxis = (0, _useAxis.useRotationAxis)(props.axisId);
+  const settings = (0, _extends2.default)({}, rotationAxis, props);
   const {
-    axisId,
     disableLine,
     disableTicks,
     position = 'outside',
@@ -31,7 +31,7 @@ function ChartsRotationAxis(props) {
     tickSize = 6,
     className,
     classes: classesProp
-  } = props;
+  } = settings;
   const classes = (0, _chartsRotationAxisClasses.useUtilityClasses)({
     classes: classesProp
   });
@@ -43,7 +43,6 @@ function ChartsRotationAxis(props) {
     cx,
     cy
   } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
-  const rotationAxis = (0, _useAxis.useRotationAxis)(axisId);
   const radiusAxis = (0, _useAxis.useRadiusAxis)();
   const ticks = (0, _useTicks.useTicks)({
     scale: rotationAxis.scale,
@@ -53,7 +52,7 @@ function ChartsRotationAxis(props) {
     valueFormatter: rotationAxis?.valueFormatter,
     direction: 'rotation'
   });
-  if (!rotationAxis || !radiusAxis) {
+  if (!rotationAxis || !radiusAxis || settings.position === 'none') {
     return null;
   }
   const radius = radiusAxis.scale.range()[position === 'inside' ? 0 : 1];
@@ -65,7 +64,6 @@ function ChartsRotationAxis(props) {
     x: cx + Math.sin(angle) * r,
     y: cy - Math.cos(angle) * r
   });
-  const isFullCircle = Math.abs(endAngle - startAngle) > 2 * Math.PI - 0.01;
   const sweepFlag = endAngle - startAngle >= 0 ? 1 : 0;
   const start = angleToPoint(startAngle, radius);
   const end = angleToPoint(endAngle, radius);
@@ -73,7 +71,7 @@ function ChartsRotationAxis(props) {
   const arcPath = `M ${start.x} ${start.y} ` + `A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
     className: (0, _clsx.default)(classes.root, className),
-    children: [!disableLine && (isFullCircle ?
+    children: [!disableLine && (rotationAxis.isFullCircle ?
     /*#__PURE__*/
     // Use a circle to avoid degenerated arcs when start and end angles are the same or very close.
     (0, _jsxRuntime.jsx)("circle", {
@@ -90,6 +88,7 @@ function ChartsRotationAxis(props) {
       className: classes.line
     })), ticks.map(({
       offset: angle,
+      labelOffset,
       formattedValue
     }, index) => {
       if (!formattedValue) {
@@ -99,23 +98,21 @@ function ChartsRotationAxis(props) {
       // Convert "0 = up" convention to SVG math angle (0 = right, clockwise y-down).
       const dx = Math.sin(angle);
       const dy = -Math.cos(angle);
+      const labelDx = labelOffset === 0 ? dx : Math.sin(angle + labelOffset);
+      const labelDy = labelOffset === 0 ? dy : -Math.cos(angle + labelOffset);
       const tx = cx + dx * radius;
       const ty = cy + dy * radius;
       const tickDx = (tickPosition === 'after' ? 1 : -1) * dx * tickSize;
       const tickDy = (tickPosition === 'after' ? 1 : -1) * dy * tickSize;
-      const tickLabelGapDx = (tickLabelPosition === 'after' ? 1 : -1) * dx * TICK_LABEL_GAP;
-      const tickLabelGapDy = (tickLabelPosition === 'after' ? 1 : -1) * dy * TICK_LABEL_GAP;
-
-      // Compute the label position.
-      let labelX = tx;
-      let labelY = ty;
-      labelX += tickLabelGapDx;
-      labelY += tickLabelGapDy;
+      let tickLabelRadius = radius + (tickLabelPosition === 'after' ? 1 : -1) * TICK_LABEL_GAP;
       if (tickLabelPosition === tickPosition && !disableTicks) {
         // Add the size of the tick if they are in the same direction.
-        labelX += tickDx;
-        labelY += tickDy;
+        tickLabelRadius += tickSize;
       }
+
+      // Compute the label position.
+      const labelX = cx + labelDx * tickLabelRadius;
+      const labelY = cy + labelDy * tickLabelRadius;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
@@ -132,7 +129,7 @@ function ChartsRotationAxis(props) {
           fontSize: 12,
           className: classes.tickLabel,
           pointerEvents: "none"
-        }, getLabelTextAnchors(dx, dy, tickLabelPosition), {
+        }, getLabelTextAnchors(labelDx, labelDy, tickLabelPosition), {
           children: formattedValue
         }))]
       }, index);

package/ChartsRotationAxis/ChartsRotationAxis.mjs

@@ -10,13 +10,15 @@ import { selectorChartPolarCenter } from "../internals/plugins/featurePlugins/us
 import { useUtilityClasses } from "./chartsRotationAxisClasses.mjs";
 import { createGetLabelTextAnchors } from "../ChartsRadiusAxis/createGetLabelTextAnchors.mjs";
 import { getLabelTransform } from "./getLabelTransform.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 /* Gap between a tick and its label. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TICK_LABEL_GAP = 3;
 const getLabelTextAnchors = createGetLabelTextAnchors(getLabelTransform);
 export function ChartsRotationAxis(props) {
+  const rotationAxis = useRotationAxis(props.axisId);
+  const settings = _extends({}, rotationAxis, props);
   const {
-    axisId,
     disableLine,
     disableTicks,
     position = 'outside',
@@ -25,7 +27,7 @@ export function ChartsRotationAxis(props) {
     tickSize = 6,
     className,
     classes: classesProp
-  } = props;
+  } = settings;
   const classes = useUtilityClasses({
     classes: classesProp
   });
@@ -37,7 +39,6 @@ export function ChartsRotationAxis(props) {
     cx,
     cy
   } = store.use(selectorChartPolarCenter);
-  const rotationAxis = useRotationAxis(axisId);
   const radiusAxis = useRadiusAxis();
   const ticks = useTicks({
     scale: rotationAxis.scale,
@@ -47,7 +48,7 @@ export function ChartsRotationAxis(props) {
     valueFormatter: rotationAxis?.valueFormatter,
     direction: 'rotation'
   });
-  if (!rotationAxis || !radiusAxis) {
+  if (!rotationAxis || !radiusAxis || settings.position === 'none') {
     return null;
   }
   const radius = radiusAxis.scale.range()[position === 'inside' ? 0 : 1];
@@ -59,7 +60,6 @@ export function ChartsRotationAxis(props) {
     x: cx + Math.sin(angle) * r,
     y: cy - Math.cos(angle) * r
   });
-  const isFullCircle = Math.abs(endAngle - startAngle) > 2 * Math.PI - 0.01;
   const sweepFlag = endAngle - startAngle >= 0 ? 1 : 0;
   const start = angleToPoint(startAngle, radius);
   const end = angleToPoint(endAngle, radius);
@@ -67,7 +67,7 @@ export function ChartsRotationAxis(props) {
   const arcPath = `M ${start.x} ${start.y} ` + `A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}`;
   return /*#__PURE__*/_jsxs("g", {
     className: clsx(classes.root, className),
-    children: [!disableLine && (isFullCircle ?
+    children: [!disableLine && (rotationAxis.isFullCircle ?
     /*#__PURE__*/
     // Use a circle to avoid degenerated arcs when start and end angles are the same or very close.
     _jsx("circle", {
@@ -84,6 +84,7 @@ export function ChartsRotationAxis(props) {
       className: classes.line
     })), ticks.map(({
       offset: angle,
+      labelOffset,
       formattedValue
     }, index) => {
       if (!formattedValue) {
@@ -93,23 +94,21 @@ export function ChartsRotationAxis(props) {
       // Convert "0 = up" convention to SVG math angle (0 = right, clockwise y-down).
       const dx = Math.sin(angle);
       const dy = -Math.cos(angle);
+      const labelDx = labelOffset === 0 ? dx : Math.sin(angle + labelOffset);
+      const labelDy = labelOffset === 0 ? dy : -Math.cos(angle + labelOffset);
       const tx = cx + dx * radius;
       const ty = cy + dy * radius;
       const tickDx = (tickPosition === 'after' ? 1 : -1) * dx * tickSize;
       const tickDy = (tickPosition === 'after' ? 1 : -1) * dy * tickSize;
-      const tickLabelGapDx = (tickLabelPosition === 'after' ? 1 : -1) * dx * TICK_LABEL_GAP;
-      const tickLabelGapDy = (tickLabelPosition === 'after' ? 1 : -1) * dy * TICK_LABEL_GAP;
-
-      // Compute the label position.
-      let labelX = tx;
-      let labelY = ty;
-      labelX += tickLabelGapDx;
-      labelY += tickLabelGapDy;
+      let tickLabelRadius = radius + (tickLabelPosition === 'after' ? 1 : -1) * TICK_LABEL_GAP;
       if (tickLabelPosition === tickPosition && !disableTicks) {
         // Add the size of the tick if they are in the same direction.
-        labelX += tickDx;
-        labelY += tickDy;
+        tickLabelRadius += tickSize;
       }
+
+      // Compute the label position.
+      const labelX = cx + labelDx * tickLabelRadius;
+      const labelY = cy + labelDy * tickLabelRadius;
       return /*#__PURE__*/_jsxs("g", {
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_jsx("line", {
@@ -126,7 +125,7 @@ export function ChartsRotationAxis(props) {
           fontSize: 12,
           className: classes.tickLabel,
           pointerEvents: "none"
-        }, getLabelTextAnchors(dx, dy, tickLabelPosition), {
+        }, getLabelTextAnchors(labelDx, labelDy, tickLabelPosition), {
           children: formattedValue
         }))]
       }, index);

package/ChartsTooltip/useAxesTooltip.d.mts

@@ -16,7 +16,7 @@ export interface UseAxesTooltipParams {
    * The axis directions to consider.
    * If not defined, all directions are considered
    */
-  directions?: ('x' | 'y' | 'rotation')[];
+  directions?: ('x' | 'y' | 'rotation' | 'radius')[];
 }
 export interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;

package/ChartsTooltip/useAxesTooltip.d.ts

@@ -16,7 +16,7 @@ export interface UseAxesTooltipParams {
    * The axis directions to consider.
    * If not defined, all directions are considered
    */
-  directions?: ('x' | 'y' | 'rotation')[];
+  directions?: ('x' | 'y' | 'rotation' | 'radius')[];
 }
 export interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;

package/ChartsTooltip/useAxesTooltip.js

@@ -58,6 +58,7 @@ function useAxesTooltip(params) {
   const tooltipXAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipXAxes);
   const tooltipYAxes = store.use(_useChartCartesianAxis.selectorChartsInteractionTooltipYAxes);
   const tooltipRotationAxes = store.use(_useChartPolarInteraction.selectorChartsInteractionTooltipRotationAxes);
+  const tooltipRadiusAxes = store.use(_useChartPolarInteraction.selectorChartsInteractionTooltipRadiusAxes);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis
@@ -77,7 +78,7 @@ function useAxesTooltip(params) {
   } = (0, _useAxis.useRadiusAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
   const isItemVisible = store.use(_useChartVisibilityManager.selectorIsItemVisibleGetter);
-  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0 && tooltipRadiusAxes.length === 0) {
     return null;
   }
   const tooltipAxes = [];
@@ -105,6 +106,14 @@ function useAxesTooltip(params) {
       tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
     });
   }
+  if (directions === undefined || directions.includes('radius')) {
+    tooltipRadiusAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      tooltipAxes.push(defaultAxisTooltipConfig(radiusAxis[axisId], dataIndex, 'radius'));
+    });
+  }
   Object.keys(series).filter(seriesType => _composition.composableCartesianSeriesTypes.has(seriesType)).forEach(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
@@ -202,7 +211,7 @@ function useAxesTooltip(params) {
       const tooltipItemIndex = tooltipAxes.findIndex(({
         axisDirection,
         axisId
-      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId);
+      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId || axisDirection === 'radius' && axisId === providedRadiusAxisId);
       // Test if the series uses the default axis
       if (tooltipItemIndex >= 0) {
         const {

package/ChartsTooltip/useAxesTooltip.mjs

@@ -8,7 +8,7 @@ import { utcFormatter } from "./utils.mjs";
 import { useRadiusAxes, useRadiusAxis, useRotationAxes, useRotationAxis, useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.mjs";
 import { useZAxes } from "../hooks/useZAxis.mjs";
 import { selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
-import { selectorChartsInteractionTooltipRotationAxes } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
+import { selectorChartsInteractionTooltipRadiusAxes, selectorChartsInteractionTooltipRotationAxes } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
 import { isPolarSeriesType } from "../internals/isPolar.mjs";
 import { selectorIsItemVisibleGetter } from "../internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.selectors.mjs";
 import { composableCartesianSeriesTypes } from "../models/seriesType/composition.mjs";
@@ -53,6 +53,7 @@ export function useAxesTooltip(params) {
   const tooltipXAxes = store.use(selectorChartsInteractionTooltipXAxes);
   const tooltipYAxes = store.use(selectorChartsInteractionTooltipYAxes);
   const tooltipRotationAxes = store.use(selectorChartsInteractionTooltipRotationAxes);
+  const tooltipRadiusAxes = store.use(selectorChartsInteractionTooltipRadiusAxes);
   const series = useSeries();
   const {
     xAxis
@@ -72,7 +73,7 @@ export function useAxesTooltip(params) {
   } = useRadiusAxes();
   const colorProcessors = useColorProcessor();
   const isItemVisible = store.use(selectorIsItemVisibleGetter);
-  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0 && tooltipRadiusAxes.length === 0) {
     return null;
   }
   const tooltipAxes = [];
@@ -100,6 +101,14 @@ export function useAxesTooltip(params) {
       tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
     });
   }
+  if (directions === undefined || directions.includes('radius')) {
+    tooltipRadiusAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      tooltipAxes.push(defaultAxisTooltipConfig(radiusAxis[axisId], dataIndex, 'radius'));
+    });
+  }
   Object.keys(series).filter(seriesType => composableCartesianSeriesTypes.has(seriesType)).forEach(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
@@ -197,7 +206,7 @@ export function useAxesTooltip(params) {
       const tooltipItemIndex = tooltipAxes.findIndex(({
         axisDirection,
         axisId
-      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId);
+      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId || axisDirection === 'radius' && axisId === providedRadiusAxisId);
       // Test if the series uses the default axis
       if (tooltipItemIndex >= 0) {
         const {

package/RadarChart/RadarGrid/CircularRadarStripes.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CircularRadarStripes = CircularRadarStripes;
 var React = _interopRequireWildcard(require("react"));
+var _getRingPath = require("../../internals/getRingPath");
 var _jsxRuntime = require("react/jsx-runtime");
-const getPath = (center, outerRadius, innerRadius) => [`M ${center.x - outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x + outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x - outerRadius} ${center.y} Z`, `M ${center.x - innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x + innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x - innerRadius} ${center.y} Z`].join('');
-
 /**
  * @ignore - internal component.
  */
@@ -27,7 +26,7 @@ function CircularRadarStripes(props) {
     children: divisionRadius.map((r, index) => {
       const smallerRadius = divisionRadius[index - 1] ?? 0;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-        d: getPath(center, r, smallerRadius),
+        d: (0, _getRingPath.getRingPath)(center, r, smallerRadius),
         fillRule: "evenodd",
         fill: stripeColor?.(index) ?? 'none',
         fillOpacity: 0.1,

package/RadarChart/RadarGrid/CircularRadarStripes.mjs

@@ -1,7 +1,6 @@
 import * as React from 'react';
+import { getRingPath } from "../../internals/getRingPath.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-const getPath = (center, outerRadius, innerRadius) => [`M ${center.x - outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x + outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x - outerRadius} ${center.y} Z`, `M ${center.x - innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x + innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x - innerRadius} ${center.y} Z`].join('');
-
 /**
  * @ignore - internal component.
  */
@@ -20,7 +19,7 @@ export function CircularRadarStripes(props) {
     children: divisionRadius.map((r, index) => {
       const smallerRadius = divisionRadius[index - 1] ?? 0;
       return /*#__PURE__*/_jsx("path", {
-        d: getPath(center, r, smallerRadius),
+        d: getRingPath(center, r, smallerRadius),
         fillRule: "evenodd",
         fill: stripeColor?.(index) ?? 'none',
         fillOpacity: 0.1,

package/RadarChart/RadarSeriesPlot/useRadarRotationIndex.js

@@ -32,7 +32,7 @@ function useRadarRotationIndex() {
     }
     const svgPoint = (0, _getChartPoint.getChartPoint)(element, event);
     const rotation = (0, _coordinateTransformation.generateSvg2rotation)(center)(svgPoint.x, svgPoint.y);
-    const rotationIndex = (0, _getAxisIndex.getAxisIndex)(rotationAxis, rotation);
+    const rotationIndex = (0, _getAxisIndex.getRotationAxisIndex)(rotationAxis, rotation);
     return rotationIndex;
   }, [center, rotationAxis, chartsLayerContainerRef]);
   return rotationIndexGetter;

package/RadarChart/RadarSeriesPlot/useRadarRotationIndex.mjs

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
 import { getChartPoint } from "../../internals/getChartPoint.mjs";
 import { generateSvg2rotation } from "../../internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.mjs";
-import { getAxisIndex } from "../../internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.mjs";
+import { getRotationAxisIndex } from "../../internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.mjs";
 import { useStore } from "../../internals/store/useStore.mjs";
 import { useChartsLayerContainerRef } from "../../hooks/useChartsLayerContainerRef.mjs";
 import { useRotationAxis } from "../../hooks/useAxis.mjs";
@@ -25,7 +25,7 @@ export function useRadarRotationIndex() {
     }
     const svgPoint = getChartPoint(element, event);
     const rotation = generateSvg2rotation(center)(svgPoint.x, svgPoint.y);
-    const rotationIndex = getAxisIndex(rotationAxis, rotation);
+    const rotationIndex = getRotationAxisIndex(rotationAxis, rotation);
     return rotationIndex;
   }, [center, rotationAxis, chartsLayerContainerRef]);
   return rotationIndexGetter;

package/index.js

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

package/index.mjs

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

package/internals/getRingPath.d.mts

@@ -0,0 +1,16 @@
+/**
+ * Get the SVG path to display a ring (a donut shape) defined by an outer radius and an inner radius.
+ *
+ * @param center - The center of the ring.
+ * @param outerRadius - The outer radius of the ring.
+ * @param innerRadius - The inner radius of the ring.
+ * @param angles - The start and end angles of the ring in radians. If not provided, it defaults to a full circle.
+ * @returns The SVG path string to display the ring.
+ */
+export declare function getRingPath(center: {
+  x: number;
+  y: number;
+}, outerRadius: number, innerRadius: number, angles?: {
+  start: number;
+  end: number;
+} | undefined): string;

package/internals/getRingPath.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Get the SVG path to display a ring (a donut shape) defined by an outer radius and an inner radius.
+ *
+ * @param center - The center of the ring.
+ * @param outerRadius - The outer radius of the ring.
+ * @param innerRadius - The inner radius of the ring.
+ * @param angles - The start and end angles of the ring in radians. If not provided, it defaults to a full circle.
+ * @returns The SVG path string to display the ring.
+ */
+export declare function getRingPath(center: {
+  x: number;
+  y: number;
+}, outerRadius: number, innerRadius: number, angles?: {
+  start: number;
+  end: number;
+} | undefined): string;

package/internals/getRingPath.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRingPath = getRingPath;
+/**
+ * Get the SVG path to display a ring (a donut shape) defined by an outer radius and an inner radius.
+ *
+ * @param center - The center of the ring.
+ * @param outerRadius - The outer radius of the ring.
+ * @param innerRadius - The inner radius of the ring.
+ * @param angles - The start and end angles of the ring in radians. If not provided, it defaults to a full circle.
+ * @returns The SVG path string to display the ring.
+ */
+function getRingPath(center, outerRadius, innerRadius, angles) {
+  if (!angles) {
+    return [`M ${center.x - outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x + outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x - outerRadius} ${center.y} Z`, `M ${center.x - innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x + innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x - innerRadius} ${center.y} Z`].join('');
+  }
+  const isLargeArc = Math.abs(angles.end - angles.start) > Math.PI;
+  const isDirectArc = angles.end > angles.start;
+  const startOuterPoint = {
+    x: center.x + outerRadius * Math.sin(angles.start),
+    y: center.y - outerRadius * Math.cos(angles.start)
+  };
+  const endOuterPoint = {
+    x: center.x + outerRadius * Math.sin(angles.end),
+    y: center.y - outerRadius * Math.cos(angles.end)
+  };
+  const startInnerPoint = {
+    x: center.x + innerRadius * Math.sin(angles.start),
+    y: center.y - innerRadius * Math.cos(angles.start)
+  };
+  const endInnerPoint = {
+    x: center.x + innerRadius * Math.sin(angles.end),
+    y: center.y - innerRadius * Math.cos(angles.end)
+  };
+  return [`M ${startOuterPoint.x} ${startOuterPoint.y}`, `A ${outerRadius} ${outerRadius} 0 ${isLargeArc ? 1 : 0} ${isDirectArc ? 1 : 0} ${endOuterPoint.x} ${endOuterPoint.y}`, `L ${endInnerPoint.x} ${endInnerPoint.y}`, `A ${innerRadius} ${innerRadius} 0 ${isLargeArc ? 1 : 0} ${!isDirectArc ? 1 : 0} ${startInnerPoint.x} ${startInnerPoint.y} Z`].join('');
+}

package/internals/getRingPath.mjs

@@ -0,0 +1,33 @@
+/**
+ * Get the SVG path to display a ring (a donut shape) defined by an outer radius and an inner radius.
+ *
+ * @param center - The center of the ring.
+ * @param outerRadius - The outer radius of the ring.
+ * @param innerRadius - The inner radius of the ring.
+ * @param angles - The start and end angles of the ring in radians. If not provided, it defaults to a full circle.
+ * @returns The SVG path string to display the ring.
+ */
+export function getRingPath(center, outerRadius, innerRadius, angles) {
+  if (!angles) {
+    return [`M ${center.x - outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x + outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x - outerRadius} ${center.y} Z`, `M ${center.x - innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x + innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x - innerRadius} ${center.y} Z`].join('');
+  }
+  const isLargeArc = Math.abs(angles.end - angles.start) > Math.PI;
+  const isDirectArc = angles.end > angles.start;
+  const startOuterPoint = {
+    x: center.x + outerRadius * Math.sin(angles.start),
+    y: center.y - outerRadius * Math.cos(angles.start)
+  };
+  const endOuterPoint = {
+    x: center.x + outerRadius * Math.sin(angles.end),
+    y: center.y - outerRadius * Math.cos(angles.end)
+  };
+  const startInnerPoint = {
+    x: center.x + innerRadius * Math.sin(angles.start),
+    y: center.y - innerRadius * Math.cos(angles.start)
+  };
+  const endInnerPoint = {
+    x: center.x + innerRadius * Math.sin(angles.end),
+    y: center.y - innerRadius * Math.cos(angles.end)
+  };
+  return [`M ${startOuterPoint.x} ${startOuterPoint.y}`, `A ${outerRadius} ${outerRadius} 0 ${isLargeArc ? 1 : 0} ${isDirectArc ? 1 : 0} ${endOuterPoint.x} ${endOuterPoint.y}`, `L ${endInnerPoint.x} ${endInnerPoint.y}`, `A ${innerRadius} ${innerRadius} 0 ${isLargeArc ? 1 : 0} ${!isDirectArc ? 1 : 0} ${startInnerPoint.x} ${startInnerPoint.y} Z`].join('');
+}

package/internals/index.d.mts

@@ -13,7 +13,8 @@ export { useLineChartProps } from "../LineChart/useLineChartProps.mjs";
 export { useAreaPlotData } from "../LineChart/useAreaPlotData.mjs";
 export { useLinePlotData } from "../LineChart/useLinePlotData.mjs";
 export * from "../BarChart/useBarChartProps.mjs";
-export { processBarDataForPlot } from "../BarChart/useBarPlotData.mjs";
+export { processBarDataForPlot, useBarPlotData } from "../BarChart/useBarPlotData.mjs";
+export type { BorderRadiusSide, MaskData, ProcessedBarData, ProcessedBarSeriesData } from "../BarChart/types.mjs";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.mjs";
 export * from "../ChartsContainer/useChartsContainerProps.mjs";
 export * from "../ChartsDataProvider/useChartsDataProviderProps.mjs";
@@ -40,7 +41,7 @@ export * from "./plugins/featurePlugins/useChartItemClick/index.mjs";
 export * from "./plugins/utils/selectors.mjs";
 export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.mjs";
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.mjs";
-export { getAxisIndex as getPolarAxisIndex } from "./plugins/featurePlugins/useChartPolarAxis/getAxisIndex.mjs";
+export { getRotationAxisIndex } from "./plugins/featurePlugins/useChartPolarAxis/getAxisIndex.mjs";
 export * from "./store/useCharts.mjs";
 export * from "./store/useStore.mjs";
 export * from "../BarChart/BarChart.plugins.mjs";
@@ -53,6 +54,7 @@ export * from "./clampAngle.mjs";
 export * from "./getLabel.mjs";
 export * from "./legendUtils.mjs";
 export * from "./getChartPoint.mjs";
+export * from "./plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.mjs";
 export * from "./isDefined.mjs";
 export * from "./getScale.mjs";
 export * from "./getAsNumber.mjs";

package/internals/index.d.ts

@@ -13,7 +13,8 @@ export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
 export { useLinePlotData } from "../LineChart/useLinePlotData.js";
 export * from "../BarChart/useBarChartProps.js";
-export { processBarDataForPlot } from "../BarChart/useBarPlotData.js";
+export { processBarDataForPlot, useBarPlotData } from "../BarChart/useBarPlotData.js";
+export type { BorderRadiusSide, MaskData, ProcessedBarData, ProcessedBarSeriesData } from "../BarChart/types.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartsContainer/useChartsContainerProps.js";
 export * from "../ChartsDataProvider/useChartsDataProviderProps.js";
@@ -40,7 +41,7 @@ export * from "./plugins/featurePlugins/useChartItemClick/index.js";
 export * from "./plugins/utils/selectors.js";
 export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
-export { getAxisIndex as getPolarAxisIndex } from "./plugins/featurePlugins/useChartPolarAxis/getAxisIndex.js";
+export { getRotationAxisIndex } from "./plugins/featurePlugins/useChartPolarAxis/getAxisIndex.js";
 export * from "./store/useCharts.js";
 export * from "./store/useStore.js";
 export * from "../BarChart/BarChart.plugins.js";
@@ -53,6 +54,7 @@ export * from "./clampAngle.js";
 export * from "./getLabel.js";
 export * from "./legendUtils.js";
 export * from "./getChartPoint.js";
+export * from "./plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.js";
 export * from "./isDefined.js";
 export * from "./getScale.js";
 export * from "./getAsNumber.js";

package/internals/index.js

@@ -15,12 +15,13 @@ var _exportNames = {
   useAreaPlotData: true,
   useLinePlotData: true,
   processBarDataForPlot: true,
+  useBarPlotData: true,
   useRadarChartProps: true,
   useSkipAnimation: true,
   useRegisterPointerInteractions: true,
   getCartesianAxisTriggerTooltip: true,
   getCartesianAxisIndex: true,
-  getPolarAxisIndex: true,
+  getRotationAxisIndex: true,
   createCommonKeyboardFocusHandler: true,
   getSeriesColorFn: true,
   checkBarChartScaleErrors: true,
@@ -92,10 +93,10 @@ Object.defineProperty(exports, "getLineItemAtPosition", {
     return _getItemAtPosition.default;
   }
 });
-Object.defineProperty(exports, "getPolarAxisIndex", {
+Object.defineProperty(exports, "getRotationAxisIndex", {
   enumerable: true,
   get: function () {
-    return _getAxisIndex.getAxisIndex;
+    return _getAxisIndex.getRotationAxisIndex;
   }
 });
 Object.defineProperty(exports, "getSeriesColorFn", {
@@ -122,6 +123,12 @@ Object.defineProperty(exports, "useAreaPlotData", {
     return _useAreaPlotData.useAreaPlotData;
   }
 });
+Object.defineProperty(exports, "useBarPlotData", {
+  enumerable: true,
+  get: function () {
+    return _useBarPlotData.useBarPlotData;
+  }
+});
 Object.defineProperty(exports, "useChartsTooltipUtilityClasses", {
   enumerable: true,
   get: function () {
@@ -672,6 +679,18 @@ Object.keys(_getChartPoint).forEach(function (key) {
     }
   });
 });
+var _coordinateTransformation = require("./plugins/featurePlugins/useChartPolarAxis/coordinateTransformation");
+Object.keys(_coordinateTransformation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _coordinateTransformation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _coordinateTransformation[key];
+    }
+  });
+});
 var _isDefined = require("./isDefined");
 Object.keys(_isDefined).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;