74 lines
2.9 KiB
JavaScript
74 lines
2.9 KiB
JavaScript
"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
|
|
});
|
|
} |