Card not rendering correctly.

[arsaboo]

I was hoping to replicate the Ecobee system chart (top half) based on your card. Here's how the card appears on Ecobee.

The orange bar represents the time during which the HVAC was heating. The status of the thermostat is available in the attribute hvac_action in the climate entity. Here's my config:

      - type: 'custom:uptime-card'
        entity: climate.bedroom
        attribute: hvac_action
        ko: 'heat'
        ok: 'cool'
        icon: 'mdi:thermostat'
        name: Master Thermostat
        status_adaptive_color: true
        color:
          ok: '#2DA8E0'
          ko: '#F27720'
        alias:
          heat: Heat
          cool: Cool
        show:
          footer: false
        alignment:
          status: spaced
          header: left
          icon_first: true

But, the card is not what I was expecting. here's how it looks:

Basically, I am looking for blue or orange bars only when the HVAC status is cool or heat respectively. Ideally, it should be blank when the status is idle.

Right now, each bar is 40 minute interval. Does that mean that we can only have equally spaced intervals? The HVAC may run for different amount of time depending on the various conditions.

[dylandoamaral]

Hi you can try to simulate the expected behaviour using a low granularity such as a big´hours_to_show´ and using the background color for color.half, color.none and color.ko. Tell me if it solves your problem, it can be an interesting example for the read me section. I don't have my pc right now so I can't try it myself.

[arsaboo]

So, I changed the config to the following:

      - type: 'custom:uptime-card'
        entity: climate.bedroom
        attribute: hvac_action
        hours_to_show: 192
        ko: 'heat'
        ok: 'cool'
        icon: 'mdi:thermostat'
        name: Master Thermostat
        status_adaptive_color: true
        color:
          ok: '#FFFFFF'
          ko: '#F27720'
          half: '#FFFFFF'
        alias:
          heat: Heat
          cool: Cool
        show:
          footer: false
        alignment:
          status: spaced
          header: left
          icon_first: true

Here's the output.

There is one blank bar. But, I think the bigger problem is that the card divides time into equal intervals. However, the HVAC can run for different time periods (see below)

I am thinking that the same should be true for any sensor (meaning sensors can stay on for only part of the interval that the card is using).

[dylandoamaral]

Now set bar.spacing at 0 and bar.amount as hours_to_show (or even more) and tell me how it looks like !

[arsaboo]

      - type: 'custom:uptime-card'
        entity: climate.bedroom
        attribute: hvac_action
        hours_to_show: 200
        ko: 'heat'
        ok: 'cool'
        icon: 'mdi:thermostat'
        name: Master Thermostat
        status_adaptive_color: true
        color:
          ok: '#FFFFFF' # #2DA8E0
          ko: '#F27720'
          half: '#FFFFFF'
        alias:
          heat: Heat
          cool: Cool
        show:
          footer: false
        alignment:
          status: spaced
          header: left
          icon_first: true
        bar:
          spacing: 0

Here's how it looks:

I still think this is not right and the problem is bars of the same size. Note that the HVAC can run for 1 minute at some time and for maybe 5 minutes at another. Also, having a very large hours_to_show defeats the purpose. Notice in the ecobee chart, it is quite granular.

[dylandoamaral]

I mean what you really need is a new card doing exactly what you are asking for, which is not the purpose of this card.

I can't implement what you asking since it is not corresponding to everyone needs and it will transform the card into a Frankenstein monster.

I still think you can manage to obtain something very similar using a better granularity and a bit of tweeking. You can either fork this card and implement exactly what you need in JavaScript or you can try to increase the bar.amount to simulate the expecting behaviour. You can't have a minute granularity showing an entire week of data since every minute would be represented by less than a pixel but I think you can for example have a granularity of 5 minutes in a day it would means a hours_to_show of "24" and a bar.amount of "288"(24*12).

It will naturally create "larger bars" by simply combining more thin evenly spaced bars representing a small amount of time if they are not spaced.

[arsaboo]

Understand....will close the issue for now.