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

package/hooks/animation/useAnimate.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+export interface UseAnimateParams<Props extends {}, Elem extends Element, T extends {} = Props> {
+  /**
+   * Function that returns the interpolation function for animating props.
+   *
+   * @param {object} lastProps Props to animate from, i.e., props when the animation was last stopped. If this is the first
+   * animation, this value be `initialProps`.
+   * @param {object} newProps Props to animate to.
+   *
+   * @returns {function} Interpolation function that takes a time value between 0 and 1 and returns the interpolated
+   * props at time t. This function is called on every frame of the animation.
+   */
+  createInterpolator: (lastProps: Props, newProps: Props) => (t: number) => Props;
+  /**
+   * Transforms the interpolated props to be passed to `applyProps`, which usually means transforming them to element
+   * attributes, e.g., transforming an array of points into a `d` attribute for a path.
+   *
+   * @param {object} props The interpolated props.
+   *
+   * @returns {object} The transformed props.
+   */
+  transformProps: (props: Props) => T;
+  /**
+   * Applies the transformed props to the element. Usually this will be a call to `element.setAttribute("x", x)` or
+   * to `element.style.width = width` so that updating the element does not go through the React lifecycle (i.e., not
+   * causing a re-render), with the objective of improving performance.
+   *
+   * This function is called on every frame of the animation.
+   * @param {Element} element The element to apply the props to.
+   * @param {object} props The transformed props to apply to the element.
+   */
+  applyProps: (element: Elem, props: T) => void;
+  /**
+   * If `true`, the animation will be skipped and the final props will be applied immediately.
+   */
+  skip?: boolean;
+  /**
+   * Initial props to animate from. If not provided, defaults to the props passed as the first argument of `useAnimate`.
+   */
+  initialProps?: Props;
+  /**
+   * Optional ref to merge with the ref returned from this hook.
+   */
+  ref?: React.Ref<Elem>;
+}
+export type UseAnimateReturn<Elem extends Element, T extends {}> = Omit<T, 'ref'> & {
+  /**
+   * Ref to be passed to the element to animate.
+   */
+  ref: React.Ref<Elem>;
+};
+/**
+ * Hook to customize the animation of an element.
+ * Animates a ref from `initialProps` to `props`.
+ *
+ * @param {object} props The props to animate to.
+ *
+ * @returns an object containing a ref that should be passed to the element to animate and the transformed props.
+ * If `skip` is true, the transformed props are the `props` to animate to; if it is false, the transformed props are the
+ * `initialProps`.
+ *
+ * The animated props are only accessible in `applyProps`. The props returned from this hook are not animated.
+ *
+ * When an animation starts, an interpolator is created using `createInterpolator`.
+ * On every animation frame:
+ * 1. The interpolator is called to get the interpolated props;
+ * 2. `transformProps` is called to transform the interpolated props;
+ * 3. `applyProps` is called to apply the transformed props to the element.
+ *
+ * If `props` change while an animation is progress, the animation will continue towards the new `props`.
+ *
+ * The animation can be skipped by setting `skip` to true. If a transition is in progress, it will immediately end
+ * and `applyProps` be called with the final value. If there isn't a transition in progress, a new one won't be
+ * started and `applyProps` will not be called.
+ * */
+export declare function useAnimate<Props extends {}, Elem extends Element, T extends {} = Props>(props: Props, {
+  createInterpolator,
+  transformProps,
+  applyProps,
+  skip,
+  initialProps,
+  ref
+}: UseAnimateParams<Props, Elem, T>): UseAnimateReturn<Elem, T>;

package/hooks/animation/useAnimate.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimate = useAnimate;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useAnimateInternal = require("../../internals/animation/useAnimateInternal");
+/**
+ * Hook to customize the animation of an element.
+ * Animates a ref from `initialProps` to `props`.
+ *
+ * @param {object} props The props to animate to.
+ *
+ * @returns an object containing a ref that should be passed to the element to animate and the transformed props.
+ * If `skip` is true, the transformed props are the `props` to animate to; if it is false, the transformed props are the
+ * `initialProps`.
+ *
+ * The animated props are only accessible in `applyProps`. The props returned from this hook are not animated.
+ *
+ * When an animation starts, an interpolator is created using `createInterpolator`.
+ * On every animation frame:
+ * 1. The interpolator is called to get the interpolated props;
+ * 2. `transformProps` is called to transform the interpolated props;
+ * 3. `applyProps` is called to apply the transformed props to the element.
+ *
+ * If `props` change while an animation is progress, the animation will continue towards the new `props`.
+ *
+ * The animation can be skipped by setting `skip` to true. If a transition is in progress, it will immediately end
+ * and `applyProps` be called with the final value. If there isn't a transition in progress, a new one won't be
+ * started and `applyProps` will not be called.
+ * */
+function useAnimate(props, {
+  createInterpolator,
+  transformProps,
+  applyProps,
+  skip,
+  initialProps = props,
+  ref
+}) {
+  const transform = transformProps ?? (p => p);
+  const animateRef = (0, _useAnimateInternal.useAnimateInternal)(props, {
+    initialProps,
+    createInterpolator,
+    applyProps: (element, animatedProps) => applyProps(element, transform(animatedProps)),
+    skip
+  });
+  const usedProps = skip ? props : initialProps;
+  return (0, _extends2.default)({}, transformProps(usedProps), {
+    ref: (0, _useForkRef.default)(animateRef, ref)
+  });
+}

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,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateArea = useAnimateArea;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("./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) {
+  return (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),
+    transformProps: p => p,
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

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,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateBar = useAnimateBar;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("./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
+  };
+  return (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());
+    },
+    transformProps: p => p,
+    initialProps,
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

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,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateBarLabel = useAnimateBarLabel;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("./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
+  };
+  return (0, _useAnimate.useAnimate)(currentProps, {
+    createInterpolator: barLabelPropsInterpolator,
+    transformProps: p => p,
+    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,
+    ref: props.ref
+  });
+}

package/hooks/animation/useAnimateGaugeValueArc.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface UseAnimateGaugeValueArcParams {
+  ref?: React.Ref<SVGPathElement>;
+  startAngle: number;
+  endAngle: number;
+  cornerRadius: number;
+  innerRadius: number;
+  outerRadius: number;
+  skipAnimation: boolean;
+}
+type UseAnimateGaugeValueArcReturnValue = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+};
+/** Animates a arc of a gauge chart by increasing the `endAngle` from the start angle to the end angle.
+ * 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 useAnimateGaugeValueArc(props: UseAnimateGaugeValueArcParams): UseAnimateGaugeValueArcReturnValue;
+export {};

package/hooks/animation/useAnimateGaugeValueArc.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateGaugeValueArc = useAnimateGaugeValueArc;
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("./useAnimate");
+function gaugeValueArcPropsInterpolator(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 interpolateCornerRadius = (0, _d3Interpolate.interpolateNumber)(from.cornerRadius, to.cornerRadius);
+  return t => {
+    return {
+      startAngle: interpolateStartAngle(t),
+      endAngle: interpolateEndAngle(t),
+      innerRadius: interpolateInnerRadius(t),
+      outerRadius: interpolateOuterRadius(t),
+      cornerRadius: interpolateCornerRadius(t)
+    };
+  };
+}
+
+/** Animates a arc of a gauge chart by increasing the `endAngle` from the start angle to the end angle.
+ * 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 useAnimateGaugeValueArc(props) {
+  return (0, _useAnimate.useAnimate)({
+    startAngle: props.startAngle,
+    endAngle: props.endAngle,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    cornerRadius: props.cornerRadius
+  }, {
+    createInterpolator: gaugeValueArcPropsInterpolator,
+    transformProps: p => ({
+      d: (0, _d3Shape.arc)().cornerRadius(p.cornerRadius)({
+        innerRadius: p.innerRadius,
+        outerRadius: p.outerRadius,
+        startAngle: p.startAngle,
+        endAngle: p.endAngle
+      })
+    }),
+    applyProps(element, p) {
+      element.setAttribute('d', p.d);
+    },
+    initialProps: {
+      startAngle: props.startAngle,
+      endAngle: props.startAngle,
+      innerRadius: props.innerRadius,
+      outerRadius: props.outerRadius,
+      cornerRadius: props.cornerRadius
+    },
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

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,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimateLine = useAnimateLine;
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("./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) {
+  return (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,
+    transformProps: p => p,
+    ref: props.ref
+  });
+}

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,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatePieArc = useAnimatePieArc;
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("./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
+  };
+  return (0, _useAnimate.useAnimate)({
+    startAngle: props.startAngle,
+    endAngle: props.endAngle,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  }, {
+    createInterpolator: pieArcPropsInterpolator,
+    transformProps: p => ({
+      d: (0, _d3Shape.arc)().cornerRadius(p.cornerRadius)({
+        padAngle: p.paddingAngle,
+        innerRadius: p.innerRadius,
+        outerRadius: p.outerRadius,
+        startAngle: p.startAngle,
+        endAngle: p.endAngle
+      }),
+      visibility: p.startAngle === p.endAngle ? 'hidden' : 'visible'
+    }),
+    applyProps(element, p) {
+      element.setAttribute('d', p.d);
+      element.setAttribute('visibility', p.visibility);
+    },
+    initialProps,
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

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

package/hooks/animation/useAnimatePieArcLabel.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatePieArcLabel = useAnimatePieArcLabel;
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useAnimate = require("./useAnimate");
+function pieArcLabelPropsInterpolator(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 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. */
+function useAnimatePieArcLabel(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
+  };
+  return (0, _useAnimate.useAnimate)({
+    startAngle: props.startAngle,
+    endAngle: props.endAngle,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  }, {
+    createInterpolator: pieArcLabelPropsInterpolator,
+    transformProps: animatedProps => {
+      const [x, y] = (0, _d3Shape.arc)().cornerRadius(animatedProps.cornerRadius).centroid({
+        padAngle: animatedProps.paddingAngle,
+        startAngle: animatedProps.startAngle,
+        endAngle: animatedProps.endAngle,
+        innerRadius: animatedProps.innerRadius,
+        outerRadius: animatedProps.outerRadius
+      });
+      return {
+        x,
+        y
+      };
+    },
+    applyProps(element, {
+      x,
+      y
+    }) {
+      element.setAttribute('x', x.toString());
+      element.setAttribute('y', y.toString());
+    },
+    initialProps,
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/hooks/index.d.ts

@@ -13,4 +13,5 @@ export * from "./useLineSeries.js";
 export * from "./useItemHighlighted.js";
 export * from "./useItemHighlightedGetter.js";
 export * from "./useLegend.js";
-export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
+export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
+export * from "./animation/index.js";