render()

in src/ColorHeatmap.js [157:206]


  render() {
    const {
      data,
      xScale,
      yScale,
      value,
      x,
      xEnd,
      y,
      yEnd,
      interpolator,
      rectStyle,
      rectClassName,
    } = this.props;
    const valueAccessor = makeAccessor2(value);
    let colorScale;

    if (this.props.colorScale) {
      colorScale = this.props.colorScale;
    } else {
      const valueDomain =
        this.props.valueDomain || domainFromData(data, valueAccessor);
      const colors =
        this.props.colors ||
        (valueDomain.length === 2
          ? ['#000000', '#ffffff']
          : times(valueDomain.length, schemeCategory10().domain(range(10))));
      colorScale = makeColorScale(valueDomain, colors, interpolator);
    }

    return (
      <g className="rct-color-heatmap-chart" aria-hidden="true">
        {data.map((d, i) => {
          const color = colorScale(valueAccessor(d));
          const style = { ...getValue(rectStyle, d, i), fill: color };
          const className = `${getValue(rectClassName, d, i)}`;
          const key = `heatmap-rect-${i}`;
          return (
            <RangeRect
              x={getValue(x, d, i)}
              xEnd={getValue(xEnd, d, i)}
              y={getValue(y, d, i)}
              yEnd={getValue(yEnd, d, i)}
              {...{ xScale, yScale, style, className, key }}
            />
          );
        })}
      </g>
    );
  }