fix: use d3 to interpolate colors

[akloeckner]

This uses d3-interpolate to interpolate between two colors in the thresholds. The library can handle all sorts of color inputs, most importantly named colors. Our old implementation could only interpolate hexadecimal color values.

The following features now use the d3 interpolation (and should thus be fixed):

• plot indicator relating a plot to the entity name
• filled plots with an area under the line

This also extends usage of color interpolation (to elements not interpolating at all before):

• the state
• points on the graph
• bars

Old (wrong though explicit) behaviour of bars can be restored by setting color_thresholds_transition: hard.

fixes #1116

[akloeckner]

Example:

  - type: custom:mini-graph-card
    entities:
      - entity: sensor.aussentemperatur
        name: Außentemperatur
        unit: °C
        state_adaptive_color: true
      - entity: sensor.aussentemperatur
        name: Außentemperatur
        unit: °C
    hours_to_show: 72
    points_per_hour: 1
    group_by: hour
    aggregate_func: avg
    hour24: true
    decimals: 1
    show:
      labels: true
      points: true
    color_thresholds:
      - value: 10
        color: blue
      - value: 20
        color: green
      - value: 23
        color: red
    color_thresholds_transition: smooth

Before:	After:
Black indicator, no blue in Graph, points transition hard, state is plain blue.	Correct card.

[akloeckner]

I noticed, that bars do not inteprolate color. And there is some explicit code to prevent that. I wonder, if we should change that. See this example:

Currently:	Could be:

The original behavior could still be achieved by using hard color transition...

[akloeckner]

I went for interpolating bar colors, too. It just doesn't make sense to not do it. This changes appearance of colored bars. But I consider it a fix. The old behaviour can be restored by setting color_thresholds_transition: hard.

[akloeckner]

@ildar170975, could you please double-check that this behavior is as expected?

[ildar170975]

@akloeckner
Thanks a lot!
Just arrived to a normal PC, can test.
Please explain me once again (please....) where to find a js file to download...

[akloeckner]

Don't hurry. I just noticed it was next week. ;-)

• Click on "Checks" for the PR (top of the PR page)
• Select "CI"
• Scroll down to "Artifacts"
• Download one of the zips
• It should contain the compiled .js

[ildar170975]

• It should contain the compiled .js

This one?

[akloeckner]

Yes, any of the two dist* files should be ok. They are just compiled with different Node.js versions.

[ildar170975]

@akloeckner

Test 1:

type: custom:mini-graph-card
entities:
  - entity: sensor.xiaomi_cg_1_co2
    show_state: true
    state_adaptive_color: true
  - entity: sensor.xiaomi_cg_2_co2
    show_state: true
    state_adaptive_color: true
name: CO2
hours_to_show: 24
points_per_hour: 60
lower_bound: ~400
color_thresholds:
  - value: 450
    color: orange
  - value: 550
    color: green
  - value: 600
    color: magenta
color_thresholds_transition: hard
height: 400
show:
  labels: true

Colors of legend's indicators are same as colors of state labels - as expected.

With attributes - colors are also OK (do not bother about absence of graphs since these "master" sensors are excluded from Recorder):

Imho we can merge this & allow other people to test.
I am having an access to PC only 3-4 days, then leaving for 8-10 days, and again 3-4 days, and so on - on a routine basis ))).

[ildar170975]

Test 2 - other color formats:

[akloeckner]

Imho we can merge this & allow other people to test.

Perfect. Let's do this then! Thanks for checking.

I am having an access to PC only 3-4 days, then leaving for 8-10 days, and again 3-4 days, and so on - on a routine basis ))).

This sounds like an exciting life. Or an exhausting one. :-)

[github-actions]

🎉 This PR is included in version 0.12.2-dev.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀