G
+
S
L
G
A
V
C
-
N
M

    import React, { Component } from 'react';
    import { Arc, Group, Pie, Svg } from '@potion/element'
  
    export default class G extends Component {
  
      constructor() {
        super();
        this.displayName = 'G';
        this.state = {};
      }
  
      render() {
        const { nodes, width, height } = this.props;
        const radius = (Math.min(width, height) / 2);
  
        return (
          <Svg height={height} width={width}>
            <Group transform={{ translate: [width / 2, height / 2] }}>
              <Pie
                data={nodes}
                value={datum => datum.value}
                id={datum => datum.id}
                sort={(a, b) => a.index - b.index}
                nodeEnter={d => ({ ...d, endAngle: d.startAngle })}
                animate
              >{
                nodes => (
                  <g>
                  {nodes.map(({ startAngle, endAngle, data: { key } }) => (
                    <Group
                      key={key}
                      onMouseEnter={({ index }) => {
                        this.setState({ hoveredNode: key });
                      }}
                      onMouseOut={() => {
                        this.setState({ hoveredNode: null });
                      }}
                    >
                      <Arc
                        innerRadius={0}
                        outerRadius={radius - 60}
                        startAngle={startAngle}
                        endAngle={endAngle}
                        stroke="white"
                        fill={this.state.hoveredNode === key ? '#ff3a55' : '#20232a'}
                        strokeWidth={1}
                      />
                    </Group>
                  ))}
                  </g>
                )
              }
              </Pie>
            </Group>
          </Svg>
        );
      }
    }