@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/LineChart/useLineChartProps.js

@@ -2,9 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { calculateMargins } from "../internals/calculateMargins.js";
+
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -23,13 +25,13 @@ export const useLineChartProps = props => {
       colors,
       dataset,
       sx,
-      tooltip,
       onAxisClick,
       onAreaClick,
       onLineClick,
       onMarkClick,
       axisHighlight,
       disableLineItemHighlight,
+      hideLegend,
       grid,
       topAxis,
       leftAxis,
@@ -42,8 +44,7 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className,
-      experimentalMarkRendering
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -55,7 +56,12 @@ export const useLineChartProps = props => {
     }, s)),
     width,
     height,
-    margin,
+    margin: calculateMargins({
+      margin,
+      hideLegend,
+      slotProps,
+      series
+    }),
     colors,
     dataset,
     xAxis: xAxis ?? [{
@@ -66,10 +72,9 @@ export const useLineChartProps = props => {
       }, (_, index) => index)
     }],
     yAxis,
-    sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     className,
     skipAnimation
   });
@@ -100,8 +105,7 @@ export const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation,
-    experimentalRendering: experimentalMarkRendering
+    skipAnimation
   };
   const overlayProps = {
     slots,
@@ -127,11 +131,13 @@ export const useLineChartProps = props => {
     slots,
     slotProps
   };
-  const tooltipProps = _extends({}, tooltip, {
-    slots,
-    slotProps
-  });
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
   return {
+    chartsWrapperProps,
     chartContainerProps,
     axisClickHandlerProps,
     gridProps,
@@ -145,7 +151,6 @@ export const useLineChartProps = props => {
     axisHighlightProps,
     lineHighlightPlotProps,
     legendProps,
-    tooltipProps,
     children
   };
 };

package/PieChart/PieArc.js

@@ -22,10 +22,11 @@ const useUtilityClasses = ownerState => {
     classes,
     id,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    dataIndex
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${id}`, `data-index-${dataIndex}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return composeClasses(slots, getPieArcUtilityClass, classes);
 };
@@ -36,9 +37,9 @@ const PieArcRoot = styled(animated.path, {
 })(({
   theme
 }) => ({
+  // Got to move stroke to an element prop instead of style.
   stroke: (theme.vars || theme).palette.background.paper,
-  strokeWidth: 1,
-  strokeLinejoin: 'round'
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, filter 0.2s ease-in'
 }));
 function PieArc(props) {
   const {
@@ -75,11 +76,18 @@ function PieArc(props) {
       innerRadius: iR,
       outerRadius: oR
     })),
-    visibility: to([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible'),
+    visibility: to([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible')
+    // @ts-expect-error
+    ,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
-    className: classes.root
+    className: classes.root,
+    fill: ownerState.color,
+    opacity: ownerState.isFaded ? 0.3 : 1,
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
+    strokeWidth: 1,
+    strokeLinejoin: "round"
   }, other, getInteractionItemProps({
     type: 'pie',
     seriesId: id,

package/PieChart/PieArcLabel.js

@@ -84,15 +84,19 @@ function PieArcLabel(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
-    className: classes.root
-  }, other, {
-    style: _extends({
-      x: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-      y: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
-    }, style),
-    children: formattedArcLabel
-  }));
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error
+    _jsx(PieArcLabelRoot, _extends({
+      className: classes.root
+    }, other, {
+      style: _extends({
+        x: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
+        y: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
+      }, style),
+      children: formattedArcLabel
+    }))
+  );
 }
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------

package/PieChart/PieArcLabelPlot.js

@@ -7,7 +7,7 @@ const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadi
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { defaultLabelTransitionConfig } from "./dataTransform/transition.js";
+import { getDefaultLabelTransitionConfig } from "./dataTransform/transition.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { PieArcLabel } from "./PieArcLabel.js";
 import { getLabel } from "../internals/getLabel.js";
@@ -65,7 +65,7 @@ function PieArcLabelPlot(props) {
     faded,
     data
   });
-  const transition = useTransition(transformedData, _extends({}, defaultLabelTransitionConfig, {
+  const transition = useTransition(transformedData, _extends({}, getDefaultLabelTransitionConfig(skipAnimation), {
     immediate: skipAnimation
   }));
   if (data.length === 0) {
@@ -130,9 +130,10 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     color: PropTypes.string.isRequired,
     endAngle: PropTypes.number.isRequired,
     formattedValue: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     index: PropTypes.number.isRequired,
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    labelMarkType: PropTypes.oneOf(['circle', 'line', 'square']),
     padAngle: PropTypes.number.isRequired,
     startAngle: PropTypes.number.isRequired,
     value: PropTypes.number.isRequired

package/PieChart/PieArcPlot.js

@@ -2,13 +2,12 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
 import { PieArc } from "./PieArc.js";
-import { defaultTransitionConfig } from "./dataTransform/transition.js";
+import { getDefaultTransitionConfig } from "./dataTransform/transition.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function PieArcPlot(props) {
@@ -39,7 +38,7 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const transition = useTransition(transformedData, _extends({}, defaultTransitionConfig, {
+  const transition = useTransition(transformedData, _extends({}, getDefaultTransitionConfig(skipAnimation), {
     immediate: skipAnimation
   }));
   if (data.length === 0) {
@@ -47,16 +46,14 @@ function PieArcPlot(props) {
   }
   const Arc = slots?.pieArc ?? PieArc;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transition((_ref, item, _, index) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          cornerRadius: cR
-        } = _ref,
-        style = _objectWithoutPropertiesLoose(_ref, _excluded2);
+    children: transition(({
+      startAngle,
+      endAngle,
+      paddingAngle: pA,
+      innerRadius: iR,
+      outerRadius: oR,
+      cornerRadius: cR
+    }, item, _, index) => {
       return /*#__PURE__*/_jsx(Arc, _extends({
         startAngle: startAngle,
         endAngle: endAngle,
@@ -64,7 +61,6 @@ function PieArcPlot(props) {
         innerRadius: iR,
         outerRadius: oR,
         cornerRadius: cR,
-        style: style,
         id: id,
         color: item.color,
         dataIndex: index,
@@ -100,9 +96,10 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     color: PropTypes.string.isRequired,
     endAngle: PropTypes.number.isRequired,
     formattedValue: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     index: PropTypes.number.isRequired,
     label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    labelMarkType: PropTypes.oneOf(['circle', 'line', 'square']),
     padAngle: PropTypes.number.isRequired,
     startAngle: PropTypes.number.isRequired,
     value: PropTypes.number.isRequired

package/PieChart/PieChart.d.ts

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
 import { ChartContainerProps } from '../ChartContainer';
 import { PieSeriesType } from '../models/seriesType';
-import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from '../ChartsTooltip/ChartTooltip.types';
 import { ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import { PiePlotProps, PiePlotSlotProps, PiePlotSlots } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
-export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsTooltipSlots<'pie'>, ChartsOverlaySlots {
+export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {
 }
-export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps<'pie'>, ChartsOverlaySlotProps {
+export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {
 }
 export interface PieChartProps extends Omit<ChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins' | 'zAxis'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
     /**
@@ -17,12 +17,6 @@ export interface PieChartProps extends Omit<ChartContainerProps, 'series' | 'lef
      * An array of [[PieSeriesType]] objects.
      */
     series: MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[];
-    /**
-     * The configuration of the tooltip.
-     * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-     * @default { trigger: 'item' }
-     */
-    tooltip?: ChartsTooltipProps<'pie'>;
     /**
      * If `true`, the legend is not rendered.
      */

package/PieChart/PieChart.js

@@ -2,27 +2,23 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "tooltip", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useRtl } from '@mui/system/RtlProvider';
 import { useThemeProps } from '@mui/material/styles';
-import { ChartContainer } from "../ChartContainer/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
 import { PiePlot } from "./PiePlot.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
+import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
+import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
   top: 5,
   bottom: 5,
   left: 5,
-  right: 100
-};
-const defaultRTLMargin = {
-  top: 5,
-  bottom: 5,
-  left: 100,
   right: 5
 };
 
@@ -48,9 +44,6 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       margin: marginProps,
       colors,
       sx,
-      tooltip = {
-        trigger: 'item'
-      },
       skipAnimation,
       hideLegend,
       children,
@@ -63,43 +56,48 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const isRtl = useRtl();
-  const margin = _extends({}, isRtl ? defaultRTLMargin : defaultMargin, marginProps);
-  return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
-    ref: ref,
+  const margin = _extends({}, defaultMargin, marginProps);
+  const {
+    chartDataProviderProps,
+    chartsSurfaceProps
+  } = useChartContainerProps(_extends({}, other, {
     series: series.map(s => _extends({
       type: 'pie'
     }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    colors: colors,
-    sx: sx,
+    width,
+    height,
+    margin,
+    colors,
     disableAxisListener: true,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    className: className,
-    skipAnimation: skipAnimation,
-    children: [/*#__PURE__*/_jsx(PiePlot, {
-      slots: slots,
-      slotProps: slotProps,
-      onItemClick: onItemClick
-    }), /*#__PURE__*/_jsx(ChartsOverlay, {
-      loading: loading,
-      slots: slots,
-      slotProps: slotProps
-    }), !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
-      direction: "column",
-      position: {
-        vertical: 'middle',
-        horizontal: isRtl ? 'left' : 'right'
-      },
-      slots: slots,
-      slotProps: slotProps
-    }), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
-      slots: slots,
-      slotProps: slotProps
-    })), children]
+    highlightedItem,
+    onHighlightChange,
+    className,
+    skipAnimation
+  }), ref);
+  const Tooltip = slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, {
+      legendPosition: props.slotProps?.legend?.position,
+      legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
+      sx: sx,
+      children: [!hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
+        direction: props?.slotProps?.legend?.direction ?? 'vertical',
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [/*#__PURE__*/_jsx(PiePlot, {
+          slots: slots,
+          slotProps: slotProps,
+          onItemClick: onItemClick
+        }), /*#__PURE__*/_jsx(ChartsOverlay, {
+          loading: loading,
+          slots: slots,
+          slotProps: slotProps
+        }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+          trigger: "item"
+        }, slotProps?.tooltip)), children]
+      }))]
+    })
   }));
 });
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -107,6 +105,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: PropTypes.shape({
+    current: PropTypes.object
+  }),
   children: PropTypes.node,
   className: PropTypes.string,
   /**
@@ -134,12 +135,18 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   hideLegend: PropTypes.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -149,7 +156,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * 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,
@@ -167,16 +173,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Callback fired when a pie arc is clicked.
    */
   onItemClick: PropTypes.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * The series to display in the pie chart.
    * An array of [[PieSeriesType]] objects.
@@ -198,26 +194,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   * @default { trigger: 'item' }
-   */
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -253,7 +231,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, 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]),
@@ -264,7 +241,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -307,7 +283,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, 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]),
@@ -318,7 +293,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),

package/PieChart/PiePlot.js

@@ -2,13 +2,13 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingContext } from "../context/DrawingProvider.js";
 import { PieArcPlot } from "./PieArcPlot.js";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
 import { getPercentageValue } from "../internals/getPercentageValue.js";
 import { getPieCoordinates } from "./getPieCoordinates.js";
 import { usePieSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
+import { useDrawingArea } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -33,7 +33,7 @@ function PiePlot(props) {
     top,
     width,
     height
-  } = React.useContext(DrawingContext);
+  } = useDrawingArea();
   const skipAnimation = useSkipAnimation(inSkipAnimation);
   if (seriesData === undefined) {
     return null;

package/PieChart/dataTransform/transition.d.ts

@@ -1,4 +1,4 @@
 import { UseTransitionProps } from '@react-spring/web';
 import { ValueWithHighlight } from './useTransformData';
-export declare const defaultTransitionConfig: UseTransitionProps<ValueWithHighlight>;
-export declare const defaultLabelTransitionConfig: UseTransitionProps<ValueWithHighlight>;
+export declare const getDefaultTransitionConfig: (skipAnimation?: boolean) => UseTransitionProps<ValueWithHighlight>;
+export declare const getDefaultLabelTransitionConfig: (skipAnimation?: boolean) => UseTransitionProps<ValueWithHighlight>;

package/PieChart/dataTransform/transition.js

@@ -1,6 +1,6 @@
-export const defaultTransitionConfig = {
-  keys: item => item.id,
-  from: ({
+export const getDefaultTransitionConfig = skipAnimation => ({
+  keys: item => item.id ?? item.dataIndex,
+  from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,
     cornerRadius,
@@ -64,10 +64,10 @@ export const defaultTransitionConfig = {
     friction: 14,
     clamp: true
   }
-};
-export const defaultLabelTransitionConfig = {
-  keys: item => item.id,
-  from: ({
+});
+export const getDefaultLabelTransitionConfig = skipAnimation => ({
+  keys: item => item.id ?? item.dataIndex,
+  from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,
     arcLabelRadius,
@@ -134,4 +134,4 @@ export const defaultLabelTransitionConfig = {
     friction: 14,
     clamp: true
   }
-};
+});

package/PieChart/dataTransform/useTransformData.d.ts

@@ -9,6 +9,7 @@ export interface AnimatedObject {
     paddingAngle: number;
 }
 export interface ValueWithHighlight extends DefaultizedPieValueType, AnimatedObject {
+    dataIndex: number;
     isFaded: boolean;
     isHighlighted: boolean;
 }

package/PieChart/dataTransform/useTransformData.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useHighlighted } from "../../context/index.js";
+import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
 export function useTransformData(series) {
   const {
     id: seriesId,
@@ -18,7 +18,7 @@ export function useTransformData(series) {
   const {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
-  } = useHighlighted();
+  } = useItemHighlightedGetter();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const currentItem = {
       seriesId,
@@ -35,6 +35,7 @@ export function useTransformData(series) {
     const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
     const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
     return _extends({}, item, attributesOverride, {
+      dataIndex: itemIndex,
       isFaded,
       isHighlighted,
       paddingAngle,

package/PieChart/formatter.d.ts

@@ -1,3 +1,3 @@
-import { SeriesFormatter } from '../context/PluginProvider/SeriesFormatter.types';
-declare const formatter: SeriesFormatter<'pie'>;
+import { SeriesProcessor } from '../internals/plugins/models';
+declare const formatter: SeriesProcessor<'pie'>;
 export default formatter;