Lovelace: mini graph card

Thanks for the explanation!

Alright, yes, an additional hourly sensor should do the trick, I think? and as I mentioned before, aggregate functions is coming in the next update, you’d want to use max for this particular graph.

Group by hour is also coming in the next update which could be useful if you want each bar to represent a complete hour (9:00 - 9:59) instead of an hour calculated from current time (9:22 - 10:21) e.g.

New update should be available this weekend, I’ll let you know!

2 Likes

Is it already possible to use the version 0.7.1 to group by date?

Is it possible to show X and Y labels?

Hey there,
just today I noticed something that seems more like a bug, the “fill” option is not only filling the “bottom” part of the graph, but it also extend the graph till the border.

Would be possible to have two different options for that?
Examples:

Fill true:
image

Fill false:

Thanks :slight_smile:

Yes if you build it from source, but I’ll make a new release later today.

Y labels exist, see the show option labels. X axis, no, not at the moment.

It’s actually a “feature” :laughing: an intentional design decision, you’ll also see some other UI elements moved around (e.g. extrema) depending on the fill option.

Try a configuration like below, explanation: if you override the show_fill option in the entity object you can achieve the wanted layout.

# fill is default set to true
- type: custom:mini-graph-card
  entities:
    - entity: sensor.aqara_multi_temperature_2
      show_fill: false # override global fill setting

@Skye, @R_alph and everyone else:

Release 0.8.0 is now available.

Release notes & download in the link below:

3 Likes

Cheers! I’ll give it a go either this or next week :slight_smile:

1 Like

Thanks for this great component !

I’ve got a few questions:

  • When setting the group_by to hour, It will group from e.g. 8:30 till 9:30. How can I group it by full hour ?

  • When setting graph type to bar: it will draw a bar even for the value 0. How can I stop drawing that?

My use case: bar graph for solar panel production per hour. I’ve got a utitliy meter component per hour setup.

      - type: custom:mini-graph-card
        entities:
          - sensor.meter_zonnepanelen_uur
        aggregate_func: max
        group_by: hour
        points_per_hour: 1
        lower_bound: 0
        show:
          graph: bar

I tried your way but doesn’t work.

If I set the fill: false in “show” options and than the entity to show_fill: true, the entity doesn’t show the fill.
If I do the show_fill: false and the fill: true in “show”, I still don’t get the “filling”

What I would like is to keep the fill, but not to have the graph to go over the normal “borders”

Also, on a side note, the “night_time” sensor to have a grey background during night, doesn’t work :slight_smile:
The code used was the one from the docs:

         - entity: input_number.night_time
           color: gray
           name: Night Time
           show_fill: true
           show_line: false
           show_points: false
           show_legend: false
           y_axis: secondary

The night_time values are correctly updated via automations:
image

I would actually also ask if you will at some point add the “stackable bars” options, no rush, just curious :slight_smile:

PS: The new options are perfect! Definetely what many of us were waiting for!!!

Thanks

just found this graph and love it! Is there a way to display time as hours and minutes, at the moment I get things like 4.80 hours, which is 80% of an hour which I would like displaying at 4hrs 48 minutes?

That should not be the case, should always be grouped from 8:00 - 8:59. Sounds like you’re still loading the old version, try clearing cache.
Or if you’re a, HACS user please read this:

Not possible, in order to be able to get info about bars/points even if they are on the edge of the bound.
It’s however taller than it should be in the latest release, will put out a fix later today.

You could try messing around with the lower_bound option and try to hide it if you really want.

Thanks for your reply @kalkih.
I am using HACS, and what is mentioned in my lovelace-ui file matches with the path that HACS mentions (being /community_plugin/mini-graph-card/mini-graph-card-bundle.js)

Works with bars but, If I set hours to more than is in the dstabase the most recent value is repeated.

I thought this was what you wanted? You’ll not get the fill but the graph will still “extend to the border”.

Okay, use group: true, and then add a card padding with card-mod to the ha-card element for example.

I don’t know, probably not, but maybe.

Thanks, yeah the new options/features should make a whole range of new type of graphs possible.

Glad you like it!
Not directly, but what you could do is create a template sensor which handles the conversion of hours to h/m/s etc… Then you list this new template sensor as the first entity in the card with the option show_line: false and the regular (old) sensor as the secondary.
That way you’ll see the parsed time (h/m/s) in the state and still get the graph to render correctly.

Try clearing cache.
Is the hours always reset at x:30?
You don’t happen to live in a half-hour timezone? I guess the browser could handle those differently.

I’m not 100% sure what we are discussing here but this is how it works; if there’s no history available for a data point, the graph will render it as the next available data point.

1 Like

I already cleared the cache. It is always counting from one hour till the hour on the minute i open the page. E.g. now it is 16:02 here, so the bars are from x:02 to x+1:02

Please post you config.

To add the card-mod I will have to do a huge work on rewriting the whole view :frowning:

How hard would be to have a second fill option in order to have a little more “control” over the outcome?

Also, any feedback on the night_time bit please?

Thanks

Card mod is actually really convenient, it’s literally not harder than adding another option, sure it’s four lines instead of one but still :slightly_smiling_face:

... mini-graph-card config
style: |
  ha-card {
    padding: 16px !important;
  }

It would require quite a bit of tweaking. All new options complicate things.
It’s a quite niche request and it can be achieved with card mod quite easily imo, so not likely adding.

I don’t have a night sensor like that, so can’t easily try it out, config looks good though, can’t see any reason for it not working.

1 Like