Heatmap rendering issue, rect x always NaN

[MartinClement]

Hey guys !

I just find out something strange in the heatmap code, just here

For me, the 'bin.x0' can't be found in the bin

I had issues when I rendered my heatmap, the rect x attribute was alway 'Nan'.

I just removed '+ bin.x0' and this fixed all =)

I may be wrong but I think x0 is missing in bin construction.

No problem using children way !

Have a good day guys !

[hshoff]

Thanks for the bug report! Will get this fixed in v0.0.190. Until it gets published, the workaround is to use the render prop api by passing a function as children:

       <HeatmapRect
          data={data}
          xScale={xScale}
          yScale={yScale}
          colorScale={rectColorScale}
          opacityScale={opacityScale}
          binWidth={binWidth}
          binHeight={binWidth}
          gap={2}
        >
          {heatmap => {
            return heatmap.map(bins => {
              return bins.map(bin => {
                return (
                  <rect
                    key={`heatmap-rect-${bin.row}-${bin.column}`}
                    className="vx-heatmap-rect"
                    width={bin.width}
                    height={bin.height}
                    x={bin.x}
                    y={bin.y}
                    fill={bin.color}
                    fillOpacity={bin.opacity}
                    onClick={event => {
                      const { row, column } = bin;
                      alert(JSON.stringify({ row, column, ...bin.bin }));
                    }}
                  />
                );
              });
            });
          }}
        </HeatmapRect>