C
+
S
L
G
A
V
C
-
N
M

    import React, { Component } from 'react';
    import { Grid, Rect, Svg } from '@potion/element'
    import { interpolateRgb } from 'd3-interpolate';
    import itsSet from 'its-set';
  
    export default class C extends Component {
  
      constructor() {
        super();
        this.displayName = 'C';
        this.state = {};
      }
  
      render() {
        const { nodes, width, height } = this.props;
  
        const count = nodes.length;
        const fill = interpolateRgb('#ff3a55', '#333333');
  
        return (
          <Svg height={height} width={width}>
            <Grid
              data={nodes}
              bands
              size={[width, height]}
            >{nodes => nodes.map(({ x, y, nodeWidth, nodeHeight, key }, index) => (
              <Rect
                key={key}
                x={x}
                y={y}
                width={nodeWidth}
                height={nodeHeight}
                fill={fill((index + 1) / count)}
              />
            ))}</Grid>
          </Svg>
        );
      }
    }