Add colorstops, colorstopgradients and linear gradients to the segmented-arc

[AmoebeLabs]

The Problem To Be Solved

Add colorstops, colorstopgradients and linear gradients to the segmented-arc, just as the horse-shoe already is capable of. This will be a lot of work, as you can also color the scale with this.

• [x] ColorList

  • Number of segments equals number of colorlist
  • Each segment has the same size
  • Scale is rendered using colorlist
  • Arc is rendered using colorlist

• [x] Colorstop

  • Number of segments equals number of colorstops
  • Size of each segment depends on colorstop value
  • Scale is rendered using colorstops
  • Arc is rendered using colorstops

• [x] Colorstop, segmentcolor = curvalue

  • Same as colorstop, except:
  • All arc segments are rendered using last segments colorstop value. Eg. with 3 colorstops (green, yellow, red), and currentvalue is in red, all the segments are drawn in red color.

• [x] Colorstop gradients (single color displayed!)

  • Same as colorstop where segmentcolor = curvalue,, except:
  • Arc follows gradient of current segment and next segment??. Eg. with 3 colorstops (green, yellow, red) and value in green, color is gradient(green, yellow, %value). Value in yellow, color is gradient(yellow, red, %value). Last, value in red, color is red, as there is no next color. Red remains red...

• [ ] SimpleGradient (single color displayed!)

  • Single segment
  • Two colors (start and end color)
  • gradientcolor depends on state value + start/end color
  • Scale is rendered using gradientcolor
  • Arc is rendered using gradientcolor

(Optional): Suggested Solution

Take the horseshoe as an example, but also check other sources for examples around this. Maybe there are better and easier solutions as the segmented-arc is completely different implemented compared to the horseshoe.

Difficulties with gradients

The segmented arc is constructed using separate path's for each segment. This probably means you can't use any gradient solutions that exactly follow the path:

• linear gradients use a fixed angle
• unknown if a conical gradient can work, or that requires a full rewrite of the segmented arc to use different solution

Segment color list as an alternative

One alternative to a full gradient are segmented gradients as shown below in the third arc (CPU 31 %):

And with the scale added, and filled using the same color list:

In this case a list of 10 colors is defined in the segmented arc with also 10 segments (must be changed, colorlist defines number of segments) for example. Each segment gets its own 'fixed' color. Depending on the chosen colorlist, this can look like a nice gradient...

2020.10.13: First results with some hacking in the creation and rendering of the segmented arc with a colorstop:

Configuration in this case:

• show.style = "segmentcolorlist" or "segmentcolors"
• segmentcolorlist or segmentcolors:
  • color1
  • color2
  • etc. OR in segments map:
• segments:
  • colorlist:
    • color1
    • color2
    • etc.

Number of segments is the number of colors in the colorlist. Simple.

Colorstops

The full arc (ie all segments) get the color according to the colorstop. This requires rewriting of the all the segments if a new colorstop is reached or, and that is easier, setting the fill color to the colorstop value.

Segments as colorstops

When using a colorstop list for the creation of the segments, each segment can have its own color. This might already be usable for CPU load, temperature, battery percentage, disk/ram percentage, etc.

In this case the segments can be of different size. Unknown if current implementation can handle this. But using a separate color for each segment is no problem, as the fill color can be specified using javascript.

Example:

• range is 0..100
• colorstop 0 = green
• colorstop 40 = yellow
• colorstop 80 = red

Segment value ranges are

• 0..40, (40%)
• 40..80 (40%)
• 80..100 (20%)

Depending on the size of the full segmented arc (degrees), these segments can be calculated. Say the arc is 90 degrees, then the segments are:

• 0.40 * 90 = 36 degrees
• 0.40 * 90 = 36 degrees
• 0.20 * 90 = 18 degrees

When using this option, the scale will have the colors according to the colorstops.

Configuration in this case:

• show.style = "colorstops"
• colorlstops:
  • 00: color1
  • 40: color2
  • 80: color3

Structure

If we use a separate structure under segments for each style, then there is a 1:1 link between them

segments:
  fixedcolor:
    dash: 36
    gap: 1
    color: 'red'

segments:
  colorlist:
    colors:
      - color1
      - color2
      - color3
    gap: 1

segments:
  colorstops:
    colors:
      - 00: color1
      - 40: color2
      - 80: color3
    gap: 1

segments:
  simplegradient:
    colors:
      - color1
      - color2
    dash: 10 (degrees) OR count: 10 (nr of segments)
    gap: 1

Implementation

// als je ook een colorstop list als segmenten wilt laten zien, dan zul
// je bijv. net als d3 een lijst van segmentgroottes moeten opbouwen.
// standaard dus [20,20,20,15] bijv. zoals in de for loop al gebeurd, maar dan in een array.
// dan dat array laten plotten met gegevens.
//
// dan kun je ook van de colorstop een array maken [40,20,10] bijv. voor kleuren groen, geel, rood bijv.
// dan kun je een schaal neerzetten en zien hoever de waarde eigenlijk is. al bijna in het rood bijv.

[AmoebeLabs]

Added "segments as colorstops" option

[AmoebeLabs]

Added first version of colorstop, where the color of all the segments are the current color segment.

[AmoebeLabs]

Note for colorstop gradient & simple gradient:

• the animateSegments() function only knows the arc segments, has no knowledge about the actual statevalue
• as the animateSegments() function progresses, a current statevalue should be calculated somehow
• I guess, that more data should be included for the animateSegments() function to be able to calculate the gradient color, as the _CalculateColor() function needs the actual state, and the colorstop list. The latter one is available, the actual state should be calculated and depends on the currently drawn angle.

Note: It might be possible to use the __getGradientValue(startcolor, endcolor, value0-1). Colors can be fetched from the configuration & segments. And the value might use the min/max and current angles.