Lovelace: mini graph card

[ludeeus]

No no no no no no NO

1. HACS is off topic here
2. Do NOT change/rename any folders!
3. https://hacs.xyz/docs/categories/plugins#custom-view-hacsfiles should have all you need to know.
4. 107 will start printing a deprecation warning for “community_plugin”, but it will still work. (will probably work until HACS is at v1)

[tom_l]

@ludeeus

Do NOT change/rename any folders!

Oops.Thought he meant in the resources section. Sorry.

[jchasey (John Chasey)]

First of all thanks for a fantastic card.

I’m looking to graph boiler status and overlay night/day using a secondary y axis. Can you use multiple state maps where you have two sets of non-numerical (but different) data?

[kalkih (Karl Kihlström)]

Thanks.
No currently not possible, I started working on making state map axis based, so you could have one for the primary axis and one for the secondary, but I’ve not finished the code.
https://github.com/kalkih/mini-graph-card/commit/822d3f529ab76ba58c72916dc3a0041dda8f2a14

[VDRainer]

Sorry if this has already been asked, but i searched this topic and found nothing.
Does anyone know how to adjust the Header to the default core card headers?


I tried the font_size_header, but have absolutely no clue for the padding and (most important) the text color.

type: 'custom:mini-graph-card'
name: Mini Graph Header
font_size_header: 19
entities:
  - sensor.weather_temperature

Thanks in advance!

[olijouve (olivyeah)]

You should look at card-mod for that:

Card-mod - Add css styles to any lovelace card

This is not a custom card. Instead it’s a plugin which changes the way all other cards work How about this? type: entities style: | ha-card { color: red; } entities: - light.bed_light - light.ceiling_lights - light.kitchen_lights [51] Not a custom: in sight. Or this? [mov] (Please click this gif to open it. It seems to be prone to artifacting when compressed) Or how about changing what happens when you click the name or icon in an entities-card? FANTASTIC POST BY ILDAR…

[tom_l]

And submit a feature request.

[VDRainer]

Thanks and sorry that i don’t mentioned card-mod. I already know that, but this is rocket science for me.

[petro]

Using card-mod, adjust the padding on the mini graph header. Gotta find out the control name by using dev tools. You want to make the purple areas match essentially.

[olijouve (olivyeah)]

@VDRainer

Thanks and sorry that i don’t mentioned card-mod. I already know that, but this is rocket science for me.

type: 'custom:mini-graph-card'
name: Mini Graph Header
entities:
  - sensor.weather_temperature
style: |
  ha-card > div:first-child {
    padding: 0px 0px 0px 0px  !important;

  }
  .name > span {
    color: green;
    font-size:22px !important;
  }

[VDRainer]

Thanks so much @olijouve.
One little thing, the white text seems to be grey in the header, but i’m happy for now.

style: |
  ha-card > div:first-child {
    padding: 10px 10px 10px 16px  !important;
  }
  .name > span {
    color: white;
    font-size:22px !important;
  }

[olijouve (olivyeah)]

@VDRainer

One little thing, the white text seems to be grey in the header, but i’m happy for now.

style: |
  ha-card > div:first-child {
    padding: 10px 10px 10px 16px  !important;
  }
  .name > span {
    color: white;
    font-size:22px !important;
    opacity: 1;
  }

[VDRainer]

Magic!
Thanks once again, now i learned and have something to play with.

  .name > span {
    color: white;
    font-size:22px !important;
    opacity: 1 !important;
  }

Works!

[jchasey (John Chasey)]

Thinking further I believe there might be a work around. There was another request to define a specific numeric value to map to in the state map. If this was implemented I could then map different states from the different sensors into the same range.
e.g. A,B,C maps to 1,2,3 and then J and K maps to 1 and 3.

[olijouve (olivyeah)]

@VDRainer

Magic!
Thanks once again, now i learned and have something to play with.

You’re welcome.

[Pirol_62 (Joerg)]

Hi, I have an issue with having 3 sensors in one card

The relation between recovered and confirmed is drawed completely wrong.
Here is my config:

entities:
  - entity: sensor.germany_coronavirus_confirmed
    name: confirmed
  - entity: sensor.germany_coronavirus_recovered
    name: recovered
    y_axis: secondary
  - entity: sensor.germany_coronavirus_deaths
    name: death
hour24: true
hours_to_show: 168
line_width: 2
name: COVID-19 Statistic
points_per_hour: 0.5
schow_icon: false
show:
  icon: false
  labels: true
  labels_secondary: true
  points: false
  state: true
smoothing: true
type: 'custom:mini-graph-card'

Is anything wrong?
When I delete the y_axis option, then the bue line moves to the bottom without showing any change:

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