1 | import { jsx } from '../../jsx';
|
2 |
|
3 | export default (props, context) => {
|
4 | const { coord, range, position, layout } = props;
|
5 | const { top, height } = coord;
|
6 | const { left, width } = layout;
|
7 | const [start, end] = range?.y || range?.x;
|
8 |
|
9 | const barTop = height * start;
|
10 | const barHeight = height * (end - start);
|
11 |
|
12 | return (
|
13 | <group
|
14 | style={{
|
15 | top,
|
16 | left: position === 'left' ? left - context.px2hd('8px') : left + width,
|
17 | }}
|
18 | >
|
19 | <line
|
20 | style={{
|
21 | position: 'absolute',
|
22 | top: 0,
|
23 | left: 0,
|
24 | width: 0,
|
25 | height,
|
26 | }}
|
27 | attrs={{
|
28 | stroke: 'rgba(202, 215, 239, .2)',
|
29 | lineCap: 'round',
|
30 | lineWidth: '8px',
|
31 | }}
|
32 | />
|
33 | <line
|
34 | style={{
|
35 | position: 'absolute',
|
36 | top: barTop,
|
37 | width: 0,
|
38 | height: barHeight,
|
39 | }}
|
40 | attrs={{
|
41 | stroke: 'rgba(202, 215, 239, .5)',
|
42 | lineCap: 'round',
|
43 | lineWidth: '8px',
|
44 | }}
|
45 | />
|
46 | </group>
|
47 | );
|
48 | };
|