@antv/f2
Version:
Charts for mobile visualization.
60 lines • 1.67 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { jsx } from '../../jsx';
export default (function (props) {
var lineStyle = props.lineStyle,
anchorStyle = props.anchorStyle,
labels = props.labels,
label1OffsetY = props.label1OffsetY,
label2OffsetY = props.label2OffsetY,
triggerRef = props.triggerRef;
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", null, jsx("circle", {
attrs: _objectSpread({
r: '4px',
x: anchor.x,
y: anchor.y,
fill: color
}, anchorStyle)
}), jsx("polyline", {
attrs: _objectSpread({
points: points,
lineWidth: '2px',
stroke: color
}, lineStyle)
}), jsx("text", {
className: "click",
attrs: _objectSpread({
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: _objectSpread({
x: end.x,
y: end.y + label2OffsetY,
fontSize: '24px',
lineHeight: '24px',
fill: '#808080',
textBaseline: 'top',
textAlign: side === 'left' ? 'left' : 'right'
}, label2),
data: origin
}));
}));
});