@antv/f2
Version:
Charts for mobile visualization.
83 lines (82 loc) • 2.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _tslib = require("tslib");
var _fEngine = require("@antv/f-engine");
var _default = exports.default = function _default(props) {
var _a = props.pointsData,
pointsData = _a === void 0 ? [] : _a,
radius = props.radius,
center = props.center,
frameStyle = props.frameStyle,
lineStyle = props.lineStyle,
_b = props.linesData,
linesData = _b === void 0 ? [] : _b;
var cx = center[0];
var cy = center[1];
return (0, _fEngine.jsx)("group", {
style: {
clip: {
type: 'circle',
style: {
cx: cx,
cy: cy,
r: radius
}
}
}
}, (0, _fEngine.jsx)("circle", {
style: (0, _tslib.__assign)({
cx: cx,
cy: cy,
r: radius,
fill: 'transparent',
stroke: '#d8d8d8',
lineWidth: '2px'
}, frameStyle)
}), linesData.map(function (line) {
return (0, _fEngine.jsx)("line", {
style: (0, _tslib.__assign)({
x1: line.points[0].x,
y1: line.points[0].y,
x2: line.points[1].x,
y2: line.points[1].y,
stroke: '#d8d8d8',
lineWidth: '5px'
}, line.style)
});
}), pointsData.map(function (d) {
return (0, _fEngine.jsx)("polyline", {
style: (0, _tslib.__assign)((0, _tslib.__assign)({
points: d.children.map(function (p) {
return [p.x, p.y];
}),
stroke: d.color,
lineWidth: '5px'
}, d.shape), lineStyle),
animation: {
appear: {
easing: 'quadraticOut',
duration: 450,
clip: {
type: 'rect',
property: ['width'],
style: {
x: cx - radius,
y: cy - radius,
height: radius * 2
},
start: {
width: 0
},
end: {
width: radius * 2
}
}
}
}
});
}));
};