@mui/x-charts 6.0.0-alpha.9 → 6.18.1

package/legacy/PieChart/PieChart.js

@@ -17,6 +17,17 @@ var defaultMargin = {
   left: 5,
   right: 100
 };
+
+/**
+ * Demos:
+ *
+ * - [Pie](https://mui.com/x/react-charts/pie/)
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+ *
+ * API:
+ *
+ * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
+ */
 function PieChart(props) {
   var xAxis = props.xAxis,
     yAxis = props.yAxis,
@@ -35,6 +46,7 @@ function PieChart(props) {
       x: 'none',
       y: 'none'
     } : _props$axisHighlight,
+    skipAnimation = props.skipAnimation,
     _props$legend = props.legend,
     legend = _props$legend === void 0 ? {
       direction: 'column',
@@ -53,7 +65,8 @@ function PieChart(props) {
     bottomAxis = _props$bottomAxis === void 0 ? null : _props$bottomAxis,
     children = props.children,
     slots = props.slots,
-    slotProps = props.slotProps;
+    slotProps = props.slotProps,
+    onClick = props.onClick;
   var margin = _extends({}, defaultMargin, marginProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     series: series.map(function (s) {
@@ -86,7 +99,9 @@ function PieChart(props) {
       slotProps: slotProps
     }), /*#__PURE__*/_jsx(PiePlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      onClick: onClick,
+      skipAnimation: skipAnimation
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
@@ -108,18 +123,22 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -131,9 +150,21 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Color palette used to colorize multiple series.
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
   disableAxisListener: PropTypes.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   * @default undefined
+   */
   height: PropTypes.number,
   /**
    * Indicate which axis to display the left of the charts.
@@ -141,65 +172,76 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
-    itemWidth: PropTypes.number,
-    markSize: PropTypes.number,
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
-    }),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    spacing: PropTypes.number
+    slots: PropTypes.object
   }),
+  /**
+   * The margin between the SVG and the drawing area.
+   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
+   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   * @default object Depends on the charts type.
+   */
   margin: PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  onClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -221,15 +263,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     endAngle: PropTypes.number,
     faded: PropTypes.shape({
       additionalRadius: PropTypes.number,
+      color: PropTypes.string,
       cornerRadius: PropTypes.number,
       innerRadius: PropTypes.number,
-      outerRadius: PropTypes.number
+      outerRadius: PropTypes.number,
+      paddingAngle: PropTypes.number
     }),
     highlighted: PropTypes.shape({
       additionalRadius: PropTypes.number,
+      color: PropTypes.string,
       cornerRadius: PropTypes.number,
       innerRadius: PropTypes.number,
-      outerRadius: PropTypes.number
+      outerRadius: PropTypes.number,
+      paddingAngle: PropTypes.number
     }),
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
@@ -244,6 +290,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     type: PropTypes.oneOf(['pie']),
     valueFormatter: PropTypes.func
   })).isRequired,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -256,6 +307,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -264,18 +317,22 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({
-    axisId: PropTypes.string.isRequired,
+    axisId: PropTypes.string,
     classes: PropTypes.object,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -287,7 +344,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   * @default undefined
+   */
   width: PropTypes.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -300,6 +365,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -308,12 +374,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
@@ -326,6 +399,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -334,6 +408,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/legacy/PieChart/PiePlot.js

@@ -1,32 +1,26 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
-import PieArc from './PieArc';
-import PieArcLabel from './PieArcLabel';
 import { DrawingContext } from '../context/DrawingProvider';
-import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { PieArcPlot } from './PieArcPlot';
+import { PieArcLabelPlot } from './PieArcLabelPlot';
 import { jsx as _jsx } from "react/jsx-runtime";
-var RATIO = 180 / Math.PI;
-function getItemLabel(arcLabel, arcLabelMinAngle, item) {
-  if (!arcLabel) {
-    return null;
-  }
-  var angle = (item.endAngle - item.startAngle) * RATIO;
-  if (angle < arcLabelMinAngle) {
-    return null;
-  }
-  if (typeof arcLabel === 'string') {
-    var _item$arcLabel;
-    return (_item$arcLabel = item[arcLabel]) == null ? void 0 : _item$arcLabel.toString();
-  }
-  return arcLabel(item);
-}
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Pie](https://mui.com/x/react-charts/pie/)
+ * - [Pie demonstration](https://mui.com/x/react-charts/pie-demo/)
+ *
+ * API:
+ *
+ * - [PiePlot API](https://mui.com/x/api/charts/pie-plot/)
+ */
 function PiePlot(props) {
-  var _slots$pieArc, _slots$pieArcLabel;
-  var slots = props.slots,
-    slotProps = props.slotProps;
+  var skipAnimation = props.skipAnimation,
+    slots = props.slots,
+    slotProps = props.slotProps,
+    onClick = props.onClick;
   var seriesData = React.useContext(SeriesContext).pie;
   var _React$useContext = React.useContext(DrawingContext),
     left = _React$useContext.left,
@@ -43,54 +37,65 @@ function PiePlot(props) {
   };
   var series = seriesData.series,
     seriesOrder = seriesData.seriesOrder;
-  var Arc = (_slots$pieArc = slots == null ? void 0 : slots.pieArc) != null ? _slots$pieArc : PieArc;
-  var ArcLabel = (_slots$pieArcLabel = slots == null ? void 0 : slots.pieArcLabel) != null ? _slots$pieArcLabel : PieArcLabel;
-  return /*#__PURE__*/_jsx("g", {
-    children: seriesOrder.map(function (seriesId) {
+  return /*#__PURE__*/_jsxs("g", {
+    children: [seriesOrder.map(function (seriesId) {
       var _series$seriesId = series[seriesId],
         innerRadius = _series$seriesId.innerRadius,
         outerRadius = _series$seriesId.outerRadius,
         cornerRadius = _series$seriesId.cornerRadius,
-        arcLabel = _series$seriesId.arcLabel,
-        _series$seriesId$arcL = _series$seriesId.arcLabelMinAngle,
-        arcLabelMinAngle = _series$seriesId$arcL === void 0 ? 0 : _series$seriesId$arcL,
+        paddingAngle = _series$seriesId.paddingAngle,
         data = _series$seriesId.data,
         cx = _series$seriesId.cx,
         cy = _series$seriesId.cy,
         highlighted = _series$seriesId.highlighted,
-        faded = _series$seriesId.faded;
+        faded = _series$seriesId.faded,
+        highlightScope = _series$seriesId.highlightScope;
       return /*#__PURE__*/_jsx("g", {
         transform: "translate(".concat(cx === undefined ? center.x : left + cx, ", ").concat(cy === undefined ? center.y : top + cy, ")"),
-        children: /*#__PURE__*/_jsxs("g", {
-          children: [data.map(function (item, index) {
-            return /*#__PURE__*/_createElement(Arc, _extends({}, item, {
-              key: item.id,
-              innerRadius: innerRadius,
-              outerRadius: outerRadius != null ? outerRadius : availableRadius,
-              cornerRadius: cornerRadius,
-              id: seriesId,
-              color: item.color,
-              dataIndex: index,
-              highlightScope: series[seriesId].highlightScope,
-              highlighted: highlighted,
-              faded: faded
-            }, slotProps == null ? void 0 : slotProps.pieArc));
-          }), data.map(function (item, index) {
-            return /*#__PURE__*/_createElement(ArcLabel, _extends({}, item, {
-              key: item.id,
-              innerRadius: innerRadius,
-              outerRadius: outerRadius != null ? outerRadius : availableRadius,
-              cornerRadius: cornerRadius,
-              id: seriesId,
-              color: item.color,
-              dataIndex: index,
-              highlightScope: series[seriesId].highlightScope,
-              formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-            }, slotProps == null ? void 0 : slotProps.pieArcLabel));
-          })]
+        children: /*#__PURE__*/_jsx(PieArcPlot, {
+          innerRadius: innerRadius,
+          outerRadius: outerRadius != null ? outerRadius : availableRadius,
+          cornerRadius: cornerRadius,
+          paddingAngle: paddingAngle,
+          id: seriesId,
+          data: data,
+          skipAnimation: skipAnimation,
+          highlightScope: highlightScope,
+          highlighted: highlighted,
+          faded: faded,
+          onClick: onClick,
+          slots: slots,
+          slotProps: slotProps
         })
       }, seriesId);
-    })
+    }), seriesOrder.map(function (seriesId) {
+      var _series$seriesId2 = series[seriesId],
+        innerRadius = _series$seriesId2.innerRadius,
+        outerRadius = _series$seriesId2.outerRadius,
+        cornerRadius = _series$seriesId2.cornerRadius,
+        paddingAngle = _series$seriesId2.paddingAngle,
+        arcLabel = _series$seriesId2.arcLabel,
+        arcLabelMinAngle = _series$seriesId2.arcLabelMinAngle,
+        data = _series$seriesId2.data,
+        cx = _series$seriesId2.cx,
+        cy = _series$seriesId2.cy,
+        highlightScope = _series$seriesId2.highlightScope;
+      return /*#__PURE__*/_jsx("g", {
+        transform: "translate(".concat(cx === undefined ? center.x : left + cx, ", ").concat(cy === undefined ? center.y : top + cy, ")"),
+        children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
+          innerRadius: innerRadius,
+          outerRadius: outerRadius != null ? outerRadius : availableRadius,
+          cornerRadius: cornerRadius,
+          paddingAngle: paddingAngle,
+          id: seriesId,
+          data: data,
+          skipAnimation: skipAnimation,
+          arcLabel: arcLabel,
+          arcLabelMinAngle: arcLabelMinAngle,
+          highlightScope: highlightScope
+        })
+      }, seriesId);
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
@@ -98,6 +103,18 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a pie item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+   * @param {DefaultizedPieValueType} item The pie item.
+   */
+  onClick: PropTypes.func,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/legacy/PieChart/dataTransform/transition.js

@@ -0,0 +1,142 @@
+export var defaultTransitionConfig = {
+  keys: function keys(item) {
+    return item.id;
+  },
+  from: function from(_ref) {
+    var innerRadius = _ref.innerRadius,
+      outerRadius = _ref.outerRadius,
+      cornerRadius = _ref.cornerRadius,
+      startAngle = _ref.startAngle,
+      endAngle = _ref.endAngle,
+      paddingAngle = _ref.paddingAngle,
+      color = _ref.color,
+      isFaded = _ref.isFaded;
+    return {
+      innerRadius: innerRadius,
+      outerRadius: (innerRadius + outerRadius) / 2,
+      cornerRadius: cornerRadius,
+      startAngle: (startAngle + endAngle) / 2,
+      endAngle: (startAngle + endAngle) / 2,
+      paddingAngle: paddingAngle,
+      fill: color,
+      opacity: isFaded ? 0.3 : 1
+    };
+  },
+  leave: function leave(_ref2) {
+    var innerRadius = _ref2.innerRadius,
+      startAngle = _ref2.startAngle,
+      endAngle = _ref2.endAngle;
+    return {
+      innerRadius: innerRadius,
+      outerRadius: innerRadius,
+      startAngle: (startAngle + endAngle) / 2,
+      endAngle: (startAngle + endAngle) / 2
+    };
+  },
+  enter: function enter(_ref3) {
+    var innerRadius = _ref3.innerRadius,
+      outerRadius = _ref3.outerRadius,
+      startAngle = _ref3.startAngle,
+      endAngle = _ref3.endAngle;
+    return {
+      innerRadius: innerRadius,
+      outerRadius: outerRadius,
+      startAngle: startAngle,
+      endAngle: endAngle
+    };
+  },
+  update: function update(_ref4) {
+    var innerRadius = _ref4.innerRadius,
+      outerRadius = _ref4.outerRadius,
+      cornerRadius = _ref4.cornerRadius,
+      startAngle = _ref4.startAngle,
+      endAngle = _ref4.endAngle,
+      paddingAngle = _ref4.paddingAngle,
+      color = _ref4.color,
+      isFaded = _ref4.isFaded;
+    return {
+      innerRadius: innerRadius,
+      outerRadius: outerRadius,
+      cornerRadius: cornerRadius,
+      startAngle: startAngle,
+      endAngle: endAngle,
+      paddingAngle: paddingAngle,
+      fill: color,
+      opacity: isFaded ? 0.3 : 1
+    };
+  },
+  config: {
+    tension: 120,
+    friction: 14,
+    clamp: true
+  }
+};
+export var defaultLabelTransitionConfig = {
+  keys: function keys(item) {
+    return item.id;
+  },
+  from: function from(_ref5) {
+    var innerRadius = _ref5.innerRadius,
+      outerRadius = _ref5.outerRadius,
+      cornerRadius = _ref5.cornerRadius,
+      startAngle = _ref5.startAngle,
+      endAngle = _ref5.endAngle,
+      paddingAngle = _ref5.paddingAngle;
+    return {
+      innerRadius: innerRadius,
+      outerRadius: (innerRadius + outerRadius) / 2,
+      cornerRadius: cornerRadius,
+      startAngle: (startAngle + endAngle) / 2,
+      endAngle: (startAngle + endAngle) / 2,
+      paddingAngle: paddingAngle,
+      opacity: 0
+    };
+  },
+  leave: function leave(_ref6) {
+    var innerRadius = _ref6.innerRadius,
+      startAngle = _ref6.startAngle,
+      endAngle = _ref6.endAngle;
+    return {
+      innerRadius: innerRadius,
+      outerRadius: innerRadius,
+      startAngle: (startAngle + endAngle) / 2,
+      endAngle: (startAngle + endAngle) / 2,
+      opacity: 0
+    };
+  },
+  enter: function enter(_ref7) {
+    var innerRadius = _ref7.innerRadius,
+      outerRadius = _ref7.outerRadius,
+      startAngle = _ref7.startAngle,
+      endAngle = _ref7.endAngle;
+    return {
+      innerRadius: innerRadius,
+      outerRadius: outerRadius,
+      startAngle: startAngle,
+      endAngle: endAngle,
+      opacity: 1
+    };
+  },
+  update: function update(_ref8) {
+    var innerRadius = _ref8.innerRadius,
+      outerRadius = _ref8.outerRadius,
+      cornerRadius = _ref8.cornerRadius,
+      startAngle = _ref8.startAngle,
+      endAngle = _ref8.endAngle,
+      paddingAngle = _ref8.paddingAngle;
+    return {
+      innerRadius: innerRadius,
+      outerRadius: outerRadius,
+      cornerRadius: cornerRadius,
+      startAngle: startAngle,
+      endAngle: endAngle,
+      paddingAngle: paddingAngle,
+      opacity: 1
+    };
+  },
+  config: {
+    tension: 120,
+    friction: 14,
+    clamp: true
+  }
+};

package/legacy/PieChart/dataTransform/useTransformData.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { InteractionContext } from '../../context/InteractionProvider';
+import { getIsHighlighted, getIsFaded } from '../../hooks/useInteractionItemProps';
+export function useTransformData(series) {
+  var seriesId = series.id,
+    highlightScope = series.highlightScope,
+    data = series.data,
+    faded = series.faded,
+    highlighted = series.highlighted,
+    _series$paddingAngle = series.paddingAngle,
+    basePaddingAngle = _series$paddingAngle === void 0 ? 0 : _series$paddingAngle,
+    _series$innerRadius = series.innerRadius,
+    baseInnerRadius = _series$innerRadius === void 0 ? 0 : _series$innerRadius,
+    baseOuterRadius = series.outerRadius,
+    _series$cornerRadius = series.cornerRadius,
+    baseCornerRadius = _series$cornerRadius === void 0 ? 0 : _series$cornerRadius;
+  var _React$useContext = React.useContext(InteractionContext),
+    highlightedItem = _React$useContext.item;
+  var getHighlightStatus = React.useCallback(function (dataIndex) {
+    var isHighlighted = getIsHighlighted(highlightedItem, {
+      type: 'pie',
+      seriesId: seriesId,
+      dataIndex: dataIndex
+    }, highlightScope);
+    var isFaded = !isHighlighted && getIsFaded(highlightedItem, {
+      type: 'pie',
+      seriesId: seriesId,
+      dataIndex: dataIndex
+    }, highlightScope);
+    return {
+      isHighlighted: isHighlighted,
+      isFaded: isFaded
+    };
+  }, [highlightScope, highlightedItem, seriesId]);
+  var dataWithHighlight = React.useMemo(function () {
+    return data.map(function (item, itemIndex) {
+      var _attibuesOverride$pad, _attibuesOverride$inn, _attibuesOverride$out, _attibuesOverride$cor;
+      var _getHighlightStatus = getHighlightStatus(itemIndex),
+        isHighlighted = _getHighlightStatus.isHighlighted,
+        isFaded = _getHighlightStatus.isFaded;
+      var attibuesOverride = _extends({
+        additionalRadius: 0
+      }, isFaded && faded || isHighlighted && highlighted || {});
+      var paddingAngle = Math.max(0, Math.PI * ((_attibuesOverride$pad = attibuesOverride.paddingAngle) != null ? _attibuesOverride$pad : basePaddingAngle) / 180);
+      var innerRadius = Math.max(0, (_attibuesOverride$inn = attibuesOverride.innerRadius) != null ? _attibuesOverride$inn : baseInnerRadius);
+      var outerRadius = Math.max(0, (_attibuesOverride$out = attibuesOverride.outerRadius) != null ? _attibuesOverride$out : baseOuterRadius + attibuesOverride.additionalRadius);
+      var cornerRadius = (_attibuesOverride$cor = attibuesOverride.cornerRadius) != null ? _attibuesOverride$cor : baseCornerRadius;
+      return _extends({}, item, attibuesOverride, {
+        isFaded: isFaded,
+        isHighlighted: isHighlighted,
+        paddingAngle: paddingAngle,
+        innerRadius: innerRadius,
+        outerRadius: outerRadius,
+        cornerRadius: cornerRadius
+      });
+    });
+  }, [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, data, faded, getHighlightStatus, highlighted]);
+  return dataWithHighlight;
+}