fix: gradient for color thresholds

[fran68]

IMO this should fix the problem with the color thresholds. In function computeGradient in src/graph.js the thresholds are evaluated as real values. When displaying the graph the gradient course is distorted since the margins at top and bottom affect the gradient offset. So the offset of the gradient needs to be adapted by considering the margin.

This might fix
#1080
#1108
#1137
#723

Before:

After applying the patch:

line_width: 6
color_thresholds_transition: hard
color_thresholds:
  - value: 14
    color: red
  - value: 15
    color: cyan
  - value: 16
    color: green
  - value: 17
    color: red

[ildar170975]

@fran68
I would suggest using a _calcY() function to convert a stop value to pixels.
It accounts max/min & logarithmic.

      ...
      let offset;
      if (scale <= 0) {
        offset = 0;
      } else {
        // limit stopValue within max/min
        const stopValue = (stop.value >= this._max)
          ? this._max
          : (stop.value <= this._min)
            ? this._min
            : stop.value;
        // get Y coord for stopValue
        const [stopCoord] = this._calcY([[0, 0, stopValue]]);
        const [, coordY] = stopCoord;
        // calculate absolute offset
        offset = coordY * 100 / (this.height + this.margin[Y] * 4);
      }
      return {
        color: color || stop.color,
        offset,
      };
      ...

Here:

1. Limit a stop value within max/min.
2. Convert the stop value to pixels.
3. Calculate an offset.

What do you think?
In my opinion, this is a more proper & transparent way.
I can issue my own PR (with credits for you of course) if you have no time for testing this.

Also, I am a bit unsure about

      if (scale <= 0) {
        offset = 0;
      }

may be an offset should be 100?

[fran68]

@ildar170975
I've tested your code and it's fine. It's better to handle it with the coordinates.

But I dont know how to deal with that logarithmic thing. Is there ever a scale value which is negative?

[ildar170975]

We can discuss it in our chat.