Lovelace: mini graph card

Skye · October 25, 2019, 7:23pm

Seems to work well

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.water_hourly
    color: '#0080ff'
    name: Verbruik
name: Water Verbruik
show:
  graph: bar
  labels: true
group_by: hour
aggregate_func: max
hour24: true

Some questions/remarks if possible:

Would it be possible to ‘fix’ the bar chart in bars of 1 hour always going from midnight to midnight rather than the last X eg 24) hours?
When there is 0L used, I would expect a very tiny bar or none at all, now it seems quite significant even though the value is 0
The bar seems a bit too squeezed to the bottom of the card, a couple of pixels of whitespace would be nice
The state is the current value of the latest bar, would it be possible to display another sensor’s value (e.g. the daily water usage sensor, so I would have a sum of all bar values) and show the bar value on hover
Is it possible to have an X-axis indicating which bar represents which hour?

kalkih · October 25, 2019, 7:37pm

Nope, not at the moment at least, you could use something like config-template-card to adjust hours_to_show dynamically, e.g. match current hour so if it’s 16:00 → hours_to_show: 16.

That’s to be able to easily hover/touch over a point on mobile, even if it’s at the lower bound. You can adjust this with the line_width option, the lower you set it the shorter the minimum bar height gets.

Also intentional design decision, use the show option fill: false to add a padding around the graph, or use card-mod to add a custom bottom padding.

Yes, just list that entity first in the entities object, and use the entities options to hide it from the graph, you can also show several states, with the show_state option.

No, not at the moment, there’s a feature request on github for this already though.

Skye · October 25, 2019, 7:46pm

Thanks for the help! Implemented most of the suggestions.

How would one hide the bar graph for water daily? I can’t seem to figure it out:

kalkih · October 25, 2019, 7:55pm

Nice!
There’s a show_graph option but I see that it isn’t listed in the docs. Will add to the docs in next release, but should work already!

Skye · October 25, 2019, 7:59pm

Works like a charm, for anyone else interested:

type: 'custom:mini-graph-card'
line_width: 2
unit: Liter
entities:
  - entity: sensor.water_daily
    show_line: false
    show_points: false
    show_legend: false
    show_graph: false
  - entity: sensor.water_hourly
    color: '#0080ff'
    name: Verbruik per uur
name: Water Verbruik Vandaag
show:
  graph: bar
  labels: true
  fill: false
group_by: hour
aggregate_func: max
hour24: true

kalkih · October 25, 2019, 8:02pm

Great!

I think you could remove these two lines as well if you want.

tom_l · October 26, 2019, 3:15am

If anyone is looking for a list of colours for a graph with many entities, like this one:

Screenshot_2019-10-26%20Home%20Assistant

There is a good resource here: https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/

maurizio53 · October 26, 2019, 12:49pm

Which is the best config about history option to have recorded only the sensors included into the mini-media-graph sensors? I’d like to disable completely the history option, but in this way i will have no more the card working…

tom_l · October 26, 2019, 1:05pm

Two ways of doing it:

Exclude all domains and only include the entities you are interested in
Exclude individual entities that you are not interested in.

FYI this question would have been better as a separate topic as it does not have much to do with mini-graph card support.

kalkih · October 26, 2019, 1:36pm

Alright, I’ve never really used the edit UI, and I’m not sure how HA handle config edits there but I’ll have a look at it!

I’ve made some changes in how we handle config changes after the initial render, this will enable compatibility with e.g. lovelace-auto-entities and might also work better with the edit UI (untested)?.

Will be in the next release.

maurizio53 · October 26, 2019, 3:04pm

Ok thanks, i agree about the topic and i am sorry for this!

SeLLeRoNe · October 27, 2019, 11:06am

hI @kalkih,
unfortunately the night setup in binary_sensor mode doesn’t work to me .

Does the state_map have to be after the entities?

          - type: custom:vertical-stack-in-card
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:config-template-card
                    entities:
                      - binary_sensor.night_time
#                      - sensor.house_temperature
#                      - sensor.dark_sky_temperature
                    variables:
                      - states['sensor.house_temperature'].state
                    card:
                      type: custom:mini-graph-card
                      name: Temperature
                      icon: "${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ? 'fas:thermometer-three-quarters' : vars[0] > 20 ? 'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' : 'fas:thermometer-empty' }"
                      more_info: false
                      height: 150
                      line_width: 4
                      hours_to_show: 168
                      points_per_hour: 0.25
                      aggregate_func: max
                      group_by: hour
                      group: false
                      hour24: true
                      animate: true
                      decimals: 1
                      font_size: 100
                      font_size_header: 14
                      align_header: default
                      align_icon: right
                      align_state: center
                      lower_bound: -5
                      upper_bound: 40
                      show:
                        name: true
                        icon: true
                        state: true
                        graph: line
                        fill: true
                        points: false
                        legend: true
                        extrema: false
                        labels: false
                        name_adaptive_color: true
                        icon_adaptive_color: true
                      state_map:
                        - value: "off"
                          label: "Day"
                        - value: "on"
                          label: "Night"
                      color_thresholds:
                        - value: 5
                          color: "#0055FF"
                        - value: 15
                          color: "#FF6600"
                        - value: 20
                          color: "#FFAA00"
                        - value: 22.5
                          color: "#FF7700"
                        - value: 25
                          color: "#FF3700"
                      style: |
                        ha-card {
                          padding: 16px !important;
                        }
#                        ha-icon {
#                          color: [[ if(vars[0] >= 30, "rgb(255, 0, 0);", if(vars[0] >= 22, "rgb(255, 153, 0);", if(vars[0] >= 16, "rgb(255, 204, 102);", "rgb(153, 204, 255);"))) ]]
#                        }
                      entities:
                        - entity: sensor.house_temperature
                          name: House
                          color: '#FF5000'
                          show_state: true
                        - entity: sensor.dark_sky_temperature
                          name: Outside
                          color: '#0099CC'
                          show_state: true
                        - entity: binary_sensor.night_time
                          color: '#FFFFFF'
                          name: Night Time
                          show_fill: true
                          show_line: false
                          show_points: false
                          show_legend: false
                          y_axis: secondary
                  - type: custom:mini-graph-card
                    name: Humidity
                    icon: fas:tint
                    more_info: false
                    height: 150
                    line_width: 4
                    hours_to_show: 168
                    points_per_hour: 0.25
                    aggregate_func: max
                    group_by: hour
                    group: false
                    hour24: true
                    animate: true
                    decimals: 1
                    font_size: 100
                    font_size_header: 14
                    align_header: default
                    align_icon: right
                    align_state: center
                    lower_bound: 0
                    upper_bound: 100
                    state_map:
                      - value: "off"
                        label: "Day"
                      - value: "on"
                        label: "Night"
                    show:
                      name: true
                      icon: true
                      state: true
                      graph: bar
                      fill: true
                      points: false
                      legend: true
                      extrema: false
                      labels: false
                      name_adaptive_color: true
                      icon_adaptive_color: true
                    style: |
                      ha-card {
                        padding: 16px !important;
                      }
                    entities:
                      - entity: sensor.house_humidity
                        name: House
                        color: '#00BFFF'
                        show_state: true
                      - entity: sensor.dark_sky_humidity
                        name: Outside
                        color: '#59B300'
                        show_state: true
                      - entity: binary_sensor.night_time
                        color: '#B3B3B3'
                        name: Night Time
                        show_fill: true
                        show_line: false
                        show_points: false
                        show_legend: false
                        y_axis: secondary

As you can see I also tested using the white color because maybe the gray wasn’t visible enough

kalkih · October 27, 2019, 1:09pm

The order in the config doesn’t matter.
I suggest trying in out in a simpler setup, should be much easier to debug.
It’s also easier to debug if you set labels: true imo.

I do see an issue in your config.

You’re setting the bounds on the primary y-axis, this will override the state_map generated bounds.

                      lower_bound: -5
                      upper_bound: 40

You would either need to move the night_time sensor to the secondary y-axis or remove the bounds.

What could happen if you’ve provided an invalid/wrong state_map is that the entity data is cached based on those state_map values, changing hours_to_show to something else reloading the page then changing it back should clear the cached data.

Edit: I saw you also had the night_time sensor in the bar chart, this will probably not work as you expect, it will just end up as another bar. There’s currently no way of mixing bars and lines.

Setting show_state: true on the night_time sensor could also be useful for debugging purposes.

SeLLeRoNe · October 27, 2019, 1:38pm

For the humidity one I know, it was just there ready for, and if, when it become available

For the lower/upper bound, those are working fine, and if I remove them it doesn’t change.
Also, as far as I can tell the night_time binary sensor it is already on the secondary axis, is it not?

I will try on a test view to have it without the template-card now

SeLLeRoNe · October 27, 2019, 1:49pm

I simplyfied it a lot now but no luck

                  - type: custom:mini-graph-card
                    name: Temperature
                    state_map:
                      - value: "off"
                        label: "Day"
                      - value: "on"
                        label: "Night"
                    entities:
                      - entity: sensor.house_temperature
                        name: House
                        color: '#FF5000'
                      - entity: sensor.dark_sky_temperature
                        name: Outside
                        color: '#0099CC'
                        show_state: true
                      - entity: binary_sensor.night_time
                        color: '#FFFFFF'
                        name: Night Time
                        show_fill: true
                        show_line: false
                        show_points: false
                        show_legend: true
                        show_state: true
                        y_axis: secondary

I did manually set the binary_sensor to on, ti says Night but still doesn’t seems to appear in the graph

kalkih · October 27, 2019, 1:50pm

You’re right, I think I was confused by the config template card nesting.

kalkih · October 27, 2019, 1:52pm

What does the labels look like?

labels_secondary: true

Did you try this:

What could happen if you’ve provided an invalid/wrong state_map is that the entity data is cached based on those state_map values, changing hours_to_show to something else reloading the page then changing it back should clear the cached data.

SeLLeRoNe · October 27, 2019, 1:55pm

I did set laberl_secondary in the show and the mapping changed from on/off to a/b

Then changed the mapping back to on/off but same thing (beside the state that now say “Night”)

Hours to show passed from 168 to the standard one since I removed the “custom” line

kalkih · October 27, 2019, 2:04pm

After you do this you’ll have to change hours_to_show again. What does the labels say when you got the correct state_map? It says Night? Is it night where you are and is the sensor working/changing as expected?

SeLLeRoNe · October 27, 2019, 2:10pm

Yes, it set to night and I did change the hours again