@mui/x-charts 9.0.4 → 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/ChartsRotationAxis/index.d.mts

@@ -1,2 +1,3 @@
-export { type ChartsRotationAxisProps, ChartsRotationAxis as Unstable_ChartsRotationAxis } from "./ChartsRotationAxis.mjs";
-export { type ChartsRadialAxisClasses, type ChartsRadialAxisClassKey, chartsRadialAxisClasses } from "./chartsRotationAxisClasses.mjs";
+export { ChartsRotationAxis as Unstable_ChartsRotationAxis } from "./ChartsRotationAxis.mjs";
+export { type ChartsRadialAxisClasses, type ChartsRadialAxisClassKey, chartsRadialAxisClasses } from "./chartsRotationAxisClasses.mjs";
+export { type ChartsRotationAxisProps } from "../models/axis.mjs";

package/ChartsRotationAxis/index.d.ts

@@ -1,2 +1,3 @@
-export { type ChartsRotationAxisProps, ChartsRotationAxis as Unstable_ChartsRotationAxis } from "./ChartsRotationAxis.js";
-export { type ChartsRadialAxisClasses, type ChartsRadialAxisClassKey, chartsRadialAxisClasses } from "./chartsRotationAxisClasses.js";
+export { ChartsRotationAxis as Unstable_ChartsRotationAxis } from "./ChartsRotationAxis.js";
+export { type ChartsRadialAxisClasses, type ChartsRadialAxisClassKey, chartsRadialAxisClasses } from "./chartsRotationAxisClasses.js";
+export { type ChartsRotationAxisProps } from "../models/axis.js";

package/ChartsRotationAxis/index.mjs

@@ -1,2 +1,4 @@
 export { ChartsRotationAxis as Unstable_ChartsRotationAxis } from "./ChartsRotationAxis.mjs";
-export { chartsRadialAxisClasses } from "./chartsRotationAxisClasses.mjs";
+export { chartsRadialAxisClasses } from "./chartsRotationAxisClasses.mjs";
+
+// Re-export types

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 {