@mui/x-charts/esm/hooks/animation/useAnimatePieArc.js

The community edition of MUI X Charts components.

import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
import { useAnimate } from "./useAnimate.js";
function pieArcPropsInterpolator(from, to) {
  const interpolateStartAngle = interpolateNumber(from.startAngle, to.startAngle);
  const interpolateEndAngle = interpolateNumber(from.endAngle, to.endAngle);
  const interpolateInnerRadius = interpolateNumber(from.innerRadius, to.innerRadius);
  const interpolateOuterRadius = interpolateNumber(from.outerRadius, to.outerRadius);
  const interpolatePaddingAngle = interpolateNumber(from.paddingAngle, to.paddingAngle);
  const interpolateCornerRadius = 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. */
export 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 useAnimate({
    startAngle: props.startAngle,
    endAngle: props.endAngle,
    innerRadius: props.innerRadius,
    outerRadius: props.outerRadius,
    paddingAngle: props.paddingAngle,
    cornerRadius: props.cornerRadius
  }, {
    createInterpolator: pieArcPropsInterpolator,
    transformProps: p => ({
      d: d3Arc().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
  });
}