Background disapear after HA reboot using severity

[guillaumelamirand]

When using a severity settings, it seems the order of value/color is important. However after HA reboot is always sort naturaly and so the bar-card is broken. If aI change back the order everything works as expected.

- align: split
    entity: sensor.temperature_sda
    icon: 'mdi:thermometer'
    severity:
      - color: '#40bf40'
        value: 50
      - color: var(--label-badge-yellow)
        value: 60
      - color: '#bf4040'  
        value: 100              
    type: 'custom:bar-card'

[Gluwc]

I am unable to reproduce this issue. Could you inspect the bar element and let me know what the style for the bar div is? Should look something like this:

<div id="bar_sensor_living_room_plant_3_moisture_4" style="--bar-percent:38%; --bar-charge-percent:38%; --bar-color:var(--bar-yellow);">```

[guillaumelamirand]

I have the following:

<div id="bar_sensor_temperature_sda_0" style="--bar-percent:33%; --bar-charge-percent:33%; --bar-color:hsl(undefined,50%,50%);"></div>

As you can see the color is undefined.

EDIT 1: I made a mistake in the issue, the wrong order is color then value; the right order is value > color

EDIT 2: If I fix the order, I got it working:

- align: split
    entity: sensor.temperature_sda
    icon: 'mdi:thermometer'
    severity:
      - value: 50
        color: '#40bf40'
      - value: 60
        color: var(--label-badge-yellow)
      - value: 100
        color: '#bf4040'
    show_icon: true
    title: Disque 1 (sda)
    title_position: inside
    type: 'custom:bar-card'

<div id="bar_sensor_temperature_sda_0" style="--bar-percent:33%; --bar-charge-percent:33%; --bar-color:#40bf40;"></div>

[Gluwc]

👍

[guillaumelamirand]

we may have misunderstood. The issue is still present, I only do a mistake in the description of it.
When HA reboots the severity settings are automaticaly sorted and breaks the card.

[Gluwc]

Fair enough, I thought since you posted the working bar it had been resolved.

The fact that it is returning --bar-color:hsl(undefined,50%,50%) leads me to believe you aren't running the latest card version on the front end.

Are you sure it's not using the cached version of the card?

[guillaumelamirand]

I never used the card before, and the version I have installed using custom updater is 0.1.9.

[Gluwc]

Ok that's strange. I'm going to need some more help from you to debug this since I've never seen this behaviour.
Could you try this gist, I've added some console log calls to the parts the return the color to try and figure out what's going on. Could you check the debug console and let me know what it reports?

Also are you using yaml mode or the GUI for lovelace?

[guillaumelamirand]

No problem.

This is what I got from the debug console. (note that I have many bar-card, that I guess the reason there are many output)

[Gluwc]

Right so that looks just fine. Are your bars working with this config?

Also can you confirm if you're using the GUI or yaml mode for lovelace. Since you're saying the it's re-arranging the severity order, my guess is GUI?

This is a side-effect of the way the GUI mode stores the config in JSON format which is probably sorted alphabetically on start-up. I will add some code in an upcoming release to sort it from low to high in the card itself so this shouldn't be an issue anymore.

[Gluwc]

Actually I think I know what's happening now. The card is checking the 2nd value of every severity entry, which in your case is sorted to the 1st value. This should be a fairly easy fix.

[Gluwc]

Whoops closed by accident. I will keep this open until I've submitted a fix.

[Gluwc]

Should be fixed in 0.2.0b0. Please confirm and I'll close the issue.

[guillaumelamirand]

Sorry for the delay but I confirm that the issue is now fixed.
Thanks