@mui/x-charts/hooks/animation/useAnimatePieArcLabel.js

The community edition of MUI X Charts components.

"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.arcLabelRadius ?? props.innerRadius,
    outerRadius: props.arcLabelRadius ?? props.outerRadius,
    paddingAngle: props.paddingAngle,
    cornerRadius: props.cornerRadius
  };
  return (0, _useAnimate.useAnimate)({
    startAngle: props.startAngle,
    endAngle: props.endAngle,
    innerRadius: props?.arcLabelRadius ?? props.innerRadius,
    outerRadius: props?.arcLabelRadius ?? 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
  });
}