icon_adaptive_color always show first color threshold if entity attribute selected #1129

klonwar · 2024-08-23T10:41:52Z

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.

The text was updated successfully, but these errors were encountered:

ildar170975 · 2024-08-23T11:25:28Z

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 · 2024-08-23T12:04:45Z

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 · 2024-08-23T13:11:34Z

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 · 2024-08-23T13:53:51Z

@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 · 2024-08-23T14:48:48Z

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 · 2024-08-23T14:54:07Z

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 · 2024-08-23T15:13:55Z

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 · 2024-08-23T15:35:07Z

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 · 2024-08-23T16:18:00Z

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 · 2024-08-23T16:53:21Z

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

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

ildar170975 · 2024-08-23T16:54:39Z

And I am using

Guess this may explain a difference.

klonwar · 2024-08-23T16:56:31Z

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 · 2024-08-23T17:02:31Z

Recheck with 0.12.2-dev.2

klonwar · 2024-08-23T17:16:01Z

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

akloeckner · 2024-08-23T17:50:23Z

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

mini-graph-card/src/main.js

Line 241 in 49ca1cd

style=${icon_adaptive_color ? `color: ${this.color};` : ''}>

And here

mini-graph-card/src/main.js

Lines 152 to 156 in 49ca1cd

    
           this.color = this.intColor( 
        
             this.tooltip.value !== undefined 
        
               ? this.tooltip.value : this.entity[0] && this.entity[0].state, 
        
             this.tooltip.entity || 0, 
        
           );

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

klonwar · 2024-08-23T18:07:55Z

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

yep, it does

akloeckner · 2024-08-23T18:43:09Z

👍 I cannot promise anything right now. But that should be solvable...

kalkih#1129 Just a quick stub. To be tested still.

akloeckner · 2024-08-27T21:19:47Z

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

ildar170975 · 2024-09-04T22:46:23Z

@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 · 2024-09-05T10:20:00Z

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 · 2024-09-05T10:35:25Z

What I usually do is:

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

akloeckner · 2024-09-05T18:57:22Z

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 · 2024-09-05T19:24:17Z

@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 · 2024-09-05T20:38:40Z

Alright. 👍

klonwar changed the title ~~icon_adaptive_color doesn't work with attribute selection~~ icon_adaptive_color always show first color threshold if entity attribute selected Aug 24, 2024

akloeckner added a commit to akloeckner/mini-graph-card that referenced this issue Aug 26, 2024

Update main.js

e2cfa30

kalkih#1129 Just a quick stub. To be tested still.

This was referenced Aug 26, 2024

fix: name and icon color can use attributes #1130

Closed

fix: name and icon color respect attribute choice #1131

Merged

ildar170975 mentioned this issue Sep 4, 2024

Weird lower/upper bounds MAY BE shown for a not-recorded entity #1135

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

icon_adaptive_color always show first color threshold if entity attribute selected #1129

icon_adaptive_color always show first color threshold if entity attribute selected #1129

klonwar commented Aug 23, 2024

ildar170975 commented Aug 23, 2024 •

edited

Loading

klonwar commented Aug 23, 2024

ildar170975 commented Aug 23, 2024

ildar170975 commented Aug 23, 2024

klonwar commented Aug 23, 2024

ildar170975 commented Aug 23, 2024

klonwar commented Aug 23, 2024

ildar170975 commented Aug 23, 2024 •

edited

Loading

klonwar commented Aug 23, 2024 •

edited

Loading

ildar170975 commented Aug 23, 2024

ildar170975 commented Aug 23, 2024 •

edited

Loading

klonwar commented Aug 23, 2024

ildar170975 commented Aug 23, 2024

klonwar commented Aug 23, 2024

akloeckner commented Aug 23, 2024

klonwar commented Aug 23, 2024 •

edited

Loading

akloeckner commented Aug 23, 2024

akloeckner commented Aug 27, 2024

ildar170975 commented Sep 4, 2024

akloeckner commented Sep 5, 2024 •

edited

Loading

ildar170975 commented Sep 5, 2024

akloeckner commented Sep 5, 2024

ildar170975 commented Sep 5, 2024

akloeckner commented Sep 5, 2024

icon_adaptive_color always show first color threshold if entity attribute selected #1129

icon_adaptive_color always show first color threshold if entity attribute selected #1129

Comments

klonwar commented Aug 23, 2024

ildar170975 commented Aug 23, 2024 • edited Loading

klonwar commented Aug 23, 2024

ildar170975 commented Aug 23, 2024

ildar170975 commented Aug 23, 2024

klonwar commented Aug 23, 2024

ildar170975 commented Aug 23, 2024

klonwar commented Aug 23, 2024

ildar170975 commented Aug 23, 2024 • edited Loading

klonwar commented Aug 23, 2024 • edited Loading

ildar170975 commented Aug 23, 2024

ildar170975 commented Aug 23, 2024 • edited Loading

klonwar commented Aug 23, 2024

ildar170975 commented Aug 23, 2024

klonwar commented Aug 23, 2024

akloeckner commented Aug 23, 2024

klonwar commented Aug 23, 2024 • edited Loading

akloeckner commented Aug 23, 2024

akloeckner commented Aug 27, 2024

ildar170975 commented Sep 4, 2024

akloeckner commented Sep 5, 2024 • edited Loading

ildar170975 commented Sep 5, 2024

akloeckner commented Sep 5, 2024

ildar170975 commented Sep 5, 2024

akloeckner commented Sep 5, 2024

ildar170975 commented Aug 23, 2024 •

edited

Loading

ildar170975 commented Aug 23, 2024 •

edited

Loading

klonwar commented Aug 23, 2024 •

edited

Loading

ildar170975 commented Aug 23, 2024 •

edited

Loading

klonwar commented Aug 23, 2024 •

edited

Loading

akloeckner commented Sep 5, 2024 •

edited

Loading