1 | import { jsx } from '../../jsx';
|
2 |
|
3 | export default (props) => {
|
4 | const { nodes, coord } = props;
|
5 | if (coord.isPolar) {
|
6 | const { center } = coord;
|
7 | const { x, y } = center;
|
8 | return (
|
9 | <group>
|
10 | {nodes.map((node) => {
|
11 | const { xMin, xMax, yMin, yMax, color } = node;
|
12 | return (
|
13 | <sector
|
14 | attrs={{
|
15 | x,
|
16 | y,
|
17 | lineWidth: '1px',
|
18 | stroke: '#fff',
|
19 | startAngle: xMin,
|
20 | endAngle: xMax,
|
21 | r0: yMin,
|
22 | r: yMax,
|
23 | anticlockwise: false,
|
24 | fill: color,
|
25 | }}
|
26 | />
|
27 | );
|
28 | })}
|
29 | </group>
|
30 | );
|
31 | }
|
32 | return (
|
33 | <group>
|
34 | {nodes.map((node) => {
|
35 | const { key, xMin, xMax, yMin, yMax, color } = node;
|
36 | return (
|
37 | <rect
|
38 | key={key}
|
39 | attrs={{
|
40 | x: xMin,
|
41 | y: yMin,
|
42 | width: xMax - xMin,
|
43 | height: yMax - yMin,
|
44 | fill: color,
|
45 | lineWidth: '4px',
|
46 | stroke: '#fff',
|
47 | radius: '8px',
|
48 | }}
|
49 | animation={{
|
50 | appear: {
|
51 | easing: 'linear',
|
52 | duration: 450,
|
53 | property: ['fillOpacity', 'strokeOpacity'],
|
54 | start: {
|
55 | fillOpacity: 0,
|
56 | strokeOpacity: 0,
|
57 | },
|
58 | end: {
|
59 | fillOpacity: 1,
|
60 | strokeOpacity: 1,
|
61 | },
|
62 | },
|
63 | update: {
|
64 | easing: 'linear',
|
65 | duration: 450,
|
66 | property: ['x', 'y', 'width', 'height', 'radius', 'lineWidth'],
|
67 | },
|
68 | }}
|
69 | />
|
70 | );
|
71 | })}
|
72 | </group>
|
73 | );
|
74 | };
|