Added custom colorScale

[jashanbhullar]

NEED HELP

I needed a custom color on the calendar heatmap based on my scale so I added this functionality. I have made it successfully work in my codebase.
I need more clarity on what needs to be changed and if there's a better way to do this rather than what I have currently done.

It also needs an update in the documentation.

Resolves #693

[plouc]

That's a useful feature, thank you for your contribution @jashanbhullar!

[jashanbhullar]

@plouc when will this show up on the npm package?

[jashanbhullar]

@plouc still awaiting the update on the version number.

[ghost]

Is there any example how this works? Or what the custom colorScale function is supposed to look like? I cannot figure it out.

[koders]

@gdevrs I figured it out, you have to have a function, which returns a color, and also have a tick array under the function.

const colors = [
    "#ff0000",
    "rgba(255, 255, 255, 0.5)",
    "#003300",
    "#005500",
    "#007700",
    "#009900",
    "#00bb00",
    "#00ff00",
  ];

  const ticks = ["Loss", 0, 200, 400, 600, 800, 1000];
  const colorScaleFn = (value) => {
    if (value < 0 || value === "Loss") {
      return colors[0];
    }
    if (value == 0) {
      return colors[1];
    }
    for (let i = 2; i < ticks.length; i++) {
      if (value < ticks[i]) {
        return colors[i];
      }
    }
    return colors[colors.length - 1];
  };

  colorScaleFn.ticks = () => ticks;

and then <ResponsiveTimeRange colorScale={colorScaleFn} />