Lovelace: mini graph card

[SeLLeRoNe (Andrea Iannucci)]

This is how I did it

View:

icon: mdi:hospital-box
panel: true
path: health
cards:
  - type: custom:layout-card
    layout: vertical
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:decluttering-card
            template: title
            variables:
              - title: CoronaVirus
          - type: custom:decluttering-card
            template: coronavirus
            variables:
              - country_name: Worldwide
              - country: worldwide
          - type: custom:decluttering-card
            template: coronavirus
            variables:
              - country_name: Spain
              - country: spain
          - type: custom:decluttering-card
            template: coronavirus
            variables:
              - country_name: Italy
              - country: italy
          - type: custom:decluttering-card
            template: coronavirus
            variables:
              - country_name: United Kingdom
              - country: united_kingdom

Decluttering Card Template:

---
coronavirus:
  card:
    type: custom:vertical-stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: glance
            title: '[[country_name]]'
            columns: 4
            show_header_toggle: false
            entities:
              - name: Confirmed
                entity: sensor.[[country]]_coronavirus_confirmed
                icon: 'mdi:emoticon-neutral-outline'
                tap_action:
                  action: none
              - name: Current
                entity: sensor.[[country]]_coronavirus_current
                icon: 'mdi:emoticon-frown-outline'
                tap_action:
                  action: none
              - name: Recovered
                entity: sensor.[[country]]_coronavirus_recovered
                icon: 'mdi:emoticon-happy-outline'
                tap_action:
                  action: none
              - name: Deaths
                entity: sensor.[[country]]_coronavirus_deaths
                icon: 'mdi:emoticon-dead-outline'
                tap_action:
                  action: none
      - type: custom:mini-graph-card
        name: [[country_name]]
        icon: mdi:hospital-box
        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: false
        decimals: 1
        font_size: 100
        font_size_header: 14
        align_header: default
        align_icon: right
        align_state: center
        lower_bound: 0
        show:
          name: false
          icon: false
          state: false
          graph: line
          fill: false
          points: false
          legend: false
          extrema: false
          labels: false
          labels_secondary: false
          name_adaptive_color: true
          icon_adaptive_color: true
        entities:
            - entity: sensor.[[country]]_coronavirus_confirmed
              name: Confirmed
              color: '#0066FF'
              show_fill: false
            - entity: sensor.[[country]]_coronavirus_current
              name: Current
              color: '#3399FF'
              show_fill: false
            - entity: sensor.[[country]]_coronavirus_recovered
              name: Recovered
              color: '#33CC33'
              show_fill: false
            - entity: sensor.[[country]]_coronavirus_deaths
              name: Deaths
              color: '#FF9900'
              show_fill: false
        tap_action:
          action: none

Of course there is space for improvments, feedbacks appreciated

[kalkih (Karl Kihlström)]

@Pirol_62

The relation between recovered and confirmed is drawed completely wrong.

Because you put them on two different axes, your second picture looks correct to me though?
Recovered seems to be at 25 compared to confirmed at 1966 the difference is pretty huge, hence why it’s hard to spot changes of the recovered line when they are on the same axis.

[klogg]

Is there a way to have two binary sensors (or input booleans) on the same graph but have one inverted?

I would like to use the day/night trick but also show when my heating is on. In the example below I need the ‘night’ graph inverted. (I am using the sensor.above_horizon to show night time.)

Thanks.

[baz123 (Brian)]

I need to find a way to graph an array of values. Is that possible with this card? I suspect not, but I thought I’d ask .

This is not data that can easily be used from the history component as it is the price of electricity over the next n hours in half hour chunks from now onward.

[Maverick (Thomassistant)]

I love the mini graph card. Thanks for the work!
I use it for almost anything related to sensor states, graph or no graph.
Including front door presence, water leak sensor status and back door status.
I only would be needing a way to make the typography consistent, as native cards use different font-sizes for headers.

[VDRainer]

Scroll 11 posts up.

[Maverick (Thomassistant)]

Thanks! Added to my update-todo-list

[Se7enair]

Updated from 0.105 to 0.106.6

What happened?

[DavidFW1960 (David)]

Did you check the breaking changes in 0.106 (and update the card?)

[Se7enair]

deleted the mini graph card and reinstalled via HACS. Now it works.

[adamadvatio (adam)]

Hi!
Is there any chance to move extrema from bottom of graph to top?

[Denman2103 (Dennis)]

Hello,

I use mini graph card for my solarpanels. i monitored my Day sensor, so I can see how much power I have generated per day.
In the mini graph card i set:

hours_to_show: 168

so i can see it from the whole week. Is there a way to show the date or days on the bottom of each bar? Like a X-axis?

This is my card config:

type: 'custom:mini-graph-card'
name: Stroom opgewekt
entities:
  - entity: sensor.solaredge_energy_today_template
group_by: date
hours_to_show: 168
aggregate_func: max
show:
  graph: bar

[TompaD79 (Tomas Davidsson)]

Hi! I need help…
I can’t get tihs card to work…
Can someone help me?

[VDRainer]

Remove the hyphen.

type: 'custom:mini-graph-card'
name: Temp
entities:
  - ...

[TompaD79 (Tomas Davidsson)]

Nope…
Did not work.

[SeLLeRoNe (Andrea Iannucci)]

The community-plugin should be changed in hacsfiles.
Not sure it’s already deprecated the community-plugin, but it’s worth to change it already if you’re on 0.107.x and latest HACS.

[Flo.C (Flo)]

This looks really nice. Interrested to see your whole dashboard

[akifbayram]

Thank you! Very much a work in progress. Most of the cards are swipe cards (thermostats, lights, humidity/air quality, robot vacuums).

[Flo.C (Flo)]

Looks really great. Love the theme. Looking currently for inspirations

[Sym0nd0 (Sy)]

That looks amazing! Could you share your config please?

I’m very jealous that you have a Nest dev account, I’d love to be able to include my Hello on my dashboard.