Heatmap - Allow for auto indexed rows

[JacquiManzi]

First off, thanks for making this project- it’s exactly what I've needed.

So, I'm implementing a heatmap using VX and would like to provide a custom data structure. From reading the docs and source code, I believe this is the structure that is intended for the heatmap chart:

[{
  bin: Date, // The date we are applying for our x value (the column)
  bins: [{
    count: number, // This determines the color (heat) value
    bin: number // The row number for this bin in a column (this is unfortunately required)
 }]

The problem is that I would like to have my API return matching data structures for my charts to consume in order to prevent expensive data mapping on the client. My ideal structure looks like this:

[{
  bucket: Date, // The date we are applying for our X value (the column)
  values: [{
    title: string, // The descriptive bin value (not required by VX)
    count: number, // This determines the color (heat) value
  }]
}]

Luckily, VX allows me to override these props:

bin = d => d.bin,
bins = d => d.bins,
count = d => d.count

Which allows me to replace bin with bucket and bins with values, but I run into issues here since the yScale value is re-using the bin accessor function here:
y={yScale(bin(b) + step) + gap}

I think it’s valuable to allow for a custom row value (bin in this case) because it means you can have a custom order to items, but I would rather just use the index value of my values array. This way I wouldn’t need my API to provide a row value at all.

Could there potentially be a boolean prop that allows for an auto index like:
const y = indexedRows ? j : bin(b);

Which then can be used here:
y={yScale(y + step) + gap}

Ultimately this would allow me to do this:

<HeatmapRect
 bins={d => d.values }
 bin={d => d.bucket }
 indexedRows={true}
 data={data}
 x={0}
 xScale={xScale}
 yScale={yScale}
 colorScale={colorScale}
 opacityScale={opacityScale}
 binWidth={binWidth}
 binHeight={binHeight}
 step={dStep}
 gap={0}
/>

A quick example of what I'm considering is here: https://github.com/muxinc/vx/pull/1/files

[hshoff]

Great idea @JacquiManzi! I went for a bit different approach that allows you to pass in a yBin() prop (it defaults to your bin() prop).

Both yBin() and bin() will get a second arg with the index of the datum. yBin will get the index of it's row and bin will get the index of it's column.

instead of adding a boolean prop you would do:

<HeatmapRect
 bins={d => d.values }
 bin={d => d.bucket }
 yBin={(d,i) => i}
 data={data}
 x={0}
 xScale={xScale}
 yScale={yScale}
 colorScale={colorScale}
 opacityScale={opacityScale}
 binWidth={binWidth}
 binHeight={binHeight}
 step={dStep}
 gap={0}
/>

[JacquiManzi]

Perfect, thanks so much @hshoff !