1 | import { jsx } from '../../jsx';
|
2 |
|
3 | export default (props) => {
|
4 | const { lineStyle, anchorStyle, labels, label1OffsetY, label2OffsetY, triggerRef } = props;
|
5 |
|
6 | return (
|
7 | <group ref={triggerRef}>
|
8 | {labels.map((label) => {
|
9 | const { origin, anchor, side, color, label1, label2, points } = label;
|
10 | const end = points[points.length - 1];
|
11 |
|
12 | return (
|
13 | <group>
|
14 | {}
|
15 | <circle
|
16 | attrs={{
|
17 | r: '4px',
|
18 | x: anchor.x,
|
19 | y: anchor.y,
|
20 | fill: color,
|
21 | ...anchorStyle,
|
22 | }}
|
23 | />
|
24 | {}
|
25 | <polyline
|
26 | attrs={{
|
27 | points,
|
28 | lineWidth: '2px',
|
29 | stroke: color,
|
30 | ...lineStyle,
|
31 | }}
|
32 | />
|
33 | {}
|
34 | <text
|
35 | className="click"
|
36 | attrs={{
|
37 | x: end.x,
|
38 | y: end.y + label1OffsetY,
|
39 | fontSize: '24px',
|
40 | lineHeight: '24px',
|
41 | fill: color,
|
42 | textBaseline: 'bottom',
|
43 | textAlign: side === 'left' ? 'left' : 'right',
|
44 | ...label1,
|
45 | }}
|
46 | data={origin}
|
47 | />
|
48 | {}
|
49 | <text
|
50 | className="click"
|
51 | attrs={{
|
52 | x: end.x,
|
53 | y: end.y + label2OffsetY,
|
54 | fontSize: '24px',
|
55 | lineHeight: '24px',
|
56 | fill: '#808080',
|
57 | textBaseline: 'top',
|
58 | textAlign: side === 'left' ? 'left' : 'right',
|
59 | ...label2,
|
60 | }}
|
61 | data={origin}
|
62 | />
|
63 | </group>
|
64 | );
|
65 | })}
|
66 | </group>
|
67 | );
|
68 | };
|