Lovelace: mini graph card

[kalkih (Karl Kihlström)]

Good to know, most likely caused by history entries with unknown state, will fix this by ignoring NaN entries when calculating min/max.
It’s actually already done in the graph calculations, but must have missed it when calculating the extrema!

[klogg]

It is one of the options

          show:
            extrema: true

[klogg]

Much better if you read the docs that way tou get to see all the options and don’t run the risk of me having made a mistake

kalkih/mini-graph-card

[kalkih (Karl Kihlström)]

NEW RELEASE v0.2.1

Including mostly fixes but also a few new additions such as support for displaying multiple states and 24 hour time format.

Changelog

• Added: New hour24 option to choose time format between 12-hour/24-hour clock

• Added: Support for showing multiple sensor states, see new show_state option for the entity object (#33)

• Added: Ability to press/click on entities in the graph legend to bring up their “more info” dialog (#31)

• Fixed: Responsive design of the graph legend

• Fixed: NaN values in extrema (#34)

• Fixed: Extrema not rendering (#32)

• Fixed: Times on points going backwards (#30)

[klogg]

It seems a bit churlish to ask for such a small (and maybe niche) change in such a great card but would it be possible to do something about the bottom left corner being cut off when using labels in a card with rounded corners using card-modder?

Maybe have the min. value optional? Or remove the - (which would help if the min. value was only one digit).

Or, my preferred option would be to shift the whole thing including the y-axis over to be where the left side of the graph is? I think this would be more aesthetically pleasing even without rounded corners.

Just my thoughts, no big deal though and thanks again for a great card.

[Mariusthvdb (Marius)]

HI @kalkih

I’ve run into severe performance issues ( spontaneous restarts, resource depleting, frontend freezes…) using your card and the power-wheel card alongside each other. Having tested the power-wheel card on its own works much better now, since @gurbyz changed things in his card. Would you please check this post by @gurbyz, the author of the power-wheel-card, to see if anything familiar could be done with the mini-graph-card? Thanks for having a look!

[Mariusthvdb (Marius)]

somehow I have trouble gating the graph to show… Ive a few others that work, so must be me making an editing error, but Ive developed a blind spot for now…
would anyone please check for me what I am missing, as you can see, ive tested the various show options, but they don’t make any difference at all:

  - type: 'custom:mini-graph-card'
    name: 'Energie: verbruik - levering'
    entities:
      - entity: sensor.netto_verbruik
        name: Netto verbruik
      - entity: sensor.calculated_bruto_verbruik
        name: Bruto verbruik
      - entity: sensor.zp_actuele_opbrengst
        name: Solar production
    height: 100
    line_width: 4
    font_size: 75
#    show:
#      labels: true
#      extrema: true
#      fill: true
#      points: true
#      state: true

my sensors are valid, as seen in the regular glance card:

  - type: glance
    title: Energy flow
    show_header_toggle: false
    entities:
      - sensor.netto_verbruik
      - entity: sensor.calculated_bruto_verbruik
        name: Bruto verbruik
      - entity: sensor.zp_actuele_opbrengst
        name: Solar production

[kalkih (Karl Kihlström)]

@klogg

Just my thoughts, no big deal though and thanks again for a great card.

Thanks, to be honest the labels look like **** even without border radius right now.
Please, if you have time, open an issue in the GitHub repo, that way I won’t forget the request.

@Mariusthvdb

Would you please check this post by @gurbyz, the author of the power-wheel-card, to see if anything familiar could be done with the mini-graph-card? Thanks for having a look!

Okay, yes I’ve been utilizing the shouldUpdate function in LitElement since the initial release of this card, meaning the card is only updated when changes are detected to entities used in the card.

Performance issues could still occur however, especially if you are using several heavily configured cards in the same view.
This particular card can be quite demanding because it has to compute history data, some sensors updates very regularly and could contain 10s/100s of history entries per hour of history. All this history data then has to be computed in order to render the graph. This becomes especially demanding when the card is configured with many entities or with a high hours_to_show.
Think of a card, containing five sensors with each sensor being updated say 60 times an hour, with hours_to_show set to 168 (one week), that would result in 30240 history entries. Now, think if you have five similar cards in the same view…you get the point

@Mariusthvdb

somehow I have trouble gating the graph to show… Ive a few others that work, so must be me making an editing error, but Ive developed a blind spot for now…

The problem is most likely caused by a delay when fetching the history from the backend, I’ve experienced that it sometimes can take a while or even timeout completely when fetching the history, especially when being on a bad connection and/or when having a lot of cards all fetching history.

[an20dei (Andrei)]

You can edit the mini-graph-card-bundle.js file, and modify the div inside function _templateObject17()

I modified it from:

<div class='graph__labels flex'>

to:

<div class='graph__labels flex' style='padding-left:10px'>

Then you have to save, increase the js version in ui-lovelace and thats it.

You probably have to put maybe 20px instead of 10, try it out.

Here is mine (i have also removed the decimals from the labels cause i’m not interested in them)

[an20dei (Andrei)]

@kalkih - Man, great work, these cards look awesome.
I have one question tho, does the live color line works ? (the option with line_color_above and below)
Cause i tried to set one, and the only color displayed is yellow:

      - type: custom:mini-graph-card
        name: Outside temperature history
        icon: mdi:temperature-centigrade
        animate: true
        show:
          labels: true
        decimals: 1      
        entities: sensor.outside_temp
        line_color_above:
          - value: 0
            color: '#c9ffff'
          - value: 10
            color: '#ede071'
          - value: 20
            color: '#ff8c42'
          - value: 30
            color: '#ff3c38'          
        line_color_below:
          - value: -1
            color: '#66b3ba'
          - value: -30
            color: "#2f6690"

And this is how it is displayed:

[jchasey (John Chasey)]

I’d like to be able to use this to show the current and target temperature from a climate entity. I could pull out the values into a template sensor, but could you consider support for doing that direct from the component? i.e. list the climate entity attributes as an alternative to a sensor entity?

[kalkih (Karl Kihlström)]

@an20dei

@kalkih - Man, great work, these cards look awesome.
I have one question tho, does the live color line works ? (the option with line_color_above and below)
Cause i tried to set one, and the only color displayed is yellow:

Thanks!
Right now that feature changes the color of the whole line based on the current state, this is a limitation by how the graph is rendered right now. We’ve discussed this earlier and it’s possible that in the future the line could be rendered in smaller section making it possible to change color of each section individually.

@kalkih

This would have been very cool but unfortunately no, at least not right now.
The line is rendered as a single SVG path , making it impossible to have different colors for different sections of the line.

In order to make this work we would need to rework the way we compute and render the graph. Possibly by splitting and rendering the line in smaller sections instead, and apply colors to the individual sections based on their value.
This would require a fair bit of additional which would make computing and rendering the graph a bit more demanding for the browser.

Might look into this more in the future. It’s a really cool idea, and by applying gradients to the individual line sections we could have them blend together which would look really great!

[kalkih (Karl Kihlström)]

@jchasey

I’d like to be able to use this to show the current and target temperature from a climate entity. I could pull out the values into a template sensor, but could you consider support for doing that direct from the component? i.e. list the climate entity attributes as an alternative to a sensor entity?

I don’t think so, sorry.
A template sensor is quite easy to setup and should do the job just fine as you said.

[an20dei (Andrei)]

thanks for the explanation. anyway, it looks awesome just as it is, that would be just super sick if it will be possible.
keep up the good work
cheers!

[klogg]

Excuse my ignorance but when I tried to edit this in Visual Studio Code I get this. this also happens with the media-player-bundle.js too but not the ‘normal’, non bundle .js files

[kalkih (Karl Kihlström)]

The bundle is minified, best way to edit the card would be to modify the source and then build a new bundle, you can find the development instructions here.

[an20dei (Andrei)]

i didn t build it, probably i did it in the wrong way, but i just beautified it ( i did it using an online tool).

[klogg]

@kalkih

Thanks, to be honest the labels look like ****

This makes me think @kalkih might be thinking about a permanent solution…
Maybe I’ll wait and see

[kalkih (Karl Kihlström)]

Yes, will be in the next release, see:
https://github.com/kalkih/mini-graph-card/issues/35#issuecomment-460463797

[klogg]

That looks really nice. Thanks!