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

    import React, { Component } from 'react';
    import { Arc, Group, Pie, Rect, Svg } from 'number-picture'
    import { max } from 'd3-array';
    import { scaleLinear } from 'd3-scale';
  
    export default class LG0 extends Component {
  
      constructor() {
        super();
        this.displayName = 'LG0';
        this.state = {};
      }
  
      render() {
        const { nodes, width, height } = this.props;
        const smallerDimension = Math.min(width, height);
        const arcRadius = (smallerDimension / 2) * 0.25;
        const rectRadius = (smallerDimension / 2) * 0.75;
        const heightScale = scaleLinear()
          .domain([0, max(nodes, node => node.secondaryValue)])
          .range([0, rectRadius]);
  
        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={arcRadius}
                    startAngle={({ datum }) => datum.startAngle}
                    endAngle={({ datum }) => datum.endAngle}
                    fill={({ index }) =>
                      this.state.hoveredNodeIndex === index ? '#ff3a55' : '#333333'
                    }
                    stroke='white'
                    strokeWidth={1}
                  />
                  <Group
                    rotation={({ datum }) =>
                      helpers.radiansToDegrees(
                        datum.startAngle + (datum.endAngle - datum.startAngle) / 2
                      ) - 180
                    }
                    updateDuration={3000}
                  >
                    <Rect
                      x={-10}
                      y={arcRadius}
                      width={20}
                      height={(p) => heightScale(get(p.datum, 'data.secondaryValue') || 0)}
                      fill={({ index }) =>
                        this.state.hoveredNodeIndex === index ? '#ff3a55' : '#333333'
                      }
                      enterDuration={3000}
                      enterDatum={() => ({
                        data: {
                          secondaryValue: 0,
                        },
                      })}
                      updateDuration={3000}
                      exitDuration={3000}
                      exitDatum={() => ({
                        data: {
                          secondaryValue: 0,
                        },
                      })}
                    />
                  </Group>
                </Group>
              </Pie>
            </Group>
          </Svg>
        );
      }
    }