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

package/LineChart/MarkPlot.d.ts

@@ -18,6 +18,16 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement> {
      */
     slotProps?: MarkPlotSlotComponentProps;
 }
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+ */
 declare function MarkPlot(props: MarkPlotProps): React.JSX.Element | null;
 declare namespace MarkPlot {
     var propTypes: any;

package/LineChart/MarkPlot.js

@@ -15,8 +15,18 @@ var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
-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; }
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
+ */
 function MarkPlot(props) {
   const {
       slots,
@@ -50,6 +60,7 @@ function MarkPlot(props) {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
+          data,
           showMark = true
         } = series[seriesId];
         if (showMark === false) {
@@ -76,28 +87,48 @@ function MarkPlot(props) {
           throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot`);
         }
         return xData?.map((x, index) => {
-          const y = stackedData[index][1];
+          const value = data[index] == null ? null : stackedData[index][1];
           return {
             x: xScale(x),
-            y: yScale(y),
+            y: value === null ? null : yScale(value),
             position: x,
-            value: y,
+            value,
             index
           };
-        }).filter(isInRange).map(({
+        }).filter(({
           x,
           y,
           index,
           position,
           value
         }) => {
-          return showMark === true || showMark({
+          if (value === null || y === null) {
+            // Remove missing data point
+            return false;
+          }
+          if (!isInRange({
+            x,
+            y
+          })) {
+            // Remove out of range
+            return false;
+          }
+          if (showMark === true) {
+            return true;
+          }
+          return showMark({
             x,
             y,
             index,
             position,
             value
-          }) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
+          });
+        }).map(({
+          x,
+          y,
+          index
+        }) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
             id: seriesId,
             dataIndex: index,
             shape: "circle",
@@ -105,7 +136,7 @@ function MarkPlot(props) {
             x: x,
             y: y,
             highlightScope: series[seriesId].highlightScope
-          }, slotProps?.mark), `${seriesId}-${index}`) : null;
+          }, slotProps?.mark), `${seriesId}-${index}`);
         });
       });
     })

package/LineChart/formatter.js

@@ -31,7 +31,7 @@ const formatter = (params, dataset) => {
           d3Dataset[index][id] = value;
         }
       });
-    } else if (dataset === undefined) {
+    } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
       throw new Error([`MUI: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
@@ -47,7 +47,8 @@ const formatter = (params, dataset) => {
       // Use dataKey if needed and available
       const dataKey = series[id].dataKey;
       return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    })).value((d, key) => d[key] ?? 0) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = (0, _extends2.default)({}, series[id], {
@@ -59,8 +60,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v.toLocaleString())
+    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v?.toLocaleString())
   };
 };
-var _default = formatter;
-exports.default = _default;
+var _default = exports.default = formatter;

package/LineChart/legend.js

@@ -16,5 +16,4 @@ const legendGetter = params => {
   }));
   return data.filter(item => item.label !== undefined);
 };
-var _default = legendGetter;
-exports.default = _default;
+var _default = exports.default = legendGetter;

package/PieChart/PieArc.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { PieArcDatum as D3PieArcDatum } from 'd3-shape';
+import { SpringValue } from '@react-spring/web';
 import { HighlightScope } from '../context/HighlightProvider';
-import { PieSeriesType } from '../models/seriesType/pie';
 export interface PieArcClasses {
     /** Styles applied to the root element. */
     root: string;
@@ -21,16 +20,15 @@ interface PieArcOwnerState {
 }
 export declare function getPieArcUtilityClass(slot: string): string;
 export declare const pieArcClasses: PieArcClasses;
-export type PieArcProps = Omit<PieArcOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & D3PieArcDatum<any> & {
+export type PieArcProps = PieArcOwnerState & React.ComponentPropsWithoutRef<'path'> & {
+    startAngle: SpringValue<number>;
+    endAngle: SpringValue<number>;
+    innerRadius: SpringValue<number>;
+    outerRadius: SpringValue<number>;
+    cornerRadius: SpringValue<number>;
+    paddingAngle: SpringValue<number>;
     highlightScope?: Partial<HighlightScope>;
-    innerRadius: PieSeriesType['innerRadius'];
-    outerRadius: number;
-    cornerRadius: PieSeriesType['cornerRadius'];
-    highlighted: PieSeriesType['highlighted'];
-    faded: PieSeriesType['faded'];
+    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
 };
-declare function PieArc(props: PieArcProps): React.JSX.Element;
-declare namespace PieArc {
-    var propTypes: any;
-}
-export default PieArc;
+export default function PieArc(props: PieArcProps): React.JSX.Element;
+export {};

package/PieChart/PieArc.js

@@ -11,22 +11,20 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _d3Shape = require("d3-shape");
-var _propTypes = _interopRequireDefault(require("prop-types"));
+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 _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
-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 _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "onClick", "isFaded", "isHighlighted", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+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 getPieArcUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArc', slot);
 }
-const pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded']);
-exports.pieArcClasses = pieArcClasses;
+const pieArcClasses = exports.pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,19 +37,16 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getPieArcUtilityClass, classes);
 };
-const PieArcRoot = (0, _styles.styled)('path', {
+const PieArcRoot = (0, _styles.styled)(_web.animated.path, {
   name: 'MuiPieArc',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.arc
 })(({
-  ownerState,
   theme
 }) => ({
-  stroke: theme.palette.background.paper,
+  stroke: (theme.vars || theme).palette.background.paper,
   strokeWidth: 1,
-  strokeLinejoin: 'round',
-  fill: ownerState.color,
-  opacity: ownerState.isFaded ? 0.3 : 1
+  strokeLinejoin: 'round'
 }));
 function PieArc(props) {
   const {
@@ -60,29 +55,17 @@ function PieArc(props) {
       classes: innerClasses,
       color,
       highlightScope,
-      innerRadius: baseInnerRadius = 0,
-      outerRadius: baseOuterRadius,
-      cornerRadius: baseCornerRadius = 0,
-      highlighted,
-      faded = {
-        additionalRadius: -5
-      }
+      onClick,
+      isFaded,
+      isHighlighted,
+      startAngle,
+      endAngle,
+      paddingAngle,
+      innerRadius,
+      outerRadius,
+      cornerRadius
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
-  const {
-    item
-  } = React.useContext(_InteractionProvider.InteractionContext);
-  const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
-  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
   const ownerState = {
     id,
     dataIndex,
@@ -92,37 +75,22 @@ function PieArc(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const attibuesOverride = (0, _extends2.default)({
-    additionalRadius: 0
-  }, isFaded && faded || isHighlighted && highlighted || {});
-  const innerRadius = Math.max(0, attibuesOverride.innerRadius ?? baseInnerRadius);
-  const outerRadius = Math.max(0, attibuesOverride.outerRadius ?? baseOuterRadius + attibuesOverride.additionalRadius);
-  const cornerRadius = attibuesOverride.cornerRadius ?? baseCornerRadius;
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcRoot, (0, _extends2.default)({
-    d: (0, _d3Shape.arc)().cornerRadius(cornerRadius)((0, _extends2.default)({}, other, {
-      innerRadius,
-      outerRadius
+    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
     })),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
     className: classes.root
-  }, getInteractionItemProps({
+  }, other, getInteractionItemProps({
     type: 'pie',
     seriesId: id,
     dataIndex
   })));
-}
-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 "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  classes: _propTypes.default.object,
-  cornerRadius: _propTypes.default.number,
-  dataIndex: _propTypes.default.number.isRequired,
-  highlightScope: _propTypes.default.shape({
-    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  }),
-  innerRadius: _propTypes.default.number,
-  outerRadius: _propTypes.default.number.isRequired
-} : void 0;
+}

package/PieChart/PieArcLabel.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { PieArcDatum as D3PieArcDatum } from 'd3-shape';
-import { HighlightScope } from '../context/HighlightProvider';
-import { PieSeriesType } from '../models/seriesType/pie';
+import { SpringValue } from '@react-spring/web';
 export interface PieArcLabelClasses {
     /** Styles applied to the root element. */
     root: string;
@@ -13,7 +11,6 @@ export interface PieArcLabelClasses {
 export type PieArcLabelClassKey = keyof PieArcLabelClasses;
 interface PieArcLabelOwnerState {
     id: string;
-    dataIndex: number;
     color: string;
     isFaded: boolean;
     isHighlighted: boolean;
@@ -21,11 +18,13 @@ interface PieArcLabelOwnerState {
 }
 export declare function getPieArcLabelUtilityClass(slot: string): string;
 export declare const pieArcLabelClasses: PieArcLabelClasses;
-export type PieArcLabelProps = Omit<PieArcLabelOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & D3PieArcDatum<any> & {
-    highlightScope?: Partial<HighlightScope>;
-    innerRadius: PieSeriesType['innerRadius'];
-    outerRadius: number;
-    cornerRadius: PieSeriesType['cornerRadius'];
+export type PieArcLabelProps = PieArcLabelOwnerState & React.ComponentPropsWithoutRef<'text'> & {
+    startAngle: SpringValue<number>;
+    endAngle: SpringValue<number>;
+    innerRadius: SpringValue<number>;
+    outerRadius: SpringValue<number>;
+    cornerRadius: SpringValue<number>;
+    paddingAngle: SpringValue<number>;
 } & {
     formattedArcLabel?: string | null;
 };

package/PieChart/PieArcLabel.js

@@ -10,23 +10,21 @@ 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 _web = require("@react-spring/web");
 var _d3Shape = require("d3-shape");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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 _InteractionProvider = require("../context/InteractionProvider");
-var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel"];
-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 _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+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 getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
-const pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
-exports.pieArcLabelClasses = pieArcLabelClasses;
+const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,61 +37,71 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getPieArcLabelUtilityClass, classes);
 };
-const PieArcLabelRoot = (0, _styles.styled)('text', {
+const PieArcLabelRoot = (0, _styles.styled)(_web.animated.text, {
   name: 'MuiPieArcLabel',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
 })(({
   theme
 }) => ({
-  fill: theme.palette.text.primary,
-  textAnchor: 'middle'
+  fill: (theme.vars || theme).palette.text.primary,
+  textAnchor: 'middle',
+  dominantBaseline: 'middle'
 }));
+/**
+ * Helper to compute label position.
+ * It's not an inline function because we need it in inerpolation.
+ */
+const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, innerRadius, outerRadius, cornerRadius) => {
+  if (!formattedArcLabel) {
+    return 0;
+  }
+  const [x, y] = (0, _d3Shape.arc)().cornerRadius(cornerRadius).centroid({
+    padAngle,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius
+  });
+  if (variable === 'x') {
+    return x;
+  }
+  return y;
+};
 function PieArcLabel(props) {
   const {
       id,
-      dataIndex,
       classes: innerClasses,
       color,
-      highlightScope,
-      innerRadius = 0,
+      startAngle,
+      endAngle,
+      paddingAngle,
+      innerRadius,
       outerRadius,
-      cornerRadius = 0,
-      formattedArcLabel
+      cornerRadius,
+      formattedArcLabel,
+      isHighlighted,
+      isFaded,
+      style
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const {
-    item
-  } = React.useContext(_InteractionProvider.InteractionContext);
-  const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
-  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
-    type: 'pie',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
   const ownerState = {
     id,
-    dataIndex,
     classes: innerClasses,
     color,
     isFaded,
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const arcLabelPosition = formattedArcLabel ? (0, _d3Shape.arc)().cornerRadius(cornerRadius).centroid((0, _extends2.default)({}, other, {
-    innerRadius,
-    outerRadius
-  })) : [0, 0];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, {
-    className: classes.root,
-    x: arcLabelPosition[0],
-    y: arcLabelPosition[1],
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
+    className: classes.root
+  }, other, {
+    style: (0, _extends2.default)({
+      x: (0, _web.to)([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
+      y: (0, _web.to)([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
+    }, style),
     children: formattedArcLabel
-  });
+  }));
 }
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------

package/PieChart/PieArcLabelPlot.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { DefaultizedPieSeriesType } from '../models/seriesType/pie';
+import { PieArcLabelProps } from './PieArcLabel';
+import { DefaultizedProps } from '../models/helpers';
+export interface PieArcLabelPlotSlotsComponent {
+    pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
+}
+export interface PieArcLabelPlotSlotComponentProps {
+    pieArcLabel?: Partial<PieArcLabelProps>;
+}
+export interface PieArcLabelPlotProps extends DefaultizedProps<Pick<DefaultizedPieSeriesType, 'data' | 'faded' | 'highlighted' | 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'paddingAngle' | 'arcLabel' | 'arcLabelMinAngle' | 'id' | 'highlightScope'>, 'outerRadius'> {
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: PieArcLabelPlotSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: PieArcLabelPlotSlotComponentProps;
+    /**
+     * If `true`, animations are skiped.
+     * @default false
+     */
+    skipAnimation?: boolean;
+}
+export declare function PieArcLabelPlot(props: PieArcLabelPlotProps): React.JSX.Element | null;

package/PieChart/PieArcLabelPlot.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PieArcLabelPlot = PieArcLabelPlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _web = require("@react-spring/web");
+var _transition = require("./dataTransform/transition");
+var _useTransformData = require("./dataTransform/useTransformData");
+var _PieArcLabel = _interopRequireDefault(require("./PieArcLabel"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "arcLabel", "arcLabelMinAngle", "skipAnimation"],
+  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "cornerRadius"];
+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 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 PieArcLabelPlot(props) {
+  const {
+      slots,
+      slotProps,
+      innerRadius = 0,
+      outerRadius,
+      cornerRadius = 0,
+      paddingAngle = 0,
+      id,
+      highlightScope,
+      highlighted,
+      faded = {
+        additionalRadius: -5
+      },
+      data,
+      arcLabel,
+      arcLabelMinAngle = 0,
+      skipAnimation
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const transformedData = (0, _useTransformData.useTransformData)({
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    paddingAngle,
+    id,
+    highlightScope,
+    highlighted,
+    faded,
+    data
+  });
+  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, _transition.defaultLabelTransitionConfig, {
+    immediate: skipAnimation
+  }));
+  if (data.length === 0) {
+    return null;
+  }
+  const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.default;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+    children: transition((_ref, item) => {
+      let {
+          startAngle,
+          endAngle,
+          paddingAngle: pA,
+          innerRadius: iR,
+          outerRadius: oR,
+          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,
+        cornerRadius: cR,
+        style: style,
+        id: id,
+        color: item.color,
+        isFaded: item.isFaded,
+        isHighlighted: item.isHighlighted,
+        formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
+      }, slotProps?.pieArcLabel));
+    })
+  }));
+}