@mui/x-charts 8.0.0-beta.1 → 8.0.0-beta.3

package/modern/LineChart/CircleMarkElement.js

@@ -5,15 +5,23 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTheme } from '@mui/material/styles';
-import { animated, useSpringValue } from '@react-spring/web';
+import { styled, useTheme } from '@mui/material/styles';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
-import { useUtilityClasses } from "./markElementClasses.js";
+import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
 import { useSelector } from "../internals/store/useSelector.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const Circle = styled('circle')({
+  [`&.${markElementClasses.animate}`]: {
+    transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+    transitionProperty: 'cx, cy',
+    transitionTimingFunction: ANIMATION_TIMING_FUNCTION
+  }
+});
+
 /**
  * The line mark element that only render circle for performance improvement.
  *
@@ -51,33 +59,19 @@ function CircleMarkElement(props) {
     seriesId: id
   });
   const store = useStore();
-  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
-  const cx = useSpringValue(x, {
-    immediate: skipAnimation
-  });
-  const cy = useSpringValue(y, {
-    immediate: skipAnimation
-  });
-  React.useEffect(() => {
-    cy.start(y, {
-      immediate: skipAnimation
-    });
-    cx.start(x, {
-      immediate: skipAnimation
-    });
-  }, [cy, y, cx, x, skipAnimation]);
+  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisIdentifier?.index === dataIndex || isHighlighted,
+    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
     isFaded,
-    color
+    color,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(animated.circle, _extends({}, other, {
-    // @ts-expect-error
-    cx: cx,
-    cy: cy,
+  return /*#__PURE__*/_jsx(Circle, _extends({}, other, {
+    cx: x,
+    cy: y,
     r: 5,
     fill: (theme.vars || theme).palette.background.paper,
     stroke: color,

package/modern/LineChart/LineChart.js

@@ -238,6 +238,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -293,6 +294,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),

package/modern/LineChart/LineHighlightPlot.js

@@ -13,7 +13,7 @@ import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import getColor from "./seriesConfig/getColor.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -45,9 +45,8 @@ function LineHighlightPlot(props) {
     instance
   } = useChartContext();
   const store = useStore();
-  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
-  const highlightedIndex = xAxisIdentifier?.index;
-  if (highlightedIndex === undefined) {
+  const highlightedIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
+  if (highlightedIndex === null) {
     return null;
   }
   if (seriesData === undefined) {

package/modern/LineChart/MarkElement.js

@@ -7,16 +7,16 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
-import { animated, to, useSpringValue } from '@react-spring/web';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { getSymbol } from "../internals/getSymbol.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
-import { useUtilityClasses } from "./markElementClasses.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const MarkElementPath = styled(animated.path, {
+const MarkElementPath = styled('path', {
   name: 'MuiMarkElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -26,7 +26,12 @@ const MarkElementPath = styled(animated.path, {
 }) => ({
   fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
-  strokeWidth: 2
+  strokeWidth: 2,
+  [`&.${markElementClasses.animate}`]: {
+    transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+    transitionProperty: 'transform, transform-origin',
+    transitionTimingFunction: ANIMATION_TIMING_FUNCTION
+  }
 }));
 /**
  * Demos:
@@ -63,37 +68,22 @@ function MarkElement(props) {
     seriesId: id
   });
   const store = useStore();
-  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
-  const cx = useSpringValue(x, {
-    immediate: skipAnimation
-  });
-  const cy = useSpringValue(y, {
-    immediate: skipAnimation
-  });
-  React.useEffect(() => {
-    cy.start(y, {
-      immediate: skipAnimation
-    });
-    cx.start(x, {
-      immediate: skipAnimation
-    });
-  }, [cy, y, cx, x, skipAnimation]);
+  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisIdentifier?.index === dataIndex || isHighlighted,
+    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
     isFaded,
-    color
+    color,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
     style: {
-      transform: to([cx, cy], (pX, pY) => `translate(${pX}px, ${pY}px)`),
-      transformOrigin: to([cx, cy], (pX, pY) => `${pX}px ${pY}px`)
+      transform: `translate(${x}px, ${y}px)`,
+      transformOrigin: `${x}px ${y}px`
     },
-    ownerState: ownerState
-    // @ts-expect-error
-    ,
+    ownerState: ownerState,
     className: classes.root,
     d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
     onClick: onClick,
@@ -117,7 +107,6 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
   shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
   /**
    * If `true`, animations are skipped.
-   * @default false
    */
   skipAnimation: PropTypes.bool
 } : void 0;

package/modern/LineChart/MarkPlot.js

@@ -164,7 +164,6 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   onItemClick: PropTypes.func,
   /**
    * If `true`, animations are skipped.
-   * @default false
    */
   skipAnimation: PropTypes.bool,
   /**

package/modern/LineChart/markElementClasses.d.ts

@@ -6,6 +6,8 @@ export interface MarkElementClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
+  /** Styles applied to the root element when animation is not skipped. */
+  animate: string;
 }
 export type MarkElementClassKey = keyof MarkElementClasses;
 export interface MarkElementOwnerState {
@@ -14,6 +16,7 @@ export interface MarkElementOwnerState {
   isFaded: boolean;
   isHighlighted: boolean;
   classes?: Partial<MarkElementClasses>;
+  skipAnimation?: boolean;
 }
 export declare function getMarkElementUtilityClass(slot: string): string;
 export declare const markElementClasses: MarkElementClasses;

package/modern/LineChart/markElementClasses.js

@@ -4,16 +4,17 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getMarkElementUtilityClass(slot) {
   return generateUtilityClass('MuiMarkElement', slot);
 }
-export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
+export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded', 'animate']);
 export const useUtilityClasses = ownerState => {
   const {
     classes,
     id,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded', skipAnimation ? undefined : 'animate']
   };
   return composeClasses(slots, getMarkElementUtilityClass, classes);
 };

package/modern/LineChart/seriesConfig/index.js

@@ -2,13 +2,14 @@ import { getExtremumX, getExtremumY } from "./extremums.js";
 import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
 import legendGetter from "./legend.js";
-import tooltipGetter from "./tooltip.js";
+import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 export const seriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
   legendGetter,
   tooltipGetter,
+  axisTooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues

package/modern/LineChart/seriesConfig/tooltip.d.ts

@@ -1,3 +1,4 @@
-import type { TooltipGetter } from '../../internals/plugins/models';
+import type { AxisTooltipGetter, TooltipGetter } from '../../internals/plugins/models';
 declare const tooltipGetter: TooltipGetter<'line'>;
+export declare const axisTooltipGetter: AxisTooltipGetter<'line', 'x' | 'y'>;
 export default tooltipGetter;

package/modern/LineChart/seriesConfig/tooltip.js

@@ -22,4 +22,10 @@ const tooltipGetter = params => {
     markType: series.labelMarkType
   };
 };
+export const axisTooltipGetter = series => {
+  return Object.values(series).map(s => ({
+    direction: 'x',
+    axisId: s.xAxisId
+  }));
+};
 export default tooltipGetter;

package/modern/LineChart/useLineChartProps.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsClipPathProps } from "../ChartsClipPath/index.js";
@@ -35,5 +36,5 @@ export declare const useLineChartProps: (props: LineChartProps) => {
   axisHighlightProps: ChartsAxisHighlightProps;
   lineHighlightPlotProps: LineHighlightPlotProps;
   legendProps: ChartsLegendSlotExtension;
-  children: import("react").ReactNode;
+  children: React.ReactNode;
 };

package/modern/LineChart/useLineChartProps.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { LINE_CHART_PLUGINS } from "./LineChart.plugins.js";
@@ -43,11 +44,12 @@ export const useLineChartProps = props => {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const clipPathId = `${id}-clip-path`;
+  const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
+    disableHighlight: !!disableLineItemHighlight,
+    type: 'line'
+  }, s)), [disableLineItemHighlight, series]);
   const chartContainerProps = _extends({}, other, {
-    series: series.map(s => _extends({
-      disableHighlight: !!disableLineItemHighlight,
-      type: 'line'
-    }, s)),
+    series: seriesWithDefault,
     width,
     height,
     margin,

package/modern/PieChart/PieArc.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SpringValue } from '@react-spring/web';
 import { PieItemId } from "../models/index.js";
 export interface PieArcClasses {
   /** Styles applied to the root element. */
@@ -21,16 +20,25 @@ interface PieArcOwnerState {
 export declare function getPieArcUtilityClass(slot: string): string;
 export declare const pieArcClasses: PieArcClasses;
 export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & PieArcOwnerState & {
-  cornerRadius: SpringValue<number>;
-  endAngle: SpringValue<number>;
-  innerRadius: SpringValue<number>;
+  cornerRadius: number;
+  endAngle: number;
+  innerRadius: number;
   onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
-  outerRadius: SpringValue<number>;
-  paddingAngle: SpringValue<number>;
-  startAngle: SpringValue<number>;
+  outerRadius: number;
+  paddingAngle: number;
+  startAngle: number;
+  /** @default false */
+  skipAnimation: boolean;
 };
-declare function PieArc(props: PieArcProps): React.JSX.Element;
-declare namespace PieArc {
-  var propTypes: any;
-}
+declare const PieArc: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGPathElement>, "ref" | "id"> & PieArcOwnerState & {
+  cornerRadius: number;
+  endAngle: number;
+  innerRadius: number;
+  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+  outerRadius: number;
+  paddingAngle: number;
+  startAngle: number;
+  /** @default false */
+  skipAnimation: boolean;
+} & React.RefAttributes<SVGPathElement>>;
 export { PieArc };

package/modern/PieChart/PieArc.js

@@ -2,15 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle"];
+const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
-import { animated, to } from '@react-spring/web';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { useAnimatePieArc } from "../hooks/index.js";
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcUtilityClass(slot) {
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPieArcUtilityClass, classes);
 };
-const PieArcRoot = styled(animated.path, {
+const PieArcRoot = styled('path', {
   name: 'MuiPieArc',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.arc
@@ -39,23 +39,26 @@ const PieArcRoot = styled(animated.path, {
 }) => ({
   // Got to move stroke to an element prop instead of style.
   stroke: (theme.vars || theme).palette.background.paper,
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, filter 0.2s ease-in'
+  transitionProperty: 'opacity, fill, filter',
+  transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+  transitionTimingFunction: ANIMATION_TIMING_FUNCTION
 }));
-function PieArc(props) {
+const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
   const {
       classes: innerClasses,
       color,
-      cornerRadius,
       dataIndex,
-      endAngle,
       id,
-      innerRadius,
       isFaded,
       isHighlighted,
       onClick,
+      cornerRadius,
+      startAngle,
+      endAngle,
+      innerRadius,
       outerRadius,
       paddingAngle,
-      startAngle
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -72,17 +75,17 @@ function PieArc(props) {
     seriesId: id,
     dataIndex
   });
+  const animatedProps = useAnimatePieArc({
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    skipAnimation,
+    ref
+  });
   return /*#__PURE__*/_jsx(PieArcRoot, _extends({
-    d: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], (sA, eA, pA, iR, oR, cR) => d3Arc().cornerRadius(cR)({
-      padAngle: pA,
-      startAngle: sA,
-      endAngle: eA,
-      innerRadius: iR,
-      outerRadius: oR
-    })),
-    visibility: to([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible')
-    // @ts-expect-error
-    ,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
@@ -92,17 +95,27 @@ function PieArc(props) {
     filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
     strokeWidth: 1,
     strokeLinejoin: "round"
-  }, other, interactionProps));
-}
+  }, other, interactionProps, animatedProps));
+});
 process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
+  cornerRadius: PropTypes.number.isRequired,
   dataIndex: PropTypes.number.isRequired,
+  endAngle: PropTypes.number.isRequired,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  innerRadius: PropTypes.number.isRequired,
   isFaded: PropTypes.bool.isRequired,
-  isHighlighted: PropTypes.bool.isRequired
+  isHighlighted: PropTypes.bool.isRequired,
+  outerRadius: PropTypes.number.isRequired,
+  paddingAngle: PropTypes.number.isRequired,
+  /**
+   * @default false
+   */
+  skipAnimation: PropTypes.bool.isRequired,
+  startAngle: PropTypes.number.isRequired
 } : void 0;
 export { PieArc };

package/modern/PieChart/PieArcLabel.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SpringValue } from '@react-spring/web';
 import { PieItemId } from "../models/seriesType/pie.js";
 export interface PieArcLabelClasses {
   /** Styles applied to the root element. */
@@ -8,6 +7,8 @@ export interface PieArcLabelClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
+  /** Styles applied to the root element when animation is not skipped. */
+  animate: string;
 }
 export type PieArcLabelClassKey = keyof PieArcLabelClasses;
 interface PieArcLabelOwnerState {
@@ -15,23 +16,31 @@ interface PieArcLabelOwnerState {
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  skipAnimation: boolean;
   classes?: Partial<PieArcLabelClasses>;
 }
 export declare function getPieArcLabelUtilityClass(slot: string): string;
 export declare const pieArcLabelClasses: PieArcLabelClasses;
 export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, 'ref' | 'color' | 'id'> & {
-  startAngle: SpringValue<number>;
-  endAngle: SpringValue<number>;
-  innerRadius: SpringValue<number>;
-  outerRadius: SpringValue<number>;
-  arcLabelRadius: SpringValue<number>;
-  cornerRadius: SpringValue<number>;
-  paddingAngle: SpringValue<number>;
-} & {
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  arcLabelRadius: number;
+  cornerRadius: number;
+  paddingAngle: number;
+  skipAnimation: boolean;
   formattedArcLabel?: string | null;
 };
-declare function PieArcLabel(props: PieArcLabelProps): React.JSX.Element;
-declare namespace PieArcLabel {
-  var propTypes: any;
-}
+declare const PieArcLabel: React.ForwardRefExoticComponent<PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, "ref" | "color" | "id"> & {
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  arcLabelRadius: number;
+  cornerRadius: number;
+  paddingAngle: number;
+  skipAnimation: boolean;
+  formattedArcLabel?: string | null;
+} & React.RefAttributes<SVGTextElement>>;
 export { PieArcLabel };