icon_adaptive_color always show first color threshold if entity attribute selected

[klonwar]

I have a graph for openmeteo weather:

type: horizontal-stack
cards:
  - type: custom:mini-graph-card
    unit: °C
    icon: mdi:thermometer
    align_icon: state
    align_state: center
    color_thresholds:
      - value: -30
        color: '#7851a9'
      - value: -20
        color: '#7366bd'
      - value: -10
        color: '#6495ed'
      - value: 0
        color: '#00bfff'
      - value: 10
        color: '#00BCD4'
      - value: 15
        color: '#45cea2'
      - value: 18
        color: '#FF9800'
      - value: 20
        color: '#FF9800'
      - value: 30
        color: '#e64a19'
      - value: 35
        color: '#C62828'
    decimals: 1
    entities:
      - entity: weather.openmeteo
        attribute: temperature
        state_adaptive_color: true
        show_fill: false
      - entity: input_number.nighttime
        color: gray
        name: Night
        show_line: false
        show_fill: true
        show_points: false
        show_legend: false
        y_axis: secondary
    font_size: 88
    hour24: true
    hours_to_show: 48
    line_width: 3
    points_per_hour: 4
    show:
      icon_adaptive_color: true
      labels: hover
      labels_secondary: false
      name: false
      points: false
    card_mod:
      style: |
        ha-card > div:nth-child(-n+2) {
          padding: 0 14px 0 14px !important
        }
        ha-card > .info {
          padding: 0 14px 0px 14px !important
        }

And it's colors are correct except for the icon.

[ildar170975]

Retest with this config:

    type: custom:mini-graph-card
    entities:
      - entity: ...
        show_state: true
        show_fill: true
        state_adaptive_color: true
    color_thresholds: ....
    color_thresholds_transition: hard
    hours_to_show: 24
    points_per_hour: 60
    line_width: 1
    show:
      labels: true
      icon_adaptive_color: true
    height: 300

It works OK in my setup:

[klonwar]

That is the point! It works fine when setting entity like you did! All other graphs working fine.

But if I try to use attribute like:

...
entities:
  - entity: weather.openmeteo
    attribute: temperature
show:
  icon_adaptive_color: true

It just stops showing color on the icon

[ildar170975]

I see, there is a problem with attribute. Thanks for reporting. Will take a look.

For you - a suggestion: when you will post a code next time for issues: -- always post a short minimal code: no card-mod, no possibly unrelated options -start from a simple case, increase a complexity step by step; -- for testing thresholds - use SIMPLE clear colors like "red", "#ff0000" (nobody will decode smth like "ae54f3"); and "hard" transition.

[ildar170975]

@akloeckner Can you have a look if it is related somehow to the recent changes?

type: vertical-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.xiaomi_cg_1_co2
    <<: &ref_settings
      color_thresholds:
        - value: 450
          color: red
        - value: 500
          color: orange
        - value: 510
          color: yellow
        - value: 520
          color: green
        - value: 530
          color: cyan
        - value: 540
          color: blue
        - value: 550
          color: lightgreen
        - value: 560
          color: magenta
      color_thresholds_transition: hard
      hours_to_show: 0.25
      points_per_hour: 240
      aggregate_func: last
      show:
        labels: true
        points: true    
        icon_adaptive_color: true
      height: 300
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.xiaomi_cg_1
        attribute: co2
    <<: *ref_settings

In case of using attribute - color is taken for the 1st threshold.

[klonwar]

Thank you for your suggestions!

In case of using attribute - color is taken for the 1st threshold.

yep, same for me

And if I add in your config another threshold with value is less or equal 0, the issue I've described reproduces!

color_thresholds:
  - value: 0
    color: purple
  - value: 10
    color: red

Result: (And in icon's html: style="color: #;")

And if we set value to 1

color_thresholds:
  - value: 1
    color: purple
  - value: 10
    color: red

Result:

[ildar170975]

And if I add in your config another threshold with value is less or equal 0, the issue I've described reproduces!

I am not following, which particular my config do you mean? Post a full (but still minimized) code.

[klonwar]

Ok, here

type: vertical-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.xiaomi_cg_1_co2
    <<: &ref_settings
      color_thresholds:
        - value: 0
          color: purple
        - value: 450
          color: red
        - value: 500
          color: orange
        - value: 510
          color: yellow
        - value: 520
          color: green
        - value: 530
          color: cyan
        - value: 540
          color: blue
        - value: 550
          color: lightgreen
        - value: 560
          color: magenta
      color_thresholds_transition: hard
      hours_to_show: 0.25
      points_per_hour: 240
      aggregate_func: last
      show:
        labels: true
        points: true    
        icon_adaptive_color: true
      height: 300
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.xiaomi_cg_1
        attribute: co2
    <<: *ref_settings

With this config It'll set style="color: #;" for the icon

[ildar170975]

With added "purple":

• the 1st card with "state": icon=cyan (as expected)
• the 2nd card with "attribute": icon=purple (as observed earlier) - i.e. again a color from the 1st threshold is used

And in Code Inspector it is "rgb(128,0,128)" (which I believe could be a "purple"):

[klonwar]

Interesting! I'm using last version I believe (v0.12.1) and with first threshold value <= 0 it sets this

And if you set -1 as a value?

But maybe we should concentrate on that attribute-first-threshold problem. Just thought that these two may be related

[ildar170975]

But maybe we should concentrate on that attribute-first-threshold problem

Agreed. But anyway show me YOUR code which causes "color: #"

[ildar170975]

And I am using Guess this may explain a difference.

[klonwar]

My code is

type: vertical-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.aqs_temperature_1
    <<: &ref_settings
      color_thresholds:
        - value: -1
          color: purple
        - value: 10
          color: red
        - value: 15
          color: orange
        - value: 20
          color: yellow
        - value: 25
          color: green
        - value: 30
          color: cyan
        - value: 35
          color: blue
        - value: 40
          color: lightgreen
        - value: 45
          color: magenta
      color_thresholds_transition: hard
      hours_to_show: 0.25
      points_per_hour: 240
      aggregate_func: last
      show:
        labels: true
        points: true
        icon_adaptive_color: true
      height: 300
  - type: custom:mini-graph-card
    entities:
      - entity: weather.openmeteo
        attribute: temperature
    <<: *ref_settings

I just adapted yours for my sensors (changed entities and thresholds values)

[ildar170975]

Recheck with 0.12.2-dev.2

[klonwar]

Yep, in dev.2 it sets color in rgb format instead of hex, and it's purple, so the first threshold is used

[akloeckner]

I think, the icon (and also the name) do not use attribute for calculating their colours, see here:

https://github.com/kalkih/mini-graph-card/blob/49ca1cd8627381e2981f57906014f615f08301c9/src/main.js#L241

And here

https://github.com/kalkih/mini-graph-card/blob/49ca1cd8627381e2981f57906014f615f08301c9/src/main.js#L152-L156

Does the colour become correct, when you hover over a point?

[klonwar]

Does the colour become correct, when you hover over a point?

yep, it does

[akloeckner]

:+1: I cannot promise anything right now. But that should be solvable...

[akloeckner]

Could you check out #1131, please? It seems to work on my end, but I did not thoroughly test it.

[ildar170975]

@akloeckner

Could you check out #1131

Tested with that js and still an icon uses the 1st color:

type: vertical-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.xiaomi_cg_1_co2
    <<: &ref_settings
      color_thresholds:
        - value: 500
          color: red
        - value: 570
          color: cyan
        - value: 610
          color: yellow
        - value: 700
          color: green
      color_thresholds_transition: hard
      hours_to_show: 6
      points_per_hour: 240
      aggregate_func: last
      show:
        labels: true
        points: true
        icon_adaptive_color: true
      height: 300
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.xiaomi_cg_1
        attribute: co2
    <<: *ref_settings

[akloeckner]

Hmm... Did you change the URL (HA side caching) and reload the page (browser side caching)? If yes, is it also wrong with soft transition?

[ildar170975]

What I usually do is:

1. Open zip-file, open js-file in Notepad - copy a content to a clipboard.
2. Delete gz-file in a target folder.
3. Open a target js-file - select all, delete, paste from a clipboard.
4. Ctrl-H in Chrome, Ctrl-F5 - this step I did several times here...

[akloeckner]

I believe, HA has a caching mechanism, which will result in the server not serving the changed file to the client, if the URL is unchanged. That's why I always change the resource URL before your step 4. (Edit dashboard -> manage resources -> add some arbitrary digits to the URL: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js?hacstag=1512800620121blabla) But maybe that is not necessary anymore. 🤔

[ildar170975]

@akloeckner I have no idea where I messed up - but right now I made one more attempt - repeated SAME actions listed here (except deleting gz-file - it was already deleted) - and here it is (separate sensor on the top, an attribute on the bottom):

Let's release it )))).

[akloeckner]

Alright. :+1: