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