Reversing startColor/endColor does not produce expected results
Closed this issue · 7 comments
If I use <ReactSpeedometer startColor="#FF471A" endColor="#33CC33" /> I would expect reversing the startColor and endColor (<ReactSpeedometer startColor="#33CC33" endColor="#FF471A" />) would produce a gauge with exactly the opposite color range. However this is not the case.
Observe the following image. The second speedometer starts a shade darker and ends a shade lighter than what I would expect.
Hi @TrieBr. Start and end color are not discrete colors to be swapped. They form the start and end of all the intermediate gradient colors. Internally, the colors are interpolated from start color to end color. For example, if you draw 1000 segments with start color as pink and end color as yellow, you will see a very fine grained scale gradually starting with start color and ending with end color. Internally, it uses d3 interpolate - https://github.com/d3/d3-interpolate#interpolate.
@palerdot Can you please further explain. You explained that the color will start at pink and then end at yellow. So I would expect if I swapped them then it would start at yellow and end at pink. But in this case its starting at yellow+1 shade to pink+1 shade
can you tell what you mean by yellow + 1 shade? do you have the color code and some kind of fiddle to show the shades you are describing?
Look at the screenshots. The first speedometer starts on a darker shade of green than the rightmost green on the second speedometer . Same with the other color. The first one ends one shade lighter (It doesn't include the dark red you see on the second one). It seems to me that if I use exactly opposite color ranges, then the speedometer's should have exactly the opposite color range, but that is not the case.
@TrieBr I could reproduce the issue you are mentioning. I'm reopening this to inspect if this is the behaviour of d3.interpolateHSL and update this issue.
@TrieBr This is the behaviour of d3.interpolateHsl. To quote d3 -
Returns an HSL color space interpolator between the two colors a and b. The colors a and b need not be in HSL; they will be converted to HSL using d3.hsl.
I agree it is confusing. I will try to accomodate all the d3 interpolators - hcl, hsl, rgb etc so that users can select the interpolator of their choice, in upcoming versions.
@TrieBr There is a new option available in 0.6.0 version with segmentColors option/prop, with which we can give custom segment colors. This option gives more control over segment colors. Here is a sample sandbox - https://codesandbox.io/embed/relaxed-silence-c3qkb