@antv/f2
Version:
Charts for mobile visualization.
86 lines • 2.25 kB
JavaScript
import { __assign } from "tslib";
import { jsx } from '@antv/f-engine';
import { deepMix } from '@antv/util';
export default (function (props) {
var records = props.records,
animation = props.animation,
y0 = props.y0,
onClick = props.onClick;
return jsx("group", null, 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,
x = item.x,
y = item.y,
color = item.color,
shape = item.shape;
if (isNaN(xMin) || isNaN(xMax) || isNaN(yMin) || isNaN(yMax)) {
return null;
}
return jsx("group", null, jsx("line", {
key: "".concat(key, "-line"),
style: {
x1: x,
y1: y[2],
x2: x,
y2: y[3],
stroke: color,
lineWidth: '2px',
lineCap: 'round'
},
animation: {
appear: {
easing: 'linear',
duration: 300,
property: ['y1', 'y2'],
// @ts-ignore
start: {
y1: 0,
y2: 0
}
},
update: {
easing: 'linear',
duration: 300,
property: ['x1', 'y1', 'x2', 'y2']
}
}
}), jsx("rect", {
key: "".concat(key, "-rect"),
style: __assign({
x: xMin,
y: yMin,
// 当 min === max 时，设置 1，否则会出现 0 的情况
width: Math.max(xMax - xMin, 1),
height: Math.max(yMax - yMin, 1),
fill: color,
radius: '2px'
}, shape),
onClick: onClick,
animation: deepMix({
appear: {
easing: 'linear',
duration: 300,
property: ['y', 'height'],
start: {
y: y0,
height: 0
}
},
update: {
easing: 'linear',
duration: 300,
property: ['x', 'y', 'width', 'height']
}
}, animation)
}));
}));
}));
});