Lovelace: mini graph card

[kalkih (Karl Kihlström)]

@Mariusthvdb

hope these graph color changes work out as we discussed before. This makes for a very nice history-graph.
thanks in advance for the good work!

Not yet, but I’ll see what I can do about it

@jimpower

Can’t wait to see how these look with my weather station project. Thanks for your work in implementing min & max temps. Once you get inspired your turn around is so quick thanks.

Thanks! Yes, It’s all about getting inspired and you managed to get me just that

[jimpower]

I have a lot more for you when you get done with these additions lol

I have ideas around threshold graphs and “green zones” for the plant sensors I will pm you a screen of what I have.

[kalkih (Karl Kihlström)]

NEW RELEASE v0.2.0

Including a redesign, support for multiple entities, optional animations & much more.

A few breaking changes had to me made (see changelog) in order to make some of the new features possible, checkout the updated README for up to date instructions and examples.

Big thanks to @jimpower for inspiration & brainstorming, and thanks to @iantrich for adding the group option.

@Mariusthvdb Multi-colored graph lines based on state did not make it into this release, unfortunately.

EDIT: Forgot to say it but if you’re not a fan of the new design, you can still have the old look by setting some options, see this example for some pointers.

Changelog

• UI redesign

• Added: support for multiple entities (BETA) #28

• Added: support for multiple line_color entries

• Added: graph data points with information on hover, see points option under the show option

• Added: animate option to have the graph animated on initial load

• Added: points_per_hour option to specify amount of data points that should be rendered for each hour (basically the graph detail/accuracy).

• Added: support for multiple color thresholds with new line_color_above & line_color_below options

• Added: allocated space for the graph -> less jerky movements when loading in

• Added: graph legend, visible if multiple entities is present

• Added: align_header, align_icon & align_state options #27

• Added: show option, to manage visible/hidden UI elements

• Added: entities option

• Added: group option to remove paddings/box-shadow #26 (@iantrich)

• Fixed: bug were history data would be fetched when graph was hidden

• Fixed: decimals option not being applied to labels #19

• Fixed: Y-scale based on absolute extrema causing inconsistent results, now based on moving average same as the rest of the graph.

• Deprecated: entity option, use new entities, accepts string or list (deprecated)

• Removed: detail option, use new points_per_hour option (Breaking change)

• Removed: hide options, use new show option (Breaking change)

• Removed: labels option, use labels in new show option (Breaking change)

• Removed: line_value_above, line_color_above, line_value_below & line_color_below options (Breaking change)

[iantrich (Ian)]

[cjsimmons (Chris Simmons)]

This is awesome!!! Love it!!!

I’ve combined my Speedtest graphs into one, like I use to have with the boring block history-graph card. This is so much better.

One thing I’d like to see is to be able to add a second sensor state to the card. There is one on the left, and a heap of wasted space on the right. In my case with my Speedtest graph, it shows the first sensor which is download, I’d like to show the upload as well. Would also be handy when show temp and humidity on the same card.

Not sure if this is possible, but would be great if it is.

Thanks for your hard work with this.

Oh, another thing I just noticed. I can’t bring up the popup info card for the other sensors. Clicking anywhere and on anything only brings up the popup info for the first sensor? Is this a bug?

[jimpower]

Yes legend thanks now to see if I can adapt into my project and finish before the next podcast

[kalkih (Karl Kihlström)]

@cjsimmons

One thing I’d like to see is to be able to add a second sensor state to the card. There is one on the left, and a heap of wasted space on the right. In my case with my Speedtest graph, it shows the first sensor which is download, I’d like to show the upload as well. Would also be handy when show temp and humidity on the same card.

Definitely something I want to add as an option in the next release, maybe something like a show_state option for entity entries, similar to how there’s the name option right now.

# Example of future option
- type: custom:mini-graph-card
  entities:
    - entity: sensor.example
      show_state: true
    - entity: sensor.example2
      show_state: true
    - entity: sensor.example2
      show_state: false

@cjsimmons

Oh, another thing I just noticed. I can’t bring up the popup info card for the other sensors. Clicking anywhere and on anything only brings up the popup info for the first sensor? Is this a bug?

Not a bug, I just haven’t added support for that yet when it comes to multiple entities.
So, what do you think about this:

• Pressing/clicking the entity name in the legend will bring up the popup for that entity.
• Pressing/clicking the state (when I’ve added support to display multiple states) will bring up the popup for that entity.
  If you have any suggestions or preferences on how this should work, please let me know.

Edit: how does the default history-graph card solve this btw?

Thanks for the feedback!

@jimpower

Yes legend thanks now to see if I can adapt into my project and finish before the next podcast

Looking forward to see the results

[cjsimmons (Chris Simmons)]

@kalkih

Definitely something I want to add as an option in the next release, maybe something like a show_state option for entity entries, similar to how there’s the name option right now.

Good to know. Thought that may have been the case. I think something like that option will work, but need to think of people that have many sensors, and a default state. Guess maybe a max. amount of sensors and then a new line starts? Just an idea otherwise having 4 or 5 states will start to get squishy and messy. I think having it start a second line would be the best approach as ugly as it may be but it will still be neat, then people can set a sensor to false for the ones they don’t want.

@kalkih

So, what do you think about this:

Yep, that works well for me. It’s pretty much what I expected to happen. Also, remove the click event from clicking on the graph, or have it open the correct info card. The native history graph doesn’t have a click event on the graph itself. Actually, there is no popup info cards at all. Just clicking on the legend will hide that sensor from the graph.

[kalkih (Karl Kihlström)]

@cjsimmons

but need to think of people that have many sensors, and a default state. Guess maybe a max. amount of sensors and then a new line starts?

I think default will be to only show the state of the first entry.
Yes moving to the next line when no more horizontal space is available will probably end up being the behaviour, it might look ugly, but at least the option will be there.

@cjsimmons

Also, remove the click event from clicking on the graph

Good catch, right now it’s actually not possible to press the graph points on a touch device to see history information, works on desktop because you just hover over them with the mouse.

[cjsimmons (Chris Simmons)]

Sounds good!!

[jimpower]

@kalkih I’m getting errors with new card

I’m clearly selecting from the sensor domain

[kalkih (Karl Kihlström)]

@jimpower

I’m getting errors with new card

That’s the old version still loading
Bump the version number at the end of the resource reference, or clear cache.

[gerard33 (Gerard 🇳🇱)]

@jimpower A bit off-topic, but how did you make the temperature and humidity card with the min and max values? Is that a specific card or are you using picture elements?
I have checked your Github but couldn’t find this card there.

[jimpower]

@gerard33 this is a little project I’m working on all shall be revealed in due time just trying to make some things user friendly more details to come in upcoming HA podcast. I actually need to do some more collaboration with @kalkih see if he can help me with the custom component side.

Send me a pm if you would like code in its current format it will most likely become redundant once @kalkih adds these options to this awesome card. Speaking of which is the min/max available in this latest update?

** Nevermind found out the answer is yes **

[gerard33 (Gerard 🇳🇱)]

The min-max is indeed available in the latest update of the graph card. But it’s still great to have this in a card like yours, as min-max values are not shown when you set graph: false in the mini graph card.
But maybe this can be added in the mini graph card as an option.

[kalkih (Karl Kihlström)]

@gerard33

min-max values are not shown when you set graph: false in the mini graph card.
But maybe this can be added in the mini graph card as an option.

Thanks for the info, will fix this in the next version

[jimpower]

@kalkih when I set

location_icon: left
location_state: center

It makes no change to card state and icon still remain in original card position

[kalkih (Karl Kihlström)]

@jimpower

@kalkih when I set

location_icon: left
location_state: center

I see I forgot to change the example yaml, they were renamed to align_icon & align_state prior to release.

[jimpower]

works a treat once again love your work

[jimpower]

@kalkih when you select the “more_info” for second selected entity it selects the info for first entity