@mui/x-charts 8.0.0-beta.1 → 8.0.0-beta.3

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js

@@ -0,0 +1,22 @@
+import { createSelector } from "../../utils/selectors.js";
+import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
+import { generateSvg2rotation } from "./coordinateTransformation.js";
+import { getAxisIndex } from "./getAxisValue.js";
+import { selectorChartPolarCenter, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.js";
+export const selectorChartsInteractionRotationAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartPolarCenter, selectorChartRotationAxis], (x, y, center, rotationAxis) => {
+  if (x === null || y === null || !rotationAxis.axis[rotationAxis.axisIds[0]]) {
+    return null;
+  }
+  const rotation = generateSvg2rotation(center)(x, y);
+  return getAxisIndex(rotationAxis.axis[rotationAxis.axisIds[0]], rotation);
+});
+export const selectorChartsInteractionRotationAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartRotationAxis, selectorChartsInteractionRotationAxisIndex], (x, y, rotationAxis, rotationIndex) => {
+  if (x === null || y === null || rotationIndex === null || rotationIndex === -1) {
+    return null;
+  }
+  const data = rotationAxis.axis[rotationAxis.axisIds[0]]?.data;
+  if (!data) {
+    return null;
+  }
+  return data[rotationIndex];
+});

package/esm/internals/plugins/models/seriesConfig/seriesConfig.types.d.ts

@@ -3,7 +3,7 @@ import type { CartesianChartSeriesType, ChartSeriesType, PolarChartSeriesType }
 import type { ColorProcessor } from './colorProcessor.types';
 import type { CartesianExtremumGetter } from './cartesianExtremumGetter.types';
 import type { LegendGetter } from './legendGetter.types';
-import type { TooltipGetter } from './tooltipGetter.types';
+import type { AxisTooltipGetter, TooltipGetter } from './tooltipGetter.types';
 import { PolarExtremumGetter } from "./polarExtremumGetter.types.js";
 import { GetSeriesWithDefaultValues } from "./getSeriesWithDefaultValues.types.js";
 export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
@@ -15,8 +15,10 @@ export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
 } & (TSeriesType extends CartesianChartSeriesType ? {
   xExtremumGetter: CartesianExtremumGetter<TSeriesType>;
   yExtremumGetter: CartesianExtremumGetter<TSeriesType>;
+  axisTooltipGetter?: AxisTooltipGetter<TSeriesType, 'x' | 'y'>;
 } : {}) & (TSeriesType extends PolarChartSeriesType ? {
   rotationExtremumGetter: PolarExtremumGetter<TSeriesType>;
   radiusExtremumGetter: PolarExtremumGetter<TSeriesType>;
+  axisTooltipGetter?: AxisTooltipGetter<TSeriesType, 'rotation' | 'radius'>;
 } : {});
 export type ChartSeriesConfig<TSeriesType extends ChartSeriesType> = { [Key in TSeriesType]: ChartSeriesTypeConfig<Key> };

package/esm/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts

@@ -1,7 +1,13 @@
 import type { ItemTooltip } from '../../../../ChartsTooltip';
 import type { ChartItemIdentifier, ChartSeriesDefaultized, ChartSeriesType } from '../../../../models/seriesType/config';
-export type TooltipGetter<T extends ChartSeriesType> = (params: {
-  series: ChartSeriesDefaultized<T>;
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { AxisId } from "../../../../models/axis.js";
+export type TooltipGetter<TSeriesType extends ChartSeriesType> = (params: {
+  series: ChartSeriesDefaultized<TSeriesType>;
   getColor: (dataIndex: number) => string;
-  identifier: ChartItemIdentifier<T> | null;
-}) => ItemTooltip<T> | null;
+  identifier: ChartItemIdentifier<TSeriesType> | null;
+}) => ItemTooltip<TSeriesType> | null;
+export type AxisTooltipGetter<TSeriesType extends ChartSeriesType, Directions extends 'x' | 'y' | 'rotation' | 'radius' = 'x' | 'y'> = (series: Record<SeriesId, ChartSeriesDefaultized<TSeriesType>>) => {
+  direction: Directions;
+  axisId: AxisId | undefined;
+}[];

package/esm/internals/shallowEqual.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ *
+ * Source: https://github.com/facebook/react/blob/c2a196174763e0b4f16ed1c512ed4442b062395e/packages/shared/shallowEqual.js#L18
+ */
+export declare function shallowEqual(objA: unknown, objB: unknown): boolean;

package/esm/internals/shallowEqual.js

@@ -0,0 +1,31 @@
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ *
+ * Source: https://github.com/facebook/react/blob/c2a196174763e0b4f16ed1c512ed4442b062395e/packages/shared/shallowEqual.js#L18
+ */
+export function shallowEqual(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  // Test for A's keys different from B.
+  for (let i = 0; i < keysA.length; i += 1) {
+    const currentKey = keysA[i];
+    if (!Object.prototype.hasOwnProperty.call(objB, currentKey) ||
+    // @ts-ignore
+    !Object.is(objA[currentKey], objB[currentKey])) {
+      return false;
+    }
+  }
+  return true;
+}

package/esm/models/axis.d.ts

@@ -335,6 +335,10 @@ type CommonAxisConfig<S extends ScaleName = ScaleName, V = any> = {
     min: number;
     max: number;
   });
+  /**
+   * If `true`, the axis will be ignored by the tooltip with `trigger='axis'`.
+   */
+  ignoreTooltip?: boolean;
 };
 export type PolarAxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps extends ChartsAxisProps = ChartsRotationAxisProps | ChartsRadiusAxisProps> = {
   /**
@@ -361,6 +365,10 @@ export type AxisDefaultized<S extends ScaleName = ScaleName, V = any, AxisProps
    * An indication of the expected number of ticks.
    */
   tickNumber: number;
+  /**
+   * Indicate if the axis should be consider by a tooltip with `trigger='axis'`.
+   */
+  triggerTooltip?: boolean;
 } & (AxisProps extends ChartsXAxisProps ? MakeRequired<AxisSideConfig<AxisProps>, 'height'> : AxisProps extends ChartsYAxisProps ? MakeRequired<AxisSideConfig<AxisProps>, 'width'> : AxisSideConfig<AxisProps>);
 export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'band'> & {
   scaleType: 'band';

package/esm/themeAugmentation/overrides.d.ts

@@ -1,5 +1,5 @@
 import { BarLabelClassKey } from "../BarChart/index.js";
-import { BarElementClassKey } from "../BarChart/BarElement.js";
+import { BarElementClassKey } from "../BarChart/barElementClasses.js";
 import { ChartsAxisHighlightClassKey } from "../ChartsAxisHighlight/index.js";
 import { ChartsGridClassKey } from "../ChartsGrid/index.js";
 import { ChartsTooltipClassKey } from "../ChartsTooltip/index.js";

package/hooks/animation/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./useAnimateArea.js";
+export * from "./useAnimateBar.js";
+export * from "./useAnimateBarLabel.js";
+export * from "./useAnimateLine.js";
+export * from "./useAnimatePieArc.js";
+export * from "./useAnimatePieArcLabel.js";

package/hooks/animation/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useAnimateArea = require("./useAnimateArea");
+Object.keys(_useAnimateArea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnimateArea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAnimateArea[key];
+    }
+  });
+});
+var _useAnimateBar = require("./useAnimateBar");
+Object.keys(_useAnimateBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnimateBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAnimateBar[key];
+    }
+  });
+});
+var _useAnimateBarLabel = require("./useAnimateBarLabel");
+Object.keys(_useAnimateBarLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnimateBarLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAnimateBarLabel[key];
+    }
+  });
+});
+var _useAnimateLine = require("./useAnimateLine");
+Object.keys(_useAnimateLine).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnimateLine[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAnimateLine[key];
+    }
+  });
+});
+var _useAnimatePieArc = require("./useAnimatePieArc");
+Object.keys(_useAnimatePieArc).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnimatePieArc[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAnimatePieArc[key];
+    }
+  });
+});
+var _useAnimatePieArcLabel = require("./useAnimatePieArcLabel");
+Object.keys(_useAnimatePieArcLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnimatePieArcLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAnimatePieArcLabel[key];
+    }
+  });
+});

package/hooks/animation/useAnimateArea.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { AnimatedAreaProps } from '../../LineChart';
+type UseAnimateAreaParams = Pick<AnimatedAreaProps, 'd' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimatedAreaReturn = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+};
+/** Animates an area of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateArea(props: UseAnimateAreaParams): UseAnimatedAreaReturn;
+export {};

package/hooks/animation/useAnimateArea.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateArea = useAnimateArea;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useAnimate = require("../../internals/animation/useAnimate");
+/** Animates an area of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+function useAnimateArea(props) {
+  const ref = (0, _useAnimate.useAnimate)({
+    d: props.d
+  }, {
+    createInterpolator: (lastProps, newProps) => {
+      const interpolate = (0, _d3Interpolate.interpolateString)(lastProps.d, newProps.d);
+      return t => ({
+        d: interpolate(t)
+      });
+    },
+    applyProps: (element, {
+      d
+    }) => element.setAttribute('d', d),
+    skip: props.skipAnimation
+  });
+  return {
+    ref: (0, _useForkRef.default)(ref, props.ref),
+    d: props.d
+  };
+}

package/hooks/animation/useAnimateBar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { BarProps } from '../../BarChart/AnimatedBarElement';
+type UseAnimateBarParams = Pick<BarProps, 'x' | 'y' | 'xOrigin' | 'yOrigin' | 'width' | 'height' | 'skipAnimation' | 'layout'> & {
+  ref?: React.Ref<SVGRectElement>;
+};
+type UseAnimateBarReturnValue = {
+  ref: React.Ref<SVGRectElement>;
+} & Pick<BarProps, 'x' | 'y' | 'width' | 'height'>;
+/**
+ * Animates a bar from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to its
+ * final position.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateBar(props: UseAnimateBarParams): UseAnimateBarReturnValue;
+export {};

package/hooks/animation/useAnimateBar.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateBar = useAnimateBar;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("../../internals/animation/useAnimate");
+function barPropsInterpolator(from, to) {
+  const interpolateX = (0, _d3Interpolate.interpolateNumber)(from.x, to.x);
+  const interpolateY = (0, _d3Interpolate.interpolateNumber)(from.y, to.y);
+  const interpolateWidth = (0, _d3Interpolate.interpolateNumber)(from.width, to.width);
+  const interpolateHeight = (0, _d3Interpolate.interpolateNumber)(from.height, to.height);
+  return t => {
+    return {
+      x: interpolateX(t),
+      y: interpolateY(t),
+      width: interpolateWidth(t),
+      height: interpolateHeight(t)
+    };
+  };
+}
+
+/**
+ * Animates a bar from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to its
+ * final position.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+function useAnimateBar(props) {
+  const initialProps = {
+    x: props.layout === 'vertical' ? props.x : props.xOrigin,
+    y: props.layout === 'vertical' ? props.yOrigin : props.y,
+    width: props.layout === 'vertical' ? props.width : 0,
+    height: props.layout === 'vertical' ? 0 : props.height
+  };
+  const ref = (0, _useAnimate.useAnimate)({
+    x: props.x,
+    y: props.y,
+    width: props.width,
+    height: props.height
+  }, {
+    createInterpolator: barPropsInterpolator,
+    applyProps(element, animatedProps) {
+      element.setAttribute('x', animatedProps.x.toString());
+      element.setAttribute('y', animatedProps.y.toString());
+      element.setAttribute('width', animatedProps.width.toString());
+      element.setAttribute('height', animatedProps.height.toString());
+    },
+    initialProps,
+    skip: props.skipAnimation
+  });
+  const usedProps = props.skipAnimation ? props : initialProps;
+  return {
+    ref,
+    x: usedProps.x,
+    y: usedProps.y,
+    width: usedProps.width,
+    height: usedProps.height
+  };
+}

package/hooks/animation/useAnimateBarLabel.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { BarLabelProps } from '../../BarChart';
+type UseAnimateBarLabelParams = Pick<BarLabelProps, 'xOrigin' | 'yOrigin' | 'x' | 'y' | 'width' | 'height' | 'layout' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGTextElement>;
+};
+type UseAnimateBarLabelReturn = {
+  ref: React.Ref<SVGTextElement>;
+} & Pick<BarLabelProps, 'x' | 'y' | 'width' | 'height'>;
+/**
+ * Animates a bar label from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to the
+ * center of the bar it belongs to.
+ * The label is horizontally centered within the bar when the layout is vertical, and vertically centered for laid out
+ * horizontally.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateBarLabel(props: UseAnimateBarLabelParams): UseAnimateBarLabelReturn;
+export {};

package/hooks/animation/useAnimateBarLabel.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateBarLabel = useAnimateBarLabel;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("../../internals/animation/useAnimate");
+function barLabelPropsInterpolator(from, to) {
+  const interpolateX = (0, _d3Interpolate.interpolateNumber)(from.x, to.x);
+  const interpolateY = (0, _d3Interpolate.interpolateNumber)(from.y, to.y);
+  const interpolateWidth = (0, _d3Interpolate.interpolateNumber)(from.width, to.width);
+  const interpolateHeight = (0, _d3Interpolate.interpolateNumber)(from.height, to.height);
+  return t => {
+    return {
+      x: interpolateX(t),
+      y: interpolateY(t),
+      width: interpolateWidth(t),
+      height: interpolateHeight(t)
+    };
+  };
+}
+
+/**
+ * Animates a bar label from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to the
+ * center of the bar it belongs to.
+ * The label is horizontally centered within the bar when the layout is vertical, and vertically centered for laid out
+ * horizontally.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+function useAnimateBarLabel(props) {
+  const initialProps = {
+    x: props.layout === 'vertical' ? props.x + props.width / 2 : props.xOrigin,
+    y: props.layout === 'vertical' ? props.yOrigin : props.y + props.height / 2,
+    width: props.width,
+    height: props.height
+  };
+  const currentProps = {
+    x: props.x + props.width / 2,
+    y: props.y + props.height / 2,
+    width: props.width,
+    height: props.height
+  };
+  const ref = (0, _useAnimate.useAnimate)(currentProps, {
+    createInterpolator: barLabelPropsInterpolator,
+    applyProps(element, animatedProps) {
+      element.setAttribute('x', animatedProps.x.toString());
+      element.setAttribute('y', animatedProps.y.toString());
+      element.setAttribute('width', animatedProps.width.toString());
+      element.setAttribute('height', animatedProps.height.toString());
+    },
+    initialProps,
+    skip: props.skipAnimation
+  });
+  const usedProps = props.skipAnimation ? currentProps : initialProps;
+  return {
+    ref,
+    x: usedProps.x,
+    y: usedProps.y,
+    width: usedProps.width,
+    height: usedProps.height
+  };
+}

package/hooks/animation/useAnimateLine.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { AnimatedLineProps } from '../../LineChart';
+type UseAnimateLineParams = Pick<AnimatedLineProps, 'd' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimatedReturnValue = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+};
+/** Animates a line of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export declare function useAnimateLine(props: UseAnimateLineParams): UseAnimatedReturnValue;
+export {};

package/hooks/animation/useAnimateLine.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateLine = useAnimateLine;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useAnimate = require("../../internals/animation/useAnimate");
+/** Animates a line of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+function useAnimateLine(props) {
+  const ref = (0, _useAnimate.useAnimate)({
+    d: props.d
+  }, {
+    createInterpolator: (lastProps, newProps) => {
+      const interpolate = (0, _d3Interpolate.interpolateString)(lastProps.d, newProps.d);
+      return t => ({
+        d: interpolate(t)
+      });
+    },
+    applyProps: (element, {
+      d
+    }) => element.setAttribute('d', d),
+    skip: props.skipAnimation
+  });
+  return {
+    ref: (0, _useForkRef.default)(ref, props.ref),
+    d: props.d
+  };
+}

package/hooks/animation/useAnimatePieArc.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { PieArcProps } from '../../PieChart';
+type UseAnimatePieArcParams = Pick<PieArcProps, 'startAngle' | 'endAngle' | 'cornerRadius' | 'paddingAngle' | 'innerRadius' | 'outerRadius' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimatePieArcReturnValue = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+  visibility: 'hidden' | 'visible';
+};
+/** Animates a slice of a pie chart by increasing the start and end angles from the middle angle to their final values.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export declare function useAnimatePieArc(props: UseAnimatePieArcParams): UseAnimatePieArcReturnValue;
+export {};

package/hooks/animation/useAnimatePieArc.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatePieArc = useAnimatePieArc;
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("../../internals/animation/useAnimate");
+function pieArcPropsInterpolator(from, to) {
+  const interpolateStartAngle = (0, _d3Interpolate.interpolateNumber)(from.startAngle, to.startAngle);
+  const interpolateEndAngle = (0, _d3Interpolate.interpolateNumber)(from.endAngle, to.endAngle);
+  const interpolateInnerRadius = (0, _d3Interpolate.interpolateNumber)(from.innerRadius, to.innerRadius);
+  const interpolateOuterRadius = (0, _d3Interpolate.interpolateNumber)(from.outerRadius, to.outerRadius);
+  const interpolatePaddingAngle = (0, _d3Interpolate.interpolateNumber)(from.paddingAngle, to.paddingAngle);
+  const interpolateCornerRadius = (0, _d3Interpolate.interpolateNumber)(from.cornerRadius, to.cornerRadius);
+  return t => {
+    return {
+      startAngle: interpolateStartAngle(t),
+      endAngle: interpolateEndAngle(t),
+      innerRadius: interpolateInnerRadius(t),
+      outerRadius: interpolateOuterRadius(t),
+      paddingAngle: interpolatePaddingAngle(t),
+      cornerRadius: interpolateCornerRadius(t)
+    };
+  };
+}
+
+/** Animates a slice of a pie chart by increasing the start and end angles from the middle angle to their final values.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+function useAnimatePieArc(props) {
+  const initialProps = {
+    startAngle: (props.startAngle + props.endAngle) / 2,
+    endAngle: (props.startAngle + props.endAngle) / 2,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  };
+  const ref = (0, _useAnimate.useAnimate)({
+    startAngle: props.startAngle,
+    endAngle: props.endAngle,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  }, {
+    createInterpolator: pieArcPropsInterpolator,
+    applyProps(element, animatedProps) {
+      element.setAttribute('d', (0, _d3Shape.arc)().cornerRadius(animatedProps.cornerRadius)({
+        padAngle: animatedProps.paddingAngle,
+        innerRadius: animatedProps.innerRadius,
+        outerRadius: animatedProps.outerRadius,
+        startAngle: animatedProps.startAngle,
+        endAngle: animatedProps.endAngle
+      }).toString());
+      element.setAttribute('visibility', animatedProps.startAngle === animatedProps.endAngle ? 'hidden' : 'visible');
+    },
+    initialProps,
+    skip: props.skipAnimation
+  });
+  const usedProps = props.skipAnimation ? props : initialProps;
+  return {
+    ref: (0, _useForkRef.default)(ref, props.ref),
+    d: (0, _d3Shape.arc)().cornerRadius(usedProps.cornerRadius)({
+      padAngle: usedProps.paddingAngle,
+      innerRadius: usedProps.innerRadius,
+      outerRadius: usedProps.outerRadius,
+      startAngle: usedProps.startAngle,
+      endAngle: usedProps.endAngle
+    }),
+    visibility: usedProps.startAngle === usedProps.endAngle ? 'hidden' : 'visible'
+  };
+}

package/hooks/animation/useAnimatePieArcLabel.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { PieArcLabelProps } from '../../PieChart';
+type UseAnimatePieArcLabelParams = Pick<PieArcLabelProps, 'startAngle' | 'endAngle' | 'cornerRadius' | 'paddingAngle' | 'innerRadius' | 'outerRadius' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGTextElement>;
+};
+type UseAnimatePieArcLabelReturn = {
+  ref: React.Ref<SVGTextElement>;
+  x: number;
+  y: number;
+};
+/** Animates the label of pie slice from its middle point to the centroid of the slice.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export declare function useAnimatePieArcLabel(props: UseAnimatePieArcLabelParams): UseAnimatePieArcLabelReturn;
+export {};