Lovelace: mini graph card

[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!

[jarrah]

Simply put, this card is amazing, thank you for all your hard work on making this great!

I have a couple of minor suggestions which I’m happy to put in GitHub if you prefer (I’m using v0.2.1).

1. The legend text is slightly misaligned with the square boxes:
   

2. When hovering over a line with multiple entities, would it be possible to reveal the entity name in place of the card title (e.g. it would show ‘Loft’ instead of ‘Indoor Temperatures 24hr’) in the same way the entity state changes to match which line the mouse hovers over please? This would be useful if I decide to not show a legend to help with the minimalist look.

3. I noticed that when enabling fill, it blends the line shading as each line is drawn (easily seen with animate enabled). Is it possible to keep line colours the same between it’s own line and the line below. e.g. in the screenshot below, only orange appears below Loft, purple between Loft and Study lines, and red between Kitchen and Study lines? I realise this may be technically impossible so no problems at all if so.
   

Thanks!

[Mariusthvdb (Marius)]

@kalkih

Performance issues could still occur however, especially if you are using several heavily configured cards in the same view.

well, they do, and, tbh, make the card unusable in my setup unfortunately. Im not doing anything special, just try to show 3 sensors on the card…

it grinds my system, and immediately has all my Hue lights go unavailable, which is an indicator of resource issues in the system. resulting in a spontaneous restart…

i will test it on a dedicated view, with only this card:

title: Test
icon: mdi:test-tube
path: test
cards:
#  - !include /config/lovelace/tiles/tiles_new_switches.yaml
#  - !include /config/lovelace/tiles/tiles_switches.yaml
#  - !include /config/lovelace/includes/dark_sky_custom_card.yaml

  - 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
    hours_to_show: 48
    height: 100
    line_width: 4
    font_size: 75
    show:
      labels: true
      extrema: true
      fill: true
      points: true
      state: true

and see what happens.

__ update__

no difference. the only card on this view simply never loads (waited 2 minutes) and halts the system. tested it 2. first attempt had to restart through terminal ssh (HA interface wasn’t effective any more) second try restarted spontaneously.
I am forced to disable this beautiful card…

[kalkih (Karl Kihlström)]

@jarrah

Simply put, this card is amazing, thank you for all your hard work on making this great!

Thank you very much, appreciate the kind words!

@jarrah

The legend text is slightly misaligned with the square boxes:

Fix is in the dev branch and will be available in the next release
https://github.com/kalkih/mini-graph-card/commit/c2663669957497d2db1fd4afa66838d9b0b8cbf2

@jarrah

hen hovering over a line with multiple entities, would it be possible to reveal the entity name in place of the card title (e.g. it would show ‘Loft’ instead of ‘Indoor Temperatures 24hr’) in the same way the entity state changes to match which line the mouse hovers over please? This would be useful if I decide to not show a legend to help with the minimalist look.

Fantastic idea! Please open an issue on github and I’ll get to it asap.

@jarrah

I noticed that when enabling fill, it blends the line shading as each line is drawn (easily seen with animate enabled). Is it possible to keep line colours the same between it’s own line and the line below. e.g. in the screenshot below, only orange appears below Loft, purple between Loft and Study lines, and red between Kitchen and Study lines? I realise this may be technically impossible so no problems at all if so.

This should theoretically be possible with the help of masks and clip-paths (I think?), but might require a lot of work, open an issue for this as well, I’ll see if it’s possible to implement.

Thanks for the suggestions!

@Mariusthvdb

well, they do, and, tbh, make the card unusable in my setup unfortunately. Im not doing anything special, just try to show 3 sensors on the card…

it grinds my system, and immediately has all my Hue lights go unavailable, which is an indicator of resource issues in the system. resulting in a spontaneous restart…

If the graph doesn’t even show up at all and your whole HA starts acting weird, it’s most definitely an issue in the backend.
Could be an issue with your database, you could try purging older history if you haven’t done so already and maybe consider switching form SQLite to something faster.

Here’s one of my views, loads without any issues.

Here’s the API call used by this card btw: https://developers.home-assistant.io/docs/en/external_api_rest.html#get-api-history-period-lt-timestamp

[jarrah]

Hi @Mariusthvdb, just to back up @kalkih I’ve not seen any performance issues with using 6 instances of this custom card, two of which have 5 sensors each.

Do you see the same issues if you try using the history-graph card? https://www.home-assistant.io/lovelace/history-graph/

[jarrah]

@kalkih

Fantastic idea! Please open an issue on github and I’ll get to it asap.

Thanks, I’ll do that now!

@kalkih

This should theoretically be possible with the help of masks and clip-paths (I think?), but might require a lot of work, open an issue for this as well, I’ll see if it’s possible to implement.

No problems, only worth it if a lot of other people ask the same too.

[Danik (Daniel)]

What i am missing ?

did this steps:

1. Download and copy mini-graph-card-bundle.js from the latest release into your config/www directory.
2. Add a reference to mini-graph-card-bundle.js inside your ui-lovelace.yaml .

[kalkih (Karl Kihlström)]

If you’ve done those two steps it should work.
Are you using lovelace in yaml mode?
Please post your resource reference yaml.