@mui/x-charts 8.21.0 → 8.22.1

package/LineChart/useMarkPlotData.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMarkPlotData = useMarkPlotData;
+var React = _interopRequireWildcard(require("react"));
+var _useChartId = require("../hooks/useChartId");
+var _hooks = require("../hooks");
+var _cleanId = require("../internals/cleanId");
+var _constants = require("../constants");
+var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
+var _ChartProvider = require("../context/ChartProvider");
+function useMarkPlotData(xAxes, yAxes) {
+  const seriesData = (0, _hooks.useLineSeriesContext)();
+  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
+  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
+  const chartId = (0, _useChartId.useChartId)();
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const markPlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (const seriesId of groupIds) {
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          showMark = true,
+          shape = 'circle'
+        } = series[seriesId];
+        if (showMark === false) {
+          continue;
+        }
+        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = (0, _hooks.getValueToPositionMapper)(xAxes[xAxisId].scale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+        }
+        const clipId = (0, _cleanId.cleanId)(`${chartId}-${seriesId}-line-clip`);
+        const colorGetter = (0, _getColor.default)(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
+        const marks = [];
+        if (xData) {
+          for (let index = 0; index < xData.length; index += 1) {
+            const x = xData[index];
+            const value = data[index] == null ? null : stackedData[index][1];
+            if (value === null) {
+              continue;
+            }
+            const y = yScale(value);
+            const xPos = xScale(x);
+            if (!instance.isPointInside(xPos, y)) {
+              continue;
+            }
+            if (showMark !== true) {
+              const shouldInclude = showMark({
+                x: xPos,
+                y,
+                index,
+                position: x,
+                value
+              });
+              if (!shouldInclude) {
+                continue;
+              }
+            }
+            marks.push({
+              x: xPos,
+              y,
+              index,
+              color: colorGetter(index)
+            });
+          }
+        }
+        markPlotData.push({
+          seriesId,
+          clipId,
+          shape,
+          xAxisId,
+          marks
+        });
+      }
+    }
+    return markPlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, chartId, xAxes, yAxes, instance]);
+  return allData;
+}

package/PieChart/FocusedPieArc.d.ts

@@ -0,0 +1,2 @@
+import { type PieArcProps } from "./PieArc.js";
+export declare function FocusedPieArc(props: Partial<Omit<PieArcProps, 'startAngle' | 'endAngle' | 'id' | 'dataIndex' | 'isFaded' | 'isHighlighted' | 'isFocused'>>): import("react/jsx-runtime").JSX.Element | null;

package/PieChart/FocusedPieArc.js

@@ -0,0 +1,58 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusedPieArc = FocusedPieArc;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useFocusedItem = require("../hooks/useFocusedItem");
+var _usePieSeries = require("../hooks/usePieSeries");
+var _PieArc = require("./PieArc");
+var _useItemHighlighted = require("../hooks/useItemHighlighted");
+var _getModifiedArcProperties = require("./dataTransform/getModifiedArcProperties");
+var _jsxRuntime = require("react/jsx-runtime");
+function FocusedPieArc(props) {
+  const theme = (0, _styles.useTheme)();
+  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
+  const pieSeriesLayout = (0, _usePieSeries.usePieSeriesLayout)();
+  const {
+    isHighlighted,
+    isFaded
+  } = (0, _useItemHighlighted.useItemHighlighted)(focusedItem);
+  const pieSeries = (0, _usePieSeries.usePieSeriesContext)();
+  if (focusedItem === null || focusedItem.seriesType !== 'pie' || !pieSeries) {
+    return null;
+  }
+  const series = pieSeries?.series[focusedItem.seriesId];
+  const {
+    center,
+    radius
+  } = pieSeriesLayout[focusedItem.seriesId];
+  if (!series || !center || !radius) {
+    return null;
+  }
+  const item = series.data[focusedItem.dataIndex];
+  const arcSizes = (0, _getModifiedArcProperties.getModifiedArcProperties)(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArc.PieArc, (0, _extends2.default)({
+    transform: `translate(${pieSeriesLayout[series.id].center.x}, ${pieSeriesLayout[series.id].center.y})`,
+    startAngle: item.startAngle,
+    endAngle: item.endAngle,
+    color: "transparent",
+    pointerEvents: "none",
+    skipInteraction: true,
+    skipAnimation: true,
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    id: series.id,
+    className: _PieArc.pieArcClasses.focusIndicator,
+    dataIndex: focusedItem.dataIndex,
+    isFaded: false,
+    isHighlighted: false,
+    isFocused: false,
+    strokeWidth: 3
+  }, arcSizes, props));
+}

package/PieChart/PieArc.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PieItemId } from "../models/index.js";
+import { type PieItemId } from "../models/index.js";
 export interface PieArcClasses {
   /** Styles applied to the root element. */
   root: string;

package/PieChart/PieArcLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PieItemId } from "../models/seriesType/pie.js";
+import { type PieItemId } from "../models/seriesType/pie.js";
 export interface PieArcLabelClasses {
   /** Styles applied to the root element. */
   root: string;

package/PieChart/PieArcLabel.js

@@ -20,7 +20,7 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 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", "skipAnimation"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation"];
 function getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
@@ -51,6 +51,9 @@ const PieArcLabelRoot = (0, _styles.styled)('text', {
   animationName: 'animate-opacity',
   animationDuration: '0s',
   animationTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
+  transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
+  transitionProperty: 'opacity',
+  transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
   [`&.${pieArcLabelClasses.animate}`]: {
     animationDuration: `${_animation.ANIMATION_DURATION_MS}ms`
   },

package/PieChart/PieArcLabelPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ComputedPieRadius, DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
-import { PieArcLabelProps } from "./PieArcLabel.js";
+import { type ComputedPieRadius, type DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
+import { type PieArcLabelProps } from "./PieArcLabel.js";
 export interface PieArcLabelPlotSlots {
   pieArcLabel?: React.JSXElementConstructor<PieArcLabelProps>;
 }

package/PieChart/PieArcPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PieArcProps } from "./PieArc.js";
-import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from "../models/seriesType/pie.js";
+import { type PieArcProps } from "./PieArc.js";
+import { type ComputedPieRadius, type DefaultizedPieSeriesType, type DefaultizedPieValueType, type PieItemIdentifier } from "../models/seriesType/pie.js";
 export interface PieArcPlotSlots {
   pieArc?: React.JSXElementConstructor<PieArcProps>;
 }

package/PieChart/PieArcPlot.js

@@ -11,8 +11,6 @@ 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 _styles = require("@mui/material/styles");
-var _useFocusedItem = require("../hooks/useFocusedItem");
 var _PieArc = require("./PieArc");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -35,7 +33,6 @@ function PieArcPlot(props) {
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const theme = (0, _styles.useTheme)();
   const transformedData = (0, _useTransformData.useTransformData)({
     innerRadius,
     outerRadius,
@@ -46,18 +43,12 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const {
-    dataIndex,
-    seriesId,
-    seriesType
-  } = (0, _useFocusedItem.useFocusedItem)() ?? {};
-  const focusedItem = dataIndex !== undefined && seriesId === id && seriesType === 'pie' ? transformedData[dataIndex] : null;
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? _PieArc.PieArc;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, other, {
-    children: [transformedData.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+    children: transformedData.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
       startAngle: item.startAngle,
       endAngle: item.endAngle,
       paddingAngle: item.paddingAngle,
@@ -78,26 +69,7 @@ function PieArcPlot(props) {
           dataIndex: index
         }, item);
       })
-    }, slotProps?.pieArc), item.dataIndex)), focusedItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, {
-      startAngle: focusedItem.startAngle,
-      endAngle: focusedItem.endAngle,
-      paddingAngle: focusedItem.paddingAngle,
-      innerRadius: focusedItem.innerRadius,
-      color: "transparent",
-      pointerEvents: "none",
-      skipInteraction: true,
-      outerRadius: focusedItem.outerRadius,
-      cornerRadius: focusedItem.cornerRadius,
-      skipAnimation: true,
-      stroke: (theme.vars ?? theme).palette.text.primary,
-      id: id,
-      className: _PieArc.pieArcClasses.focusIndicator,
-      dataIndex: focusedItem.dataIndex,
-      isFaded: false,
-      isHighlighted: false,
-      isFocused: false,
-      strokeWidth: 3
-    })]
+    }, slotProps?.pieArc), item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/PieChart/PieChart.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { MakeOptional } from '@mui/x-internals/types';
-import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
-import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { PieSeriesType } from "../models/seriesType/index.js";
-import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
-import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
-import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from "./PiePlot.js";
-import { PieValueType } from "../models/seriesType/pie.js";
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
-import { PieChartPluginSignatures } from "./PieChart.plugins.js";
+import { type MakeOptional } from '@mui/x-internals/types';
+import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
+import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type PieSeriesType } from "../models/seriesType/index.js";
+import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
+import { type PiePlotProps, type PiePlotSlotProps, type PiePlotSlots } from "./PiePlot.js";
+import { type PieValueType } from "../models/seriesType/pie.js";
+import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/index.js";
+import { type PieChartPluginSignatures } from "./PieChart.plugins.js";
 export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;

package/PieChart/PieChart.js

@@ -23,6 +23,7 @@ var _useChartContainerProps = require("../ChartContainer/useChartContainerProps"
 var _ChartsWrapper = require("../ChartsWrapper");
 var _PieChart2 = require("./PieChart.plugins");
 var _defaultizeMargin = require("../internals/defaultizeMargin");
+var _FocusedPieArc = require("./FocusedPieArc");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
 /**
@@ -95,7 +96,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
           slots: slots,
           slotProps: slotProps,
           onItemClick: onItemClick
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedPieArc.FocusedPieArc, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
           loading: loading,
           slots: slots,
           slotProps: slotProps

package/PieChart/PieChart.plugins.d.ts

@@ -1,6 +1,7 @@
-import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type PieChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
+import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
+export type PieChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const PIE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<PieChartPluginSignatures>;

package/PieChart/PieChart.plugins.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PIE_CHART_PLUGINS = void 0;
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
-const PIE_CHART_PLUGINS = exports.PIE_CHART_PLUGINS = [_useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const PIE_CHART_PLUGINS = exports.PIE_CHART_PLUGINS = [_useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/PieChart/PiePlot.d.ts

@@ -1,5 +1,5 @@
-import { PieArcPlotProps, PieArcPlotSlotProps, PieArcPlotSlots } from "./PieArcPlot.js";
-import { PieArcLabelPlotSlots, PieArcLabelPlotSlotProps } from "./PieArcLabelPlot.js";
+import { type PieArcPlotProps, type PieArcPlotSlotProps, type PieArcPlotSlots } from "./PieArcPlot.js";
+import { type PieArcLabelPlotSlots, type PieArcLabelPlotSlotProps } from "./PieArcLabelPlot.js";
 export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
 export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
 export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {

package/PieChart/PiePlot.js

@@ -9,11 +9,8 @@ exports.PiePlot = PiePlot;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
-var _getPercentageValue = require("../internals/getPercentageValue");
-var _getPieCoordinates = require("./getPieCoordinates");
 var _usePieSeries = require("../hooks/usePieSeries");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
-var _hooks = require("../hooks");
 var _pieClasses = require("./pieClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -34,12 +31,7 @@ function PiePlot(props) {
     onItemClick
   } = props;
   const seriesData = (0, _usePieSeries.usePieSeriesContext)();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = (0, _hooks.useDrawingArea)();
+  const seriesLayout = (0, _usePieSeries.usePieSeriesLayout)();
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(inSkipAnimation);
   const classes = (0, _pieClasses.useUtilityClasses)();
   if (seriesData === undefined) {
@@ -52,36 +44,19 @@ function PiePlot(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
     children: [seriesOrder.map(seriesId => {
       const {
-        innerRadius: innerRadiusParam,
-        outerRadius: outerRadiusParam,
         cornerRadius,
         paddingAngle,
         data,
-        cx: cxParam,
-        cy: cyParam,
         highlighted,
         faded
       } = series[seriesId];
-      const {
-        cx,
-        cy,
-        availableRadius
-      } = (0, _getPieCoordinates.getPieCoordinates)({
-        cx: cxParam,
-        cy: cyParam
-      }, {
-        width,
-        height
-      });
-      const outerRadius = (0, _getPercentageValue.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
-      const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         className: classes.series,
-        transform: `translate(${left + cx}, ${top + cy})`,
+        transform: `translate(${seriesLayout[seriesId].center.x}, ${seriesLayout[seriesId].center.y})`,
         "data-series": seriesId,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcPlot.PieArcPlot, {
-          innerRadius: innerRadius,
-          outerRadius: outerRadius,
+          innerRadius: seriesLayout[seriesId].radius.inner,
+          outerRadius: seriesLayout[seriesId].radius.outer,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,
@@ -96,39 +71,20 @@ function PiePlot(props) {
       }, seriesId);
     }), seriesOrder.map(seriesId => {
       const {
-        innerRadius: innerRadiusParam,
-        outerRadius: outerRadiusParam,
-        arcLabelRadius: arcLabelRadiusParam,
         cornerRadius,
         paddingAngle,
         arcLabel,
         arcLabelMinAngle,
-        data,
-        cx: cxParam,
-        cy: cyParam
+        data
       } = series[seriesId];
-      const {
-        cx,
-        cy,
-        availableRadius
-      } = (0, _getPieCoordinates.getPieCoordinates)({
-        cx: cxParam,
-        cy: cyParam
-      }, {
-        width,
-        height
-      });
-      const outerRadius = (0, _getPercentageValue.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
-      const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
-      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : (0, _getPercentageValue.getPercentageValue)(arcLabelRadiusParam, availableRadius);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         className: classes.seriesLabels,
-        transform: `translate(${left + cx}, ${top + cy})`,
+        transform: `translate(${seriesLayout[seriesId].center.x}, ${seriesLayout[seriesId].center.y})`,
         "data-series": seriesId,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcLabelPlot.PieArcLabelPlot, {
-          innerRadius: innerRadius,
-          outerRadius: outerRadius ?? availableRadius,
-          arcLabelRadius: arcLabelRadius,
+          innerRadius: seriesLayout[seriesId].radius.inner,
+          outerRadius: seriesLayout[seriesId].radius.outer,
+          arcLabelRadius: seriesLayout[seriesId].radius.label,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,
           id: seriesId,

package/PieChart/dataTransform/getModifiedArcProperties.d.ts

@@ -0,0 +1,11 @@
+import type { DefaultizedPieSeriesType, PieSeriesLayout } from "../../models/seriesType/pie.js";
+/**
+ * Function that returns arc properties after applying transformation from highlight/fade states.
+ */
+export declare function getModifiedArcProperties(seriesDef: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlighted' | 'faded' | 'data'>, seriesLayout: Pick<PieSeriesLayout, 'radius'>, isHighlighted: boolean, isFaded: boolean): {
+  paddingAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  cornerRadius: number;
+  arcLabelRadius: number;
+};

package/PieChart/dataTransform/getModifiedArcProperties.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getModifiedArcProperties = getModifiedArcProperties;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _angleConversion = require("../../internals/angleConversion");
+/**
+ * Function that returns arc properties after applying transformation from highlight/fade states.
+ */
+function getModifiedArcProperties(seriesDef, seriesLayout, isHighlighted, isFaded) {
+  const {
+    faded,
+    highlighted,
+    paddingAngle: basePaddingAngle = 0,
+    cornerRadius: baseCornerRadius = 0
+  } = seriesDef;
+  const {
+    radius: {
+      inner: baseInnerRadius = 0,
+      label: baseArcLabelRadius,
+      outer: baseOuterRadius
+    }
+  } = seriesLayout;
+  const attributesOverride = (0, _extends2.default)({
+    additionalRadius: 0
+  }, isFaded && faded || isHighlighted && highlighted || {});
+  const paddingAngle = Math.max(0, (0, _angleConversion.deg2rad)(attributesOverride.paddingAngle ?? basePaddingAngle));
+  const innerRadius = Math.max(0, attributesOverride.innerRadius ?? baseInnerRadius);
+  const outerRadius = Math.max(0, attributesOverride.outerRadius ?? baseOuterRadius + attributesOverride.additionalRadius);
+  const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
+  const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
+  return {
+    paddingAngle,
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    arcLabelRadius
+  };
+}

package/PieChart/dataTransform/useTransformData.d.ts

@@ -1,4 +1,4 @@
-import { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType } from "../../models/seriesType/pie.js";
+import { type ComputedPieRadius, type DefaultizedPieSeriesType, type DefaultizedPieValueType } from "../../models/seriesType/pie.js";
 export interface AnimatedObject {
   innerRadius: number;
   outerRadius: number;

package/PieChart/dataTransform/useTransformData.js

@@ -11,18 +11,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
 var _useIsItemFocusedGetter = require("../../hooks/useIsItemFocusedGetter");
-var _angleConversion = require("../../internals/angleConversion");
+var _getModifiedArcProperties = require("./getModifiedArcProperties");
 function useTransformData(series) {
   const {
     id: seriesId,
     data,
     faded,
-    highlighted,
-    paddingAngle: basePaddingAngle = 0,
-    innerRadius: baseInnerRadius = 0,
-    arcLabelRadius: baseArcLabelRadius,
-    outerRadius: baseOuterRadius,
-    cornerRadius: baseCornerRadius = 0
+    highlighted
   } = series;
   const {
     isFaded: isItemFaded,
@@ -41,25 +36,25 @@ function useTransformData(series) {
       seriesId,
       dataIndex: itemIndex
     });
+
+    // TODO v9: Replace the second argument with the result of useSeriesLayout
+    const arcSizes = (0, _getModifiedArcProperties.getModifiedArcProperties)(series, {
+      radius: {
+        inner: series.innerRadius ?? 0,
+        outer: series.outerRadius,
+        label: series.arcLabelRadius ?? 0,
+        available: 0
+      }
+    }, isHighlighted, isFaded);
     const attributesOverride = (0, _extends2.default)({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
-    const paddingAngle = Math.max(0, (0, _angleConversion.deg2rad)(attributesOverride.paddingAngle ?? basePaddingAngle));
-    const innerRadius = Math.max(0, attributesOverride.innerRadius ?? baseInnerRadius);
-    const outerRadius = Math.max(0, attributesOverride.outerRadius ?? baseOuterRadius + attributesOverride.additionalRadius);
-    const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
-    const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
     return (0, _extends2.default)({}, item, attributesOverride, {
       dataIndex: itemIndex,
       isFaded,
       isHighlighted,
-      isFocused,
-      paddingAngle,
-      innerRadius,
-      outerRadius,
-      cornerRadius,
-      arcLabelRadius
-    });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, isItemFocused, seriesId]);
+      isFocused
+    }, arcSizes);
+  }), [data, seriesId, isItemHighlighted, isItemFaded, isItemFocused, series, faded, highlighted]);
   return dataWithHighlight;
 }

package/PieChart/getPieCoordinates.d.ts

@@ -1,5 +1,5 @@
-import { ChartDrawingArea } from "../hooks/index.js";
-import { DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
+import { type ChartDrawingArea } from "../hooks/index.js";
+import { type DefaultizedPieSeriesType } from "../models/seriesType/pie.js";
 export declare function getPieCoordinates(series: Pick<DefaultizedPieSeriesType, 'cx' | 'cy'>, drawing: Pick<ChartDrawingArea, 'width' | 'height'>): {
   cx: number;
   cy: number;

package/PieChart/seriesConfig/getColor.d.ts

@@ -1,3 +1,3 @@
-import { ColorProcessor } from "../../internals/plugins/models/index.js";
+import { type ColorProcessor } from "../../internals/plugins/models/index.js";
 declare const getColor: ColorProcessor<'pie'>;
 export default getColor;

package/PieChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 export declare const pieSeriesConfig: ChartSeriesTypeConfig<'pie'>;

package/PieChart/seriesConfig/index.js

@@ -9,11 +9,13 @@ var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
+var _seriesLayout = _interopRequireDefault(require("./seriesLayout"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 const pieSeriesConfig = exports.pieSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
+  seriesLayout: _seriesLayout.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
   tooltipItemPositionGetter: _tooltipPosition.default,

package/PieChart/seriesConfig/legend.d.ts

@@ -1,3 +1,3 @@
-import { LegendGetter } from "../../internals/plugins/models/index.js";
+import { type LegendGetter } from "../../internals/plugins/models/index.js";
 declare const legendGetter: LegendGetter<'pie'>;
 export default legendGetter;