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

package/LineChart/seriesConfig/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,13 +10,14 @@ var _extremums = require("./extremums");
 var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _legend = _interopRequireDefault(require("./legend"));
-var _tooltip = _interopRequireDefault(require("./tooltip"));
+var _tooltip = _interopRequireWildcard(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 const seriesConfig = exports.seriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
+  axisTooltipGetter: _tooltip.axisTooltipGetter,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default

package/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/LineChart/seriesConfig/tooltip.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.axisTooltipGetter = void 0;
 var _getLabel = require("../../internals/getLabel");
 const tooltipGetter = params => {
   const {
@@ -28,4 +28,11 @@ const tooltipGetter = params => {
     markType: series.labelMarkType
   };
 };
+const axisTooltipGetter = series => {
+  return Object.values(series).map(s => ({
+    direction: 'x',
+    axisId: s.xAxisId
+  }));
+};
+exports.axisTooltipGetter = axisTooltipGetter;
 var _default = exports.default = tooltipGetter;

package/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/LineChart/useLineChartProps.js

@@ -2,12 +2,14 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useLineChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _LineChart = require("./LineChart.plugins");
@@ -48,11 +50,12 @@ const useLineChartProps = props => {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
+  const seriesWithDefault = React.useMemo(() => series.map(s => (0, _extends2.default)({
+    disableHighlight: !!disableLineItemHighlight,
+    type: 'line'
+  }, s)), [disableLineItemHighlight, series]);
   const chartContainerProps = (0, _extends2.default)({}, other, {
-    series: series.map(s => (0, _extends2.default)({
-      disableHighlight: !!disableLineItemHighlight,
-      type: 'line'
-    }, s)),
+    series: seriesWithDefault,
     width,
     height,
     margin,

package/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/PieChart/PieArc.js

@@ -6,22 +6,22 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PieArc = PieArc;
+exports.PieArc = void 0;
 exports.getPieArcUtilityClass = getPieArcUtilityClass;
 exports.pieArcClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
-var _web = require("@react-spring/web");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _hooks = require("../hooks");
+var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function getPieArcUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArc', slot);
 }
@@ -39,7 +39,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getPieArcUtilityClass, classes);
 };
-const PieArcRoot = (0, _styles.styled)(_web.animated.path, {
+const PieArcRoot = (0, _styles.styled)('path', {
   name: 'MuiPieArc',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.arc
@@ -48,23 +48,26 @@ const PieArcRoot = (0, _styles.styled)(_web.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.ANIMATION_DURATION_MS}ms`,
+  transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
 }));
-function PieArc(props) {
+const PieArc = exports.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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {
@@ -81,17 +84,17 @@ function PieArc(props) {
     seriesId: id,
     dataIndex
   });
+  const animatedProps = (0, _hooks.useAnimatePieArc)({
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    skipAnimation,
+    ref
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcRoot, (0, _extends2.default)({
-    d: (0, _web.to)([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], (sA, eA, pA, iR, oR, cR) => (0, _d3Shape.arc)().cornerRadius(cR)({
-      padAngle: pA,
-      startAngle: sA,
-      endAngle: eA,
-      innerRadius: iR,
-      outerRadius: oR
-    })),
-    visibility: (0, _web.to)([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible')
-    // @ts-expect-error
-    ,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
@@ -101,16 +104,26 @@ 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.default.object,
+  cornerRadius: _propTypes.default.number.isRequired,
   dataIndex: _propTypes.default.number.isRequired,
+  endAngle: _propTypes.default.number.isRequired,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  innerRadius: _propTypes.default.number.isRequired,
   isFaded: _propTypes.default.bool.isRequired,
-  isHighlighted: _propTypes.default.bool.isRequired
+  isHighlighted: _propTypes.default.bool.isRequired,
+  outerRadius: _propTypes.default.number.isRequired,
+  paddingAngle: _propTypes.default.number.isRequired,
+  /**
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool.isRequired,
+  startAngle: _propTypes.default.number.isRequired
 } : void 0;

package/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 };

package/PieChart/PieArcLabel.js

@@ -6,38 +6,39 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PieArcLabel = PieArcLabel;
+exports.PieArcLabel = void 0;
 exports.getPieArcLabelUtilityClass = getPieArcLabelUtilityClass;
 exports.pieArcLabelClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
-var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _animation = require("../internals/animation/animation");
+var _useAnimatePieArcLabel = require("../hooks/animation/useAnimatePieArcLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style", "skipAnimation"];
 function getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
-const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
+const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate']);
 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 && 'animate']
   };
   return (0, _composeClasses.default)(slots, getPieArcLabelUtilityClass, classes);
 };
-const PieArcLabelRoot = (0, _styles.styled)(_web.animated.text, {
+const PieArcLabelRoot = (0, _styles.styled)('text', {
   name: 'MuiPieArcLabel',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -47,29 +48,20 @@ const PieArcLabelRoot = (0, _styles.styled)(_web.animated.text, {
   fill: (theme.vars || theme).palette.text.primary,
   textAnchor: 'middle',
   dominantBaseline: 'middle',
-  pointerEvents: 'none'
-}));
-/**
- * Helper to compute label position.
- * It's not an inline function because we need it in interpolation.
- */
-const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
-  if (!formattedArcLabel) {
-    return 0;
-  }
-  const [x, y] = (0, _d3Shape.arc)().cornerRadius(cornerRadius).centroid({
-    padAngle,
-    startAngle,
-    endAngle,
-    innerRadius: arcLabelRadius,
-    outerRadius: arcLabelRadius
-  });
-  if (variable === 'x') {
-    return x;
+  pointerEvents: 'none',
+  animationName: 'animate-opacity',
+  animationDuration: '0s',
+  animationTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
+  [`&.${pieArcLabelClasses.animate}`]: {
+    animationDuration: `${_animation.ANIMATION_DURATION_MS}ms`
+  },
+  '@keyframes animate-opacity': {
+    from: {
+      opacity: 0
+    }
   }
-  return y;
-};
-function PieArcLabel(props) {
+}));
+const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, ref) {
   const {
       id,
       classes: innerClasses,
@@ -77,12 +69,13 @@ function PieArcLabel(props) {
       startAngle,
       endAngle,
       paddingAngle,
-      arcLabelRadius,
+      innerRadius,
+      outerRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
       isFaded,
-      style
+      skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {
@@ -90,32 +83,43 @@ function PieArcLabel(props) {
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error
-    (0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
-      className: classes.root
-    }, other, {
-      style: (0, _extends2.default)({
-        x: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-        y: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
-      }, style),
-      children: formattedArcLabel
-    }))
-  );
-}
+  const animatedProps = (0, _useAnimatePieArcLabel.useAnimatePieArcLabel)({
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    skipAnimation,
+    ref
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
+    className: classes.root
+  }, other, animatedProps, {
+    children: formattedArcLabel
+  }));
+});
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  arcLabelRadius: _propTypes.default.number.isRequired,
   classes: _propTypes.default.object,
   color: _propTypes.default.string.isRequired,
+  cornerRadius: _propTypes.default.number.isRequired,
+  endAngle: _propTypes.default.number.isRequired,
   formattedArcLabel: _propTypes.default.string,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  innerRadius: _propTypes.default.number.isRequired,
   isFaded: _propTypes.default.bool.isRequired,
-  isHighlighted: _propTypes.default.bool.isRequired
+  isHighlighted: _propTypes.default.bool.isRequired,
+  outerRadius: _propTypes.default.number.isRequired,
+  paddingAngle: _propTypes.default.number.isRequired,
+  skipAnimation: _propTypes.default.bool.isRequired,
+  startAngle: _propTypes.default.number.isRequired
 } : void 0;

package/PieChart/PieArcLabelPlot.js

@@ -11,14 +11,11 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
-var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _PieArcLabel = require("./PieArcLabel");
 var _getLabel = require("../internals/getLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"];
 const RATIO = 180 / Math.PI;
 function getItemLabel(arcLabel, arcLabelMinAngle, item) {
   if (!arcLabel) {
@@ -72,41 +69,26 @@ function PieArcLabelPlot(props) {
     faded,
     data
   });
-  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, (0, _transition.getDefaultLabelTransitionConfig)(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.PieArcLabel;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: transition((_ref, item) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          arcLabelRadius: aLR,
-          cornerRadius: cR
-        } = _ref,
-        style = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArcLabel, (0, _extends2.default)({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        arcLabelRadius: aLR,
-        cornerRadius: cR,
-        style: style,
-        id: id,
-        color: item.color,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-      }, slotProps?.pieArcLabel));
-    })
+    children: transformedData.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(ArcLabel, (0, _extends2.default)({
+      startAngle: item.startAngle,
+      endAngle: item.endAngle,
+      paddingAngle: item.paddingAngle,
+      innerRadius: item.innerRadius,
+      outerRadius: item.outerRadius,
+      arcLabelRadius: item.arcLabelRadius,
+      cornerRadius: item.cornerRadius,
+      id: id,
+      color: item.color,
+      isFaded: item.isFaded,
+      isHighlighted: item.isHighlighted,
+      formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item),
+      skipAnimation: skipAnimation ?? false
+    }, slotProps?.pieArcLabel), item.id ?? item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {

package/PieChart/PieArcPlot.js

@@ -11,9 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
 var _PieArc = require("./PieArc");
-var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
@@ -45,43 +43,32 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, (0, _transition.getDefaultTransitionConfig)(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? _PieArc.PieArc;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: transition(({
-      startAngle,
-      endAngle,
-      paddingAngle: pA,
-      innerRadius: iR,
-      outerRadius: oR,
-      cornerRadius: cR
-    }, item, _, index) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        cornerRadius: cR,
-        id: id,
-        color: item.color,
-        dataIndex: index,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        onClick: onItemClick && (event => {
-          onItemClick(event, {
-            type: 'pie',
-            seriesId: id,
-            dataIndex: index
-          }, item);
-        })
-      }, slotProps?.pieArc));
-    })
+    children: transformedData.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
+      startAngle: item.startAngle,
+      endAngle: item.endAngle,
+      paddingAngle: item.paddingAngle,
+      innerRadius: item.innerRadius,
+      outerRadius: item.outerRadius,
+      cornerRadius: item.cornerRadius,
+      skipAnimation: skipAnimation ?? false,
+      id: id,
+      color: item.color,
+      dataIndex: index,
+      isFaded: item.isFaded,
+      isHighlighted: item.isHighlighted,
+      onClick: onItemClick && (event => {
+        onItemClick(event, {
+          type: 'pie',
+          seriesId: id,
+          dataIndex: index
+        }, item);
+      })
+    }, slotProps?.pieArc), item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/PieChart/seriesConfig/tooltip.js

@@ -17,6 +17,9 @@ const tooltipGetter = params => {
     return null;
   }
   const point = series.data[identifier.dataIndex];
+  if (point == null) {
+    return null;
+  }
   const label = (0, _getLabel.getLabel)(point.label, 'tooltip');
   const value = (0, _extends2.default)({}, point, {
     label