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

    import React, { Component } from 'react';
    import { Collection, Group, Rect, Svg } from 'number-picture'
    import itsSet from 'its-set';
    import { max } from 'd3-array';
    import { scaleLinear } from 'd3-scale';
  
    export default class L extends Component {
  
      constructor() {
        super();
        this.displayName = 'L';
        this.state = {};
      }
  
      render() {
        const { nodes, width, height } = this.props;
        const HEIGHT = height;
        const WIDTH = width - 60;
        const COLUMN_WIDTH = WIDTH / nodes.length;
  
        const scale = scaleLinear()
          .domain([0, max(nodes, node => node.value)])
          .range([0, HEIGHT]);
  
        return (
          <Svg height={height} width={width}>
            <Group x={60} y={0}>
              <Collection data={nodes}>
                <Group
                  onMouseEnter={({ index }) => {
                    this.setState({ hoveredNodeIndex: index });
                  }}
                  onMouseOut={() => {
                    this.setState({ hoveredNodeIndex: null });
                  }}
                >
                  <Rect
                    enterDuration={3000}
                    enterEase='easeLinear'
                    enterDatum={() => ({ value: 0, opacity: 0 })}
                    updateDuration={3000}
                    updateEase='easeLinear'
                    exitDuration={3000}
                    exitEase='easeLinear'
                    exitDatum={() => ({ value: 0, opacity: 0 })}
                    x={ownProps => COLUMN_WIDTH * (ownProps.index + 0.1)}
                    y={ownProps => HEIGHT - scale(ownProps.datum.value)}
                    height={ownProps => scale(ownProps.datum.value)}
                    width={() => COLUMN_WIDTH * 0.8}
                    style={ownProps => ({
                      opacity: itsSet(ownProps.datum.opacity) ? ownProps.datum.opacity : 1,
                    })}
                    fill={({ index }) =>
                      this.state.hoveredNodeIndex === index ? '#ff3a55' : '#333333'
                    }
                  />
                </Group>
              </Collection>
            </Group>
          </Svg>
        );
      }
    }