@mui/x-charts 9.0.4 → 9.2.0

package/ChartsRadialAxisHighlight/ChartsRotationAxisHighlight.mjs

@@ -0,0 +1,92 @@
+'use client';
+
+import * as React from 'react';
+import { isOrdinalScale } from "../internals/scaleGuards.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
+import { selectorChartsInteractionRotationAxisIndex, selectorChartsInteractionRotationAxisValue } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
+import { ChartsRadialAxisHighlightPath } from "./ChartsRadialAxisHighlightPath.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function polarToSvg(cx, cy, radius, angle) {
+  return [cx + radius * Math.sin(angle), cy - radius * Math.cos(angle)];
+}
+
+/**
+ * @ignore - internal component.
+ */
+export default function ChartsRotationAxisHighlight(props) {
+  const {
+    type,
+    classes
+  } = props;
+  const store = useStore();
+  const {
+    cx,
+    cy
+  } = store.use(selectorChartPolarCenter);
+  const {
+    axis: rotationAxes,
+    axisIds: rotationAxisIds
+  } = store.use(selectorChartRotationAxis);
+  const {
+    axis: radiusAxes,
+    axisIds: radiusAxisIds
+  } = store.use(selectorChartRadiusAxis);
+  const rotationIndex = store.use(selectorChartsInteractionRotationAxisIndex);
+  const rotationValue = store.use(selectorChartsInteractionRotationAxisValue);
+  if (rotationIndex === null || rotationIndex === -1) {
+    return null;
+  }
+  const rotationAxisId = rotationAxisIds[0];
+  const radiusAxisId = radiusAxisIds[0];
+  if (rotationAxisId === undefined || radiusAxisId === undefined) {
+    return null;
+  }
+  const rotationAxis = rotationAxes[rotationAxisId];
+  const radiusAxis = radiusAxes[radiusAxisId];
+  const rotationScale = rotationAxis.scale;
+  const radiusScale = radiusAxis.scale;
+  const innerRadius = radiusScale.range()[0];
+  const outerRadius = radiusScale.range()[1];
+  const angle = rotationScale(rotationValue);
+  if (angle === undefined) {
+    return null;
+  }
+  if (type === 'band') {
+    if (!isOrdinalScale(rotationScale)) {
+      return null;
+    }
+    const step = rotationScale.step();
+    const bandwidth = rotationScale.bandwidth();
+    // For point scale: bandwidth = 0, the band is centered on the value.
+    // For band scale: scale(value) returns the band start, the band size is bandwidth.
+    const startAngle = angle - (step - bandwidth) / 2;
+    const endAngle = startAngle + step;
+    const [x1Outer, y1Outer] = polarToSvg(cx, cy, outerRadius, startAngle);
+    const [x2Outer, y2Outer] = polarToSvg(cx, cy, outerRadius, endAngle);
+    const [x1Inner, y1Inner] = polarToSvg(cx, cy, innerRadius, startAngle);
+    const [x2Inner, y2Inner] = polarToSvg(cx, cy, innerRadius, endAngle);
+    const isLargeArc = Math.abs(endAngle - startAngle) >= Math.PI;
+    const innerArc = innerRadius > 0 ? `L ${x2Inner} ${y2Inner} A ${innerRadius} ${innerRadius} 0 ${isLargeArc ? 1 : 0} 0 ${x1Inner} ${y1Inner}` : `L ${cx} ${cy}`;
+    return /*#__PURE__*/_jsx(ChartsRadialAxisHighlightPath, {
+      d: `M ${x1Outer} ${y1Outer} A ${outerRadius} ${outerRadius} 0 ${isLargeArc ? 1 : 0} 1 ${x2Outer} ${y2Outer} ${innerArc} Z`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
+      }
+    });
+  }
+  if (type === 'line') {
+    const lineAngle = isOrdinalScale(rotationScale) ? angle + rotationScale.bandwidth() / 2 : angle;
+    const [x1, y1] = polarToSvg(cx, cy, innerRadius, lineAngle);
+    const [x2, y2] = polarToSvg(cx, cy, outerRadius, lineAngle);
+    return /*#__PURE__*/_jsx(ChartsRadialAxisHighlightPath, {
+      d: `M ${x1} ${y1} L ${x2} ${y2}`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
+      }
+    });
+  }
+  return null;
+}

package/ChartsRadialAxisHighlight/chartsRadialAxisHighlightClasses.d.mts

@@ -0,0 +1,7 @@
+export interface ChartsRadialAxisHighlightClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type ChartsRadialAxisHighlightClassKey = keyof ChartsRadialAxisHighlightClasses;
+export declare function getRadialAxisHighlightUtilityClass(slot: string): string;
+export declare const chartsRadialAxisHighlightClasses: ChartsRadialAxisHighlightClasses;

package/ChartsRadialAxisHighlight/chartsRadialAxisHighlightClasses.d.ts

@@ -0,0 +1,7 @@
+export interface ChartsRadialAxisHighlightClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type ChartsRadialAxisHighlightClassKey = keyof ChartsRadialAxisHighlightClasses;
+export declare function getRadialAxisHighlightUtilityClass(slot: string): string;
+export declare const chartsRadialAxisHighlightClasses: ChartsRadialAxisHighlightClasses;

package/ChartsRadialAxisHighlight/chartsRadialAxisHighlightClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartsRadialAxisHighlightClasses = void 0;
+exports.getRadialAxisHighlightUtilityClass = getRadialAxisHighlightUtilityClass;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getRadialAxisHighlightUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsRadialAxisHighlight', slot);
+}
+const chartsRadialAxisHighlightClasses = exports.chartsRadialAxisHighlightClasses = (0, _generateUtilityClasses.default)('MuiChartsRadialAxisHighlight', ['root']);

package/ChartsRadialAxisHighlight/chartsRadialAxisHighlightClasses.mjs

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getRadialAxisHighlightUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsRadialAxisHighlight', slot);
+}
+export const chartsRadialAxisHighlightClasses = generateUtilityClasses('MuiChartsRadialAxisHighlight', ['root']);

package/ChartsRadialAxisHighlight/index.d.mts

@@ -0,0 +1,5 @@
+export { ChartsRadialAxisHighlight as Unstable_ChartsRadialAxisHighlight } from "./ChartsRadialAxisHighlight.mjs";
+export { chartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.mjs";
+export type { ChartsRadialAxisHighlightClasses, ChartsRadialAxisHighlightClassKey } from "./chartsRadialAxisHighlightClasses.mjs";
+export * from "./ChartsRadialAxisHighlight.types.mjs";
+export * from "./ChartsRadialAxisHighlightPath.mjs";

package/ChartsRadialAxisHighlight/index.d.ts

@@ -0,0 +1,5 @@
+export { ChartsRadialAxisHighlight as Unstable_ChartsRadialAxisHighlight } from "./ChartsRadialAxisHighlight.js";
+export { chartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.js";
+export type { ChartsRadialAxisHighlightClasses, ChartsRadialAxisHighlightClassKey } from "./chartsRadialAxisHighlightClasses.js";
+export * from "./ChartsRadialAxisHighlight.types.js";
+export * from "./ChartsRadialAxisHighlightPath.js";

package/ChartsRadialAxisHighlight/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Unstable_ChartsRadialAxisHighlight: true,
+  chartsRadialAxisHighlightClasses: true
+};
+Object.defineProperty(exports, "Unstable_ChartsRadialAxisHighlight", {
+  enumerable: true,
+  get: function () {
+    return _ChartsRadialAxisHighlight.ChartsRadialAxisHighlight;
+  }
+});
+Object.defineProperty(exports, "chartsRadialAxisHighlightClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsRadialAxisHighlightClasses.chartsRadialAxisHighlightClasses;
+  }
+});
+var _ChartsRadialAxisHighlight = require("./ChartsRadialAxisHighlight");
+var _chartsRadialAxisHighlightClasses = require("./chartsRadialAxisHighlightClasses");
+var _ChartsRadialAxisHighlight2 = require("./ChartsRadialAxisHighlight.types");
+Object.keys(_ChartsRadialAxisHighlight2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsRadialAxisHighlight2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsRadialAxisHighlight2[key];
+    }
+  });
+});
+var _ChartsRadialAxisHighlightPath = require("./ChartsRadialAxisHighlightPath");
+Object.keys(_ChartsRadialAxisHighlightPath).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsRadialAxisHighlightPath[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsRadialAxisHighlightPath[key];
+    }
+  });
+});

package/ChartsRadialAxisHighlight/index.mjs

@@ -0,0 +1,4 @@
+export { ChartsRadialAxisHighlight as Unstable_ChartsRadialAxisHighlight } from "./ChartsRadialAxisHighlight.mjs";
+export { chartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.mjs";
+export * from "./ChartsRadialAxisHighlight.types.mjs";
+export * from "./ChartsRadialAxisHighlightPath.mjs";

package/ChartsRadiusAxis/ChartsRadiusAxis.d.mts

@@ -1,48 +1,2 @@
-import type { AxisId } from "../models/axis.mjs";
-import { type ChartsRadialAxisClasses } from "./chartsRadiusAxisClasses.mjs";
-export interface ChartsRadiusAxisProps {
-  /**
-   * Id of the radius axis to render.
-   * If not provided, it will use the first defined radius axis.
-   */
-  axisId?: AxisId;
-  /**
-   * The position of the axis in polar coordinates.
-   * It can be 'start', 'end', or a specific angle in degrees.
-   * @default 'start'
-   */
-  position?: 'start' | 'end' | number;
-  /**
-   * If `true`, the axis line is not rendered.
-   * @default false
-   */
-  disableLine?: boolean;
-  /**
-   * If `true`, the ticks are not rendered.
-   * @default false
-   */
-  disableTicks?: boolean;
-  /**
-   * The size (in pixels) of the tick marks.
-   * @default 6
-   */
-  tickSize?: number;
-  /**
-   * Set the position of the tick labels relative to the axis line.
-   * The before/after is defined based on clockwise direction.
-   * @default 'after'
-   */
-  tickLabelPosition?: 'center' | 'after' | 'before';
-  /**
-   * Set the position of the tick relative to the axis line.
-   * The before/after is defined based on clockwise direction.
-   * @default 'after'
-   */
-  tickPosition?: 'after' | 'before';
-  /**
-   * A CSS class name applied to the root element.
-   */
-  className?: string;
-  classes?: Partial<ChartsRadialAxisClasses>;
-}
+import type { ChartsRadiusAxisProps } from "../models/axis.mjs";
 export declare function ChartsRadiusAxis(props: ChartsRadiusAxisProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRadiusAxis/ChartsRadiusAxis.d.ts

@@ -1,48 +1,2 @@
-import type { AxisId } from "../models/axis.js";
-import { type ChartsRadialAxisClasses } from "./chartsRadiusAxisClasses.js";
-export interface ChartsRadiusAxisProps {
-  /**
-   * Id of the radius axis to render.
-   * If not provided, it will use the first defined radius axis.
-   */
-  axisId?: AxisId;
-  /**
-   * The position of the axis in polar coordinates.
-   * It can be 'start', 'end', or a specific angle in degrees.
-   * @default 'start'
-   */
-  position?: 'start' | 'end' | number;
-  /**
-   * If `true`, the axis line is not rendered.
-   * @default false
-   */
-  disableLine?: boolean;
-  /**
-   * If `true`, the ticks are not rendered.
-   * @default false
-   */
-  disableTicks?: boolean;
-  /**
-   * The size (in pixels) of the tick marks.
-   * @default 6
-   */
-  tickSize?: number;
-  /**
-   * Set the position of the tick labels relative to the axis line.
-   * The before/after is defined based on clockwise direction.
-   * @default 'after'
-   */
-  tickLabelPosition?: 'center' | 'after' | 'before';
-  /**
-   * Set the position of the tick relative to the axis line.
-   * The before/after is defined based on clockwise direction.
-   * @default 'after'
-   */
-  tickPosition?: 'after' | 'before';
-  /**
-   * A CSS class name applied to the root element.
-   */
-  className?: string;
-  classes?: Partial<ChartsRadialAxisClasses>;
-}
+import type { ChartsRadiusAxisProps } from "../models/axis.js";
 export declare function ChartsRadiusAxis(props: ChartsRadiusAxisProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRadiusAxis/ChartsRadiusAxis.js

@@ -17,8 +17,7 @@ var _chartsRadiusAxisClasses = require("./chartsRadiusAxisClasses");
 var _createGetLabelTextAnchors = require("./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);
 
 /**
@@ -40,17 +39,22 @@ function getAxisAngleInRadians(position, rotationAxis) {
   return 0;
 }
 function ChartsRadiusAxis(props) {
+  const radiusAxis = (0, _useAxis.useRadiusAxis)(props.axisId);
+  const settings = (0, _extends2.default)({}, radiusAxis, props);
   const {
-    axisId,
     position = 'start',
     disableLine,
     disableTicks,
-    tickLabelPosition = 'after',
-    tickPosition = 'after',
+    tickLabelPosition: tickLabelPositionProp = 'auto',
+    tickPosition = position === 'start' ? 'before' : 'after',
     tickSize = 6,
     className,
     classes: classesProp
-  } = props;
+  } = settings;
+  let tickLabelPosition = tickLabelPositionProp;
+  if (tickLabelPosition === 'auto') {
+    tickLabelPosition = position === 'start' ? 'before' : 'after';
+  }
   const isCentered = tickLabelPosition === 'center';
   const classes = (0, _chartsRadiusAxisClasses.useUtilityClasses)({
     classes: classesProp,
@@ -64,7 +68,6 @@ function ChartsRadiusAxis(props) {
     cx,
     cy
   } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
-  const radiusAxis = (0, _useAxis.useRadiusAxis)(axisId);
   const rotationAxis = (0, _useAxis.useRotationAxis)();
   const ticks = (0, _useTicks.useTicks)({
     scale: radiusAxis.scale,
@@ -74,7 +77,7 @@ function ChartsRadiusAxis(props) {
     valueFormatter: radiusAxis?.valueFormatter,
     direction: 'radius'
   });
-  if (!radiusAxis) {
+  if (!radiusAxis || settings.position === 'none') {
     return null;
   }
   const angle = getAxisAngleInRadians(position, rotationAxis);
@@ -102,17 +105,18 @@ function ChartsRadiusAxis(props) {
       className: classes.line
     }), ticks.map(({
       offset: radius,
+      labelOffset,
       formattedValue
     }, index) => {
       if (!formattedValue) {
         return null;
       }
-      const tx = cx + dx * radius;
-      const ty = cy + dy * radius;
+      const tickX = cx + dx * radius;
+      const tickY = cy + dy * radius;
 
       // Compute the label position.
-      let labelX = tx;
-      let labelY = ty;
+      let labelX = cx + dx * (radius + labelOffset);
+      let labelY = cy + dy * (radius + labelOffset);
       if (tickLabelGap !== 0) {
         labelX += tickLabelGapDx;
         labelY += tickLabelGapDy;
@@ -125,10 +129,10 @@ function ChartsRadiusAxis(props) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
-          x1: tx,
-          y1: ty,
-          x2: tx + tickDx,
-          y2: ty + tickDy,
+          x1: tickX,
+          y1: tickY,
+          x2: tickX + tickDx,
+          y2: tickY + tickDy,
           stroke: stroke,
           className: classes.tick
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({

package/ChartsRadiusAxis/ChartsRadiusAxis.mjs

@@ -10,8 +10,9 @@ import { selectorChartPolarCenter } from "../internals/plugins/featurePlugins/us
 import { useUtilityClasses } from "./chartsRadiusAxisClasses.mjs";
 import { createGetLabelTextAnchors } from "./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);
 
@@ -34,17 +35,22 @@ function getAxisAngleInRadians(position, rotationAxis) {
   return 0;
 }
 export function ChartsRadiusAxis(props) {
+  const radiusAxis = useRadiusAxis(props.axisId);
+  const settings = _extends({}, radiusAxis, props);
   const {
-    axisId,
     position = 'start',
     disableLine,
     disableTicks,
-    tickLabelPosition = 'after',
-    tickPosition = 'after',
+    tickLabelPosition: tickLabelPositionProp = 'auto',
+    tickPosition = position === 'start' ? 'before' : 'after',
     tickSize = 6,
     className,
     classes: classesProp
-  } = props;
+  } = settings;
+  let tickLabelPosition = tickLabelPositionProp;
+  if (tickLabelPosition === 'auto') {
+    tickLabelPosition = position === 'start' ? 'before' : 'after';
+  }
   const isCentered = tickLabelPosition === 'center';
   const classes = useUtilityClasses({
     classes: classesProp,
@@ -58,7 +64,6 @@ export function ChartsRadiusAxis(props) {
     cx,
     cy
   } = store.use(selectorChartPolarCenter);
-  const radiusAxis = useRadiusAxis(axisId);
   const rotationAxis = useRotationAxis();
   const ticks = useTicks({
     scale: radiusAxis.scale,
@@ -68,7 +73,7 @@ export function ChartsRadiusAxis(props) {
     valueFormatter: radiusAxis?.valueFormatter,
     direction: 'radius'
   });
-  if (!radiusAxis) {
+  if (!radiusAxis || settings.position === 'none') {
     return null;
   }
   const angle = getAxisAngleInRadians(position, rotationAxis);
@@ -96,17 +101,18 @@ export function ChartsRadiusAxis(props) {
       className: classes.line
     }), ticks.map(({
       offset: radius,
+      labelOffset,
       formattedValue
     }, index) => {
       if (!formattedValue) {
         return null;
       }
-      const tx = cx + dx * radius;
-      const ty = cy + dy * radius;
+      const tickX = cx + dx * radius;
+      const tickY = cy + dy * radius;
 
       // Compute the label position.
-      let labelX = tx;
-      let labelY = ty;
+      let labelX = cx + dx * (radius + labelOffset);
+      let labelY = cy + dy * (radius + labelOffset);
       if (tickLabelGap !== 0) {
         labelX += tickLabelGapDx;
         labelY += tickLabelGapDy;
@@ -119,10 +125,10 @@ export function ChartsRadiusAxis(props) {
       return /*#__PURE__*/_jsxs("g", {
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_jsx("line", {
-          x1: tx,
-          y1: ty,
-          x2: tx + tickDx,
-          y2: ty + tickDy,
+          x1: tickX,
+          y1: tickY,
+          x2: tickX + tickDx,
+          y2: tickY + tickDy,
           stroke: stroke,
           className: classes.tick
         }), /*#__PURE__*/_jsx("text", _extends({

package/ChartsRadiusAxis/index.d.mts

@@ -1,3 +1,4 @@
-export { type ChartsRadiusAxisProps, ChartsRadiusAxis as Unstable_ChartsRadiusAxis } from "./ChartsRadiusAxis.mjs";
+export { ChartsRadiusAxis as Unstable_ChartsRadiusAxis } from "./ChartsRadiusAxis.mjs";
 export { chartsRadialAxisClasses } from "./chartsRadiusAxisClasses.mjs";
-export type { ChartsRadialAxisClasses, ChartsRadialAxisClassKey } from "./chartsRadiusAxisClasses.mjs";
+export type { ChartsRadialAxisClasses, ChartsRadialAxisClassKey } from "./chartsRadiusAxisClasses.mjs";
+export { type ChartsRadiusAxisProps } from "../models/axis.mjs";

package/ChartsRadiusAxis/index.d.ts

@@ -1,3 +1,4 @@
-export { type ChartsRadiusAxisProps, ChartsRadiusAxis as Unstable_ChartsRadiusAxis } from "./ChartsRadiusAxis.js";
+export { ChartsRadiusAxis as Unstable_ChartsRadiusAxis } from "./ChartsRadiusAxis.js";
 export { chartsRadialAxisClasses } from "./chartsRadiusAxisClasses.js";
-export type { ChartsRadialAxisClasses, ChartsRadialAxisClassKey } from "./chartsRadiusAxisClasses.js";
+export type { ChartsRadialAxisClasses, ChartsRadialAxisClassKey } from "./chartsRadiusAxisClasses.js";
+export { type ChartsRadiusAxisProps } from "../models/axis.js";

package/ChartsRadiusAxis/index.mjs

@@ -1,2 +1,4 @@
 export { ChartsRadiusAxis as Unstable_ChartsRadiusAxis } from "./ChartsRadiusAxis.mjs";
-export { chartsRadialAxisClasses } from "./chartsRadiusAxisClasses.mjs";
+export { chartsRadialAxisClasses } from "./chartsRadiusAxisClasses.mjs";
+
+// Re-export types

package/ChartsRotationAxis/ChartsRotationAxis.d.mts

@@ -1,48 +1,2 @@
-import type { AxisId } from "../models/axis.mjs";
-import { type ChartsRadialAxisClasses } from "./chartsRotationAxisClasses.mjs";
-export interface ChartsRotationAxisProps {
-  /**
-   * Id of the rotation axis to render.
-   * If not provided, it will use the first defined rotation axis.
-   */
-  axisId?: AxisId;
-  /**
-   * If `true`, the axis line is not rendered.
-   * @default false
-   */
-  disableLine?: boolean;
-  /**
-   * If `true`, the ticks are not rendered.
-   * @default false
-   */
-  disableTicks?: boolean;
-  /**
-   * The position of the rotation axis.
-   * It can be 'inside' or 'outside'.
-   * @default 'outside'
-   */
-  position?: 'inside' | 'outside';
-  /**
-   * The size (in pixels) of the tick marks.
-   * @default 6
-   */
-  tickSize?: number;
-  /**
-   * Set the position of the tick labels relative to the axis line.
-   * `'after'` places them outside the arc, `'before'` inside.
-   * @default position === 'outside' ? 'after' : 'before'
-   */
-  tickLabelPosition?: 'after' | 'before';
-  /**
-   * Set the position of the tick relative to the axis line.
-   * `'after'` places them outside the arc, `'before'` inside.
-   * @default position === 'outside' ? 'after' : 'before'
-   */
-  tickPosition?: 'after' | 'before';
-  /**
-   * A CSS class name applied to the root element.
-   */
-  className?: string;
-  classes?: Partial<ChartsRadialAxisClasses>;
-}
+import type { ChartsRotationAxisProps } from "../models/axis.mjs";
 export declare function ChartsRotationAxis(props: ChartsRotationAxisProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRotationAxis/ChartsRotationAxis.d.ts

@@ -1,48 +1,2 @@
-import type { AxisId } from "../models/axis.js";
-import { type ChartsRadialAxisClasses } from "./chartsRotationAxisClasses.js";
-export interface ChartsRotationAxisProps {
-  /**
-   * Id of the rotation axis to render.
-   * If not provided, it will use the first defined rotation axis.
-   */
-  axisId?: AxisId;
-  /**
-   * If `true`, the axis line is not rendered.
-   * @default false
-   */
-  disableLine?: boolean;
-  /**
-   * If `true`, the ticks are not rendered.
-   * @default false
-   */
-  disableTicks?: boolean;
-  /**
-   * The position of the rotation axis.
-   * It can be 'inside' or 'outside'.
-   * @default 'outside'
-   */
-  position?: 'inside' | 'outside';
-  /**
-   * The size (in pixels) of the tick marks.
-   * @default 6
-   */
-  tickSize?: number;
-  /**
-   * Set the position of the tick labels relative to the axis line.
-   * `'after'` places them outside the arc, `'before'` inside.
-   * @default position === 'outside' ? 'after' : 'before'
-   */
-  tickLabelPosition?: 'after' | 'before';
-  /**
-   * Set the position of the tick relative to the axis line.
-   * `'after'` places them outside the arc, `'before'` inside.
-   * @default position === 'outside' ? 'after' : 'before'
-   */
-  tickPosition?: 'after' | 'before';
-  /**
-   * A CSS class name applied to the root element.
-   */
-  className?: string;
-  classes?: Partial<ChartsRadialAxisClasses>;
-}
+import type { ChartsRotationAxisProps } from "../models/axis.js";
 export declare function ChartsRotationAxis(props: ChartsRotationAxisProps): import("react/jsx-runtime").JSX.Element | null;