Heatmap 0.79.0 colors string list breaking

[Streeterxs]

To Reproduce
https://codesandbox.io/s/empty-shadow-g4zu1c?file=/src/HeatmapChart.tsx

Steps to reproduce the behavior:

• heatmap version 0.79.1
• pass a list of hex colors as prop

Expected behavior
should render without bug as it was in 0.78.0 version

Screenshots

additional
change to version 0.78.0 to see bug going out

[tkonopka]

(I'm not an author/maintainer of nivo, but hope this can help)

The heatmap component introduced several breaking changes in v0.79.0. See here.

In practice, you can rescue your sandbox code by making two changes. First, change the data format from

[
  {
    scores: "scores",
    math: 3.5,
    history: 4.67,
    chemistry: 3.33
  }
]

to

[
  { 
    id: "scores",
    data: [
      { x: "math", y: 3.5 },
      { x: "history", y: 4.67 },
      { x: "chemistry", y: 3.33 }
    ]
  }
]

Second, change how you provide custom colors to the heatmap.

// define custom colors
const customColors = ["#f1fffa", "#fffce8", "#d4d2a5", "#c2eaba", "#b1ede8"]

// then inside the Heatmap...
<Heatmap
   ...
   colors={{
     type: 'quantize',
     colors: customColors,
   }}
   ...
/>   

This approach will use the colors given, without interpolation.

As far as I can tell, custom color arrays are now supported by type: 'quantize', but not by type: 'sequential' or type: 'diverging'.

@plouc, what would you think about supporting sequential/diverging scales with custom colors? (I can have a look). Alternatively, perhaps the Heatmap could take a prop colorScale with a pre-prepared d3 object?

[plouc]

@tkonopka, yes, it would be nice to also support custom colors for those, but it's a bit more complex, I'm also ok with allowing to pass a pre-made color scale.

[plouc]

Fixed by #1998 (but requires to use the new format to define colors).