@antv/f2
Version:
Charts for mobile visualization.
73 lines (72 loc) • 2.05 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 lineStyle = props.lineStyle,
anchorStyle = props.anchorStyle,
labels = props.labels,
label1OffsetY = props.label1OffsetY,
label2OffsetY = props.label2OffsetY,
triggerRef = props.triggerRef,
onClick = props.onClick;
return (0, _fEngine.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 (0, _fEngine.jsx)("group", {
onClick: onClick ? function () {
onClick(label);
} : null
}, (0, _fEngine.jsx)("circle", {
attrs: (0, _tslib.__assign)({
r: '4px',
cx: anchor.x,
cy: anchor.y,
fill: color
}, anchorStyle)
}), (0, _fEngine.jsx)("polyline", {
attrs: (0, _tslib.__assign)({
points: points.map(function (d) {
return [d.x, d.y];
}),
lineWidth: '2px',
stroke: color
}, lineStyle)
}), (0, _fEngine.jsx)("text", {
className: "click",
attrs: (0, _tslib.__assign)({
x: end.x,
y: end.y + label1OffsetY,
fontSize: '24px',
lineHeight: '24px',
fill: color,
textBaseline: 'bottom',
textAlign: side === 'left' ? 'left' : 'right'
}, label1),
data: origin
}), (0, _fEngine.jsx)("text", {
className: "click",
attrs: (0, _tslib.__assign)({
x: end.x,
y: end.y + label2OffsetY,
fontSize: '24px',
lineHeight: '24px',
fill: '#808080',
textBaseline: 'top',
textAlign: side === 'left' ? 'left' : 'right'
}, label2),
data: origin
}));
}));
};