@mui/x-charts 6.0.0-alpha.8 → 6.18.0

package/PieChart/PieChart.js

@@ -16,14 +16,25 @@ var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _PiePlot = require("./PiePlot");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const defaultMargin = {
   top: 5,
   bottom: 5,
   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) {
   const {
     xAxis,
@@ -41,6 +52,7 @@ function PieChart(props) {
       x: 'none',
       y: 'none'
     },
+    skipAnimation,
     legend = {
       direction: 'column',
       position: {
@@ -54,7 +66,8 @@ function PieChart(props) {
     bottomAxis = null,
     children,
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
@@ -82,7 +95,9 @@ function PieChart(props) {
       slotProps: slotProps
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      onClick: onClick,
+      skipAnimation: skipAnimation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
       slotProps: slotProps
@@ -111,11 +126,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['bottom', 'top']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -144,33 +163,33 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['left', 'right']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
     hidden: _propTypes.default.bool,
-    itemWidth: _propTypes.default.number,
-    markSize: _propTypes.default.number,
-    offset: _propTypes.default.shape({
-      x: _propTypes.default.number,
-      y: _propTypes.default.number
-    }),
     position: _propTypes.default.shape({
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    spacing: _propTypes.default.number
+    slots: _propTypes.default.object
   }),
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -178,6 +197,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  onClick: _propTypes.default.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -191,11 +211,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['left', 'right']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -217,15 +241,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     endAngle: _propTypes.default.number,
     faded: _propTypes.default.shape({
       additionalRadius: _propTypes.default.number,
+      color: _propTypes.default.string,
       cornerRadius: _propTypes.default.number,
       innerRadius: _propTypes.default.number,
-      outerRadius: _propTypes.default.number
+      outerRadius: _propTypes.default.number,
+      paddingAngle: _propTypes.default.number
     }),
     highlighted: _propTypes.default.shape({
       additionalRadius: _propTypes.default.number,
+      color: _propTypes.default.string,
       cornerRadius: _propTypes.default.number,
       innerRadius: _propTypes.default.number,
-      outerRadius: _propTypes.default.number
+      outerRadius: _propTypes.default.number,
+      paddingAngle: _propTypes.default.number
     }),
     highlightScope: _propTypes.default.shape({
       faded: _propTypes.default.oneOf(['global', 'none', 'series']),
@@ -240,6 +268,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     type: _propTypes.default.oneOf(['pie']),
     valueFormatter: _propTypes.default.func
   })).isRequired,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -252,6 +285,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,
     itemContent: _propTypes.default.elementType,
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -267,11 +302,15 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['bottom', 'top']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -296,6 +335,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
@@ -304,6 +344,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -322,6 +365,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
@@ -330,6 +374,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,

package/PieChart/PiePlot.d.ts

@@ -1,15 +1,11 @@
 import * as React from 'react';
-import { PieArcProps } from './PieArc';
-import { PieArcLabelProps } from './PieArcLabel';
-export interface PiePlotSlotsComponent {
-    pieArc?: React.JSXElementConstructor<PieArcProps>;
-    pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+import { PieArcPlotProps, PieArcPlotSlotComponentProps, PieArcPlotSlotsComponent } from './PieArcPlot';
+import { PieArcLabelPlotSlotsComponent, PieArcLabelPlotSlotComponentProps } from './PieArcLabelPlot';
+export interface PiePlotSlotsComponent extends PieArcPlotSlotsComponent, PieArcLabelPlotSlotsComponent {
 }
-export interface PiePlotSlotComponentProps {
-    pieArc?: Partial<PieArcProps>;
-    pieArcLabel?: Partial<PieArcLabelProps>;
+export interface PiePlotSlotComponentProps extends PieArcPlotSlotComponentProps, PieArcLabelPlotSlotComponentProps {
 }
-export interface PiePlotProps {
+export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onClick'> {
     /**
      * Overridable component slots.
      * @default {}
@@ -21,6 +17,16 @@ export interface PiePlotProps {
      */
     slotProps?: PiePlotSlotComponentProps;
 }
+/**
+ * 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/)
+ */
 declare function PiePlot(props: PiePlotProps): React.JSX.Element | null;
 declare namespace PiePlot {
     var propTypes: any;

package/PieChart/PiePlot.js

@@ -5,34 +5,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PiePlot = PiePlot;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
-var _PieArc = _interopRequireDefault(require("./PieArc"));
-var _PieArcLabel = _interopRequireDefault(require("./PieArcLabel"));
 var _DrawingProvider = require("../context/DrawingProvider");
+var _PieArcPlot = require("./PieArcPlot");
+var _PieArcLabelPlot = require("./PieArcLabelPlot");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const RATIO = 180 / Math.PI;
-function getItemLabel(arcLabel, arcLabelMinAngle, item) {
-  if (!arcLabel) {
-    return null;
-  }
-  const angle = (item.endAngle - item.startAngle) * RATIO;
-  if (angle < arcLabelMinAngle) {
-    return null;
-  }
-  if (typeof arcLabel === 'string') {
-    return item[arcLabel]?.toString();
-  }
-  return arcLabel(item);
-}
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 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) {
   const {
+    skipAnimation,
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).pie;
   const {
@@ -53,54 +50,67 @@ function PiePlot(props) {
     series,
     seriesOrder
   } = seriesData;
-  const Arc = slots?.pieArc ?? _PieArc.default;
-  const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.default;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-    children: seriesOrder.map(seriesId => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    children: [seriesOrder.map(seriesId => {
       const {
         innerRadius,
         outerRadius,
         cornerRadius,
-        arcLabel,
-        arcLabelMinAngle = 0,
+        paddingAngle,
         data,
         cx,
         cy,
         highlighted,
-        faded
+        faded,
+        highlightScope
+      } = series[seriesId];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcPlot.PieArcPlot, {
+          innerRadius: innerRadius,
+          outerRadius: 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(seriesId => {
+      const {
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        paddingAngle,
+        arcLabel,
+        arcLabelMinAngle,
+        data,
+        cx,
+        cy,
+        highlightScope
       } = series[seriesId];
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-          children: [data.map((item, index) => {
-            return /*#__PURE__*/(0, React.createElement)(Arc, (0, _extends2.default)({}, item, {
-              key: item.id,
-              innerRadius: innerRadius,
-              outerRadius: outerRadius ?? availableRadius,
-              cornerRadius: cornerRadius,
-              id: seriesId,
-              color: item.color,
-              dataIndex: index,
-              highlightScope: series[seriesId].highlightScope,
-              highlighted: highlighted,
-              faded: faded
-            }, slotProps?.pieArc));
-          }), data.map((item, index) => {
-            return /*#__PURE__*/(0, React.createElement)(ArcLabel, (0, _extends2.default)({}, item, {
-              key: item.id,
-              innerRadius: innerRadius,
-              outerRadius: outerRadius ?? availableRadius,
-              cornerRadius: cornerRadius,
-              id: seriesId,
-              color: item.color,
-              dataIndex: index,
-              highlightScope: series[seriesId].highlightScope,
-              formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-            }, slotProps?.pieArcLabel));
-          })]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcLabelPlot.PieArcLabelPlot, {
+          innerRadius: innerRadius,
+          outerRadius: 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 = {
@@ -108,6 +118,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.default.func,
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/PieChart/dataTransform/transition.d.ts

@@ -0,0 +1,4 @@
+import { UseTransitionProps } from '@react-spring/web';
+import { ValueWithHighlight } from './useTransformData';
+export declare const defaultTransitionConfig: UseTransitionProps<ValueWithHighlight>;
+export declare const defaultLabelTransitionConfig: UseTransitionProps<ValueWithHighlight>;

package/PieChart/dataTransform/transition.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultTransitionConfig = exports.defaultLabelTransitionConfig = void 0;
+const defaultTransitionConfig = exports.defaultTransitionConfig = {
+  keys: item => item.id,
+  from: ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle,
+    color,
+    isFaded
+  }) => ({
+    innerRadius,
+    outerRadius: (innerRadius + outerRadius) / 2,
+    cornerRadius,
+    startAngle: (startAngle + endAngle) / 2,
+    endAngle: (startAngle + endAngle) / 2,
+    paddingAngle,
+    fill: color,
+    opacity: isFaded ? 0.3 : 1
+  }),
+  leave: ({
+    innerRadius,
+    startAngle,
+    endAngle
+  }) => ({
+    innerRadius,
+    outerRadius: innerRadius,
+    startAngle: (startAngle + endAngle) / 2,
+    endAngle: (startAngle + endAngle) / 2
+  }),
+  enter: ({
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle
+  }) => ({
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle
+  }),
+  update: ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle,
+    color,
+    isFaded
+  }) => ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle,
+    fill: color,
+    opacity: isFaded ? 0.3 : 1
+  }),
+  config: {
+    tension: 120,
+    friction: 14,
+    clamp: true
+  }
+};
+const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
+  keys: item => item.id,
+  from: ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle
+  }) => ({
+    innerRadius,
+    outerRadius: (innerRadius + outerRadius) / 2,
+    cornerRadius,
+    startAngle: (startAngle + endAngle) / 2,
+    endAngle: (startAngle + endAngle) / 2,
+    paddingAngle,
+    opacity: 0
+  }),
+  leave: ({
+    innerRadius,
+    startAngle,
+    endAngle
+  }) => ({
+    innerRadius,
+    outerRadius: innerRadius,
+    startAngle: (startAngle + endAngle) / 2,
+    endAngle: (startAngle + endAngle) / 2,
+    opacity: 0
+  }),
+  enter: ({
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle
+  }) => ({
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    opacity: 1
+  }),
+  update: ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle
+  }) => ({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    startAngle,
+    endAngle,
+    paddingAngle,
+    opacity: 1
+  }),
+  config: {
+    tension: 120,
+    friction: 14,
+    clamp: true
+  }
+};

package/PieChart/dataTransform/useTransformData.d.ts

@@ -0,0 +1,15 @@
+import { DefaultizedPieSeriesType, DefaultizedPieValueType } from '../../models/seriesType/pie';
+import { DefaultizedProps } from '../../models/helpers';
+export interface AnimatedObject {
+    innerRadius: number;
+    outerRadius: number;
+    cornerRadius: number;
+    startAngle: number;
+    endAngle: number;
+    paddingAngle: number;
+}
+export interface ValueWithHighlight extends DefaultizedPieValueType, AnimatedObject {
+    isFaded: boolean;
+    isHighlighted: boolean;
+}
+export declare function useTransformData(series: DefaultizedProps<Pick<DefaultizedPieSeriesType, 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'paddingAngle' | 'id' | 'highlightScope' | 'highlighted' | 'faded' | 'data'>, 'outerRadius'>): ValueWithHighlight[];

package/PieChart/dataTransform/useTransformData.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTransformData = useTransformData;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _InteractionProvider = require("../../context/InteractionProvider");
+var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function useTransformData(series) {
+  const {
+    id: seriesId,
+    highlightScope,
+    data,
+    faded,
+    highlighted,
+    paddingAngle: basePaddingAngle = 0,
+    innerRadius: baseInnerRadius = 0,
+    outerRadius: baseOuterRadius,
+    cornerRadius: baseCornerRadius = 0
+  } = series;
+  const {
+    item: highlightedItem
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const getHighlightStatus = React.useCallback(dataIndex => {
+    const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(highlightedItem, {
+      type: 'pie',
+      seriesId,
+      dataIndex
+    }, highlightScope);
+    const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(highlightedItem, {
+      type: 'pie',
+      seriesId,
+      dataIndex
+    }, highlightScope);
+    return {
+      isHighlighted,
+      isFaded
+    };
+  }, [highlightScope, highlightedItem, seriesId]);
+  const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
+    const {
+      isHighlighted,
+      isFaded
+    } = getHighlightStatus(itemIndex);
+    const attibuesOverride = (0, _extends2.default)({
+      additionalRadius: 0
+    }, isFaded && faded || isHighlighted && highlighted || {});
+    const paddingAngle = Math.max(0, Math.PI * (attibuesOverride.paddingAngle ?? basePaddingAngle) / 180);
+    const innerRadius = Math.max(0, attibuesOverride.innerRadius ?? baseInnerRadius);
+    const outerRadius = Math.max(0, attibuesOverride.outerRadius ?? baseOuterRadius + attibuesOverride.additionalRadius);
+    const cornerRadius = attibuesOverride.cornerRadius ?? baseCornerRadius;
+    return (0, _extends2.default)({}, item, attibuesOverride, {
+      isFaded,
+      isHighlighted,
+      paddingAngle,
+      innerRadius,
+      outerRadius,
+      cornerRadius
+    });
+  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, data, faded, getHighlightStatus, highlighted]);
+  return dataWithHighlight;
+}