import React, { Component } from 'react';
    import { Circle, Group, Pack, Svg } from 'number-picture'
    import itsSet from 'its-set';
    import { hierarchy } from 'd3-hierarchy';
  
    export default class A extends Component {
  
      constructor() {
        super();
        this.displayName = 'A';
        this.state = {};
      }
  
      render() {
        const { nodes, width, height } = this.props;
  
        return (
          <Svg height={height} width={width}>
            <Pack
              data={
                hierarchy({ children: nodes })
                  .sum(datum => datum.value)
              }
              datumPropsToTween={['r', 'x', 'y', 'opacity']}
              size={[width, height]}
              includeRoot={false}
            >
              <Group
                onMouseEnter={({ index }) => {
                  this.setState({ hoveredNodeIndex: index });
                }}
                onMouseOut={() => {
                  this.setState({ hoveredNodeIndex: null });
                }}
              >
                <Circle
                  enterDuration={3000}
                  enterEase='easeLinear'
                  enterDatum={({ datum }) => ({
                    x: datum.x,
                    y: datum.y,
                    r: 0,
                  })}
                  updateDuration={3000}
                  updateEase='easeLinear'
                  exitDuration={3000}
                  exitEase='easeLinear'
                  exitDatum={() => ({ r: 0, opacity: 0 })}
  
                  cx={({ datum }) => datum.x}
                  cy={({ datum }) => datum.y}
                  r={({ datum }) => datum.r}
                  style={({ datum }) => ({
                    opacity: itsSet(datum.opacity) ?
                      datum.opacity :
                      1,
                  })}
                  fill={({ index }) =>
                    this.state.hoveredNodeIndex === index ?
                      '#ff3a55' :
                      '#333333'
                  }
                />
              </Group>
            </Pack>
          </Svg>
        );
      }
    }