@antv/f2
Version:
Charts for mobile visualization.
67 lines • 1.79 kB
JavaScript
import { __assign } from "tslib";
import { jsx } from '@antv/f-engine';
export default (function (props) {
var lineStyle = props.lineStyle,
anchorStyle = props.anchorStyle,
labels = props.labels,
label1OffsetY = props.label1OffsetY,
label2OffsetY = props.label2OffsetY,
triggerRef = props.triggerRef,
onClick = props.onClick;
return jsx("group", {
ref: triggerRef
}, labels.map(function (label) {
var origin = label.origin,
anchor = label.anchor,
side = label.side,
color = label.color,
label1 = label.label1,
label2 = label.label2,
points = label.points;
var end = points[points.length - 1];
return jsx("group", {
onClick: onClick ? function () {
onClick(label);
} : null
}, jsx("circle", {
attrs: __assign({
r: '4px',
cx: anchor.x,
cy: anchor.y,
fill: color
}, anchorStyle)
}), jsx("polyline", {
attrs: __assign({
points: points.map(function (d) {
return [d.x, d.y];
}),
lineWidth: '2px',
stroke: color
}, lineStyle)
}), jsx("text", {
className: "click",
attrs: __assign({
x: end.x,
y: end.y + label1OffsetY,
fontSize: '24px',
lineHeight: '24px',
fill: color,
textBaseline: 'bottom',
textAlign: side === 'left' ? 'left' : 'right'
}, label1),
data: origin
}), jsx("text", {
className: "click",
attrs: __assign({
x: end.x,
y: end.y + label2OffsetY,
fontSize: '24px',
lineHeight: '24px',
fill: '#808080',
textBaseline: 'top',
textAlign: side === 'left' ? 'left' : 'right'
}, label2),
data: origin
}));
}));
});