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

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js

@@ -2,40 +2,74 @@ import { createSelector } from "../../utils/selectors.js";
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
 import { getAxisIndex, getAxisValue } from "./getAxisValue.js";
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
-export const selectorChartsInteractionXAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis], (x, xAxes) => {
-  if (x === null || !xAxes.axis[xAxes.axisIds[0]]) {
+const optionalGetAxisId = (_, id) => id;
+const optionalGetAxisIds = (_, ids) => ids;
+
+/**
+ * Get interaction indexes
+ */
+
+function indexGetter(value, axes, ids = axes.axisIds[0]) {
+  return Array.isArray(ids) ? ids.map(id => getAxisIndex(axes.axis[id], value)) : getAxisIndex(axes.axis[ids], value);
+}
+export const selectorChartsInteractionXAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, optionalGetAxisId], (value, axes, id) => value === null ? null : indexGetter(value, axes, id));
+export const selectorChartsInteractionXAxisIndexes = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, optionalGetAxisIds], (value, axes, ids) => value === null ? null : indexGetter(value, axes, ids));
+export const selectorChartsInteractionYAxisIndex = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, optionalGetAxisId], (value, axes, id) => value === null ? null : indexGetter(value, axes, id));
+export const selectorChartsInteractionYAxisIndexes = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, optionalGetAxisIds], (value, axes, ids) => value === null ? null : indexGetter(value, axes, ids));
+
+/**
+ * Get interaction values
+ */
+
+function valueGetter(value, axes, indexes, ids = axes.axisIds[0]) {
+  return Array.isArray(ids) ? ids.map((id, axisIndex) => getAxisValue(axes.axis[id], value, indexes[axisIndex])) : getAxisValue(axes.axis[ids], value, indexes);
+}
+export const selectorChartsInteractionXAxisValues = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndexes, optionalGetAxisIds], (value, axes, indexes, ids) => value === null ? null : valueGetter(value, axes, indexes, ids));
+export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex, optionalGetAxisId], (x, xAxes, xIndex, id) => {
+  if (x === null || xIndex === null || xAxes.axisIds.length === 0) {
     return null;
   }
-  return getAxisIndex(xAxes.axis[xAxes.axisIds[0]], x);
+  return valueGetter(x, xAxes, xIndex, id);
 });
-export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex], (x, xAxes, xIndex) => {
-  if (x === null || xIndex === null || !xAxes.axis[xAxes.axisIds[0]]) {
+export const selectorChartsInteractionYAxisValues = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndexes, optionalGetAxisIds], (value, axes, indexes, ids) => value === null ? null : valueGetter(value, axes, indexes, ids));
+export const selectorChartsInteractionYAxisValue = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndex, optionalGetAxisId], (y, yAxes, yIndex, id) => {
+  if (y === null || yIndex === null || yAxes.axisIds.length === 0) {
     return null;
   }
-  return getAxisValue(xAxes.axis[xAxes.axisIds[0]], x, xIndex);
+  return valueGetter(y, yAxes, yIndex, id);
 });
-export const selectorChartsInteractionYAxisIndex = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis], (y, yAxes) => {
-  if (y === null || !yAxes.axis[yAxes.axisIds[0]]) {
-    return null;
+
+/**
+ * Get x-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipXAxes = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis], (value, axes) => {
+  if (value === null) {
+    return [];
   }
-  return getAxisIndex(yAxes.axis[yAxes.axisIds[0]], y);
+  return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
+    axisId,
+    dataIndex: getAxisIndex(axes.axis[axisId], value)
+  })).filter(({
+    dataIndex
+  }) => dataIndex >= 0);
 });
-export const selectorChartsInteractionYAxisValue = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndex], (y, yAxes, yIndex) => {
-  if (y === null || yIndex === null || !yAxes.axis[yAxes.axisIds[0]]) {
-    return null;
+
+/**
+ * Get y-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipYAxes = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis], (value, axes) => {
+  if (value === null) {
+    return [];
   }
-  return getAxisValue(yAxes.axis[yAxes.axisIds[0]], y, yIndex);
-});
-// TODO: probably remove in favor of the two more specific.
-export const selectorChartsInteractionXAxis = createSelector([selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue], (index, value) => index === null || value === null ? null : {
-  index,
-  value
-});
-export const selectorChartsInteractionYAxis = createSelector([selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue], (index, value) => index === null || value === null ? null : {
-  index,
-  value
+  return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
+    axisId,
+    dataIndex: getAxisIndex(axes.axis[axisId], value)
+  })).filter(({
+    dataIndex
+  }) => dataIndex >= 0);
 });
 
-// TODO: probably remove in favor of the two more specific.
-export const selectorChartsInteractionXAxisIsDefined = createSelector([selectorChartsInteractionXAxisIndex], index => index !== null && index >= 0);
-export const selectorChartsInteractionYAxisIsDefined = createSelector([selectorChartsInteractionYAxisIndex], index => index !== null && index >= 0);
+/**
+ * Return `true` if the axis tooltip has something to display.
+ */
+export const selectorChartsInteractionAxisTooltip = createSelector([selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes], (xTooltip, yTooltip) => xTooltip.length > 0 || yTooltip.length > 0);

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 {};