G
+
S
L
G
A
V
C
-
N
M
G

    import React, { Component } from 'react';
    import { Arc, Group, Pie, Svg } from 'number-picture'
  
    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 x={width / 2} y={height / 2}>
              <Pie
                data={nodes}
                value={datum => datum.value}
                id={datum => datum.id}
                sort={(a, b) => a.index - b.index}
              >
                <Group
                  onMouseEnter={({ index }) => {
                    this.setState({ hoveredNodeIndex: index });
                  }}
                  onMouseOut={() => {
                    this.setState({ hoveredNodeIndex: null });
                  }}
                >
                  <Arc
                    enterDuration={3000}
                    enterEase='easeLinear'
                    enterDatum={({ index, data }) => ({
                      startAngle: (index === data.length - 1) ?
                        0 :
                        data[index + 1].endAngle,
                      endAngle: index === 0 ? (2 * Math.PI) : data[index - 1].startAngle,
                    })}
                    updateDuration={3000}
                    updateEase='easeLinear'
                    exitDuration={3000}
                    exitEase='easeLinear'
                    exitDatum={({ index, data }) => {
                      const endAngle = index === 0 ? 0 : data[index - 1].startAngle;
                      return { startAngle: endAngle, endAngle };
                    }}
                    innerRadius={0}
                    outerRadius={radius - 60}
                    startAngle={({ datum }) => datum.startAngle}
                    endAngle={({ datum }) => datum.endAngle}
                    fill={({ index }) =>
                      this.state.hoveredNodeIndex === index ? '#ff3a55' : '#333333'
                    }
                    stroke='white'
                    strokeWidth={1}
                  />
                </Group>
              </Pie>
            </Group>
          </Svg>
        );
      }
    }