L
+
S
L
G
A
V
C
-
N
M

    import React, { Component } from 'react';
    import { Collection, Group, Rect, Svg } from '@potion/element'
    import itsSet from 'its-set';
    import { max } from 'd3-array';
    import { scaleLinear } from 'd3-scale';
  
    export default class L extends Component {
  
      static displayName = 'L';
      state = {};

      render() {
        const { nodes, width, height } = this.props;
        const innerWidth = width - 60;
        const columnWidth = innerWidth / nodes.length;
  
        const scale = scaleLinear()
          .domain([0, max(nodes, node => node.value)])
          .range([0, height]);
  
        return (
          <Svg height={height} width={width}>
            <Collection
              data={nodes}
              nodeEnter={d => ({ ...d, value: 0 })}
              animate
            >{nodes => nodes.map(({ value, key }, i) => (
              <Group
                key={key}
                onMouseEnter={() => {
                  this.setState({ hoveredNode: key });
                }}
                onMouseOut={() => {
                  this.setState({ hoveredNode: null });
                }}
              >
                <Rect
                  x={columnWidth * (i + 0.1)}
                  y={height - scale(value)}
                  height={scale(value)}
                  width={columnWidth * 0.8}
                  fill={this.state.hoveredNode === key ? COLORS.PINK : COLORS.DARK_GREY}
                />
              </Group>
            ))
            }</Collection>
          </Svg>
        );
      }
    }