@antv/f2
Version:
Charts for mobile visualization.
72 lines • 1.9 kB
JavaScript
import { __assign } from "tslib";
import { jsx } from '@antv/f-engine';
import { deepMix } from '@antv/util';
export default (function (props) {
var coord = props.coord,
records = props.records,
animation = props.animation,
onClick = props.onClick;
var center = coord.center,
startAngle = coord.startAngle,
endAngle = coord.endAngle,
radius = coord.radius;
return jsx("group", {
animation: {
appear: __assign({
easing: 'quadraticOut',
duration: 450,
clip: {
type: 'sector',
property: ['endAngle'],
style: {
cx: center.x,
cy: center.y,
startAngle: "".concat(startAngle, "rad"),
r: radius
},
start: {
endAngle: "".concat(startAngle, "rad")
},
end: {
endAngle: "".concat(endAngle, "rad")
}
}
}, animation && animation.appear)
}
}, records.map(function (record) {
var key = record.key,
children = record.children;
return jsx("group", {
key: key
}, children.map(function (item) {
var key = item.key,
xMin = item.xMin,
xMax = item.xMax,
yMin = item.yMin,
yMax = item.yMax,
color = item.color,
shape = item.shape;
return jsx("sector", {
key: key,
attrs: __assign({
cx: center.x,
cy: center.y,
fill: color,
lineWidth: 1,
startAngle: "".concat(xMin, "rad"),
endAngle: "".concat(xMax, "rad"),
r0: yMin,
r: yMax
}, shape),
onClick: onClick,
animation: deepMix({
update: {
easing: 'linear',
duration: 450,
property: ['x', 'y', 'startAngle', 'endAngle', 'r0', 'r']
}
}, animation)
});
}));
}));
});