Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
629

Ok, this might not be down to the graph card as I have just come home from holiday and done all of the following:

  1. upgraded HA (hassio) from 0.94 to 0.95
  2. upgraded CCH from before 1.1.0 to the latest
  3. upgraded HACS (which didn’t recognise all my currently installed custom cards/components unless I installed them again - including mini graph card)

But the symptoms are directly affecting the graph card so this seems like a good place to start.

I am seeing this card redraw itself at ‘random’ intervals of between about 1 and 5 seconds. The underlying sensors are speedtest, download, upload and ping which has a `scan_interval’ of 1 hour.

Chrome browser.

Any ideas? Thanks.

speedtestdotnet:
  scan_interval:
    hours: 1
  monitored_conditions:
    - ping
    - download
    - upload

and here is the relevant Lovelace config…

      - type: vertical-stack
        cards:
          
          - type: custom:vertical-stack-in-card
            cards:

              - type: custom:config-template-card
                entities:
                  - sensor.public_ip_address
                card:
                  type: custom:hui-entities-card
                  title: "${'-- Internet --' + '\xa0'.repeat(22) + '(' + states['sensor.public_ip_address'].state + ')'}"
                  show_header_toggle: false
                  entities:

                    - type: custom:mini-graph-card
                      entities:
                        - entity: sensor.speedtest_download
                          name: Download
                          color: green
                        - entity: sensor.speedtest_upload
                          name: Upload
                          color: red
                      hour24: true
                      points_per_hour: 2
                      height: 100
                      line_width: 3
                      font_size: 75
                      lower_bound: 10
                      show:
                        extrema: true
                        labels: false
      #                    points: true
                        name: false
                        icon: false

                    - type: custom:mini-graph-card
                      entities:
                        - entity: sensor.speedtest_ping
                          name: Ping
                          color: yellow
                      hour24: true
                      points_per_hour: 2
                      height: 50
                      line_width: 3
                      font_size: 75
                      lower_bound: 10
                      upper_bound: 30
                      show:
                        extrema: true
                        labels: false
      #                    points: true
                        name: false
                        icon: false


          - type: horizontal-stack
            cards:
              - type: custom:button-card
                color_type: blank-card

              - type: custom:button-card
                name: Do Speed Test Now
        #          icon: mdi:speedometer
                lock: true
                tap_action:
                  action: call-service
                  service: speedtestdotnet.speedtest
                size: 25%
                color_type: card
                color: rgba(20, 20, 20, 0.4)
                layout: icon_name_state
                styles:
                  lock:
                    - color: red
                  card:
                    - border-radius: 15px
                    - border-style: solid
                    - border-width: 1px
                    - border-color: '#e5e5e5'
                    - white-space: nowrap
                  grid:
                    - grid-template-areas: '"n"'
                    - grid-template-columns: 1fr
630

I recommend breaking down the setup and adding back one card at a time, hard to point out the issue in a nested setup like that.

My first thought… could it be that the custom:config-template-card maybe trigger a re-render of its childs when the hass object is updated?

Edit: You should technically never be able to spot the actual re-render of the graph itself, except for at the initial rendering of the card, which makes me believe the whole card is being rebuilt.

631

Ok, so it’s nothing obvious :wink:
I’ll investigate and let you know if I find the reason…

Thanks for replying.

632

It might sound like quite a stupid question, but, did you cleanup also the resources to not use anymore the old path for each card and use the new instead?

Maybe you’re loading those resources twice?

633

Yes I did.

All my custom cards were installed originally the manual way, then when HACS appeared I migrated them but after the last HACS upgrade which I think was a big one, many of my components and cards were not registered in HACS even though they still worked.

And not a stupid question, thanks for taking the time…

634

I’ve noticed a couple of other cards ‘misbehaving’ now too so I doubt it is anything to do with the graph card.

I need to investigate deeper…

635

The card that are not part of HACS still can be imported manually.
I did notice some issue because a few cards where saying to be added without a “type”, but the type is not (I guess is a bug) js as default, so ensure all the card have type: js even if the docs were saying just to add the “url” bit

636

Hi @kalkih quick question, I’ve tried to read all of this thread but its quite long so I may have missed something!

Is it possible to change the colour of the icon?

I’d like to change the colour of the thermometer depending on the actual temperature (similar to what @SeLLeRoNe is doing with the actual icon (I’ll probably borrow that idea too!)). If not, is it something you’d consider adding, and I will add a request on github.

image

( I’ve used the layout/font sizing of my mini-graph-card as a basis for my UI, so replicated it for button card etc, but that card is so damn configurable (@RomRider has done a tremendous job on it!), I am now missing its features on other cards :slight_smile: )

Thanks in advance!

637

Try using card-mod by Thomas Loven maybe.

638

Yes, you can use the state_adaptive_color option, will make the icon same color as the entity (line) (in your example red), does also work with color thresholds applied to the graph, to have it change color depending on temp.

If you want to change the color independently of the entity color, you’ll have to use something like card-mod as @DavidFW1960 suggested, possibly combined with config-template-card to achieve diff colors depending on state.

1 Like
639

I did already try to play around with icon color, not for the temp but for the battery level of the phone, and after many attempt I did found out that unfortunately, at least for nnow, you cannot change an icon color.

So, if you manage to do it, please do share the code :smiley:
I will surely appreciate :slight_smile:

Thanks

640

Thanks all! I will have a play and see what I can do :+1:

641

Success!

Here you go @SeLLeRoNe - make sure to install Lovelace Card Mod first, then add the following:

style: |
  ha-icon {
    color: [[ if(sensor.xxx_temperature >= 30, "rgb(255, 0, 0);", if(sensor.xxx_temperature >= 22, "rgb(255, 153, 0);", if(sensor.xxx_temperature >= 16, "rgb(255, 204, 102);", "rgb(153, 204, 255);"))) ]]
  }

Adjust values and colours to suit.

I’m also using FontAwesome like you - so I have along with using the different thermometer icons, I have also added fas:termperature-hot and fas:temperature-frigid for the extremes:

image

Hope thats of some use!

1 Like
642

That’s amazing thanks!

Just one note tho, you might want to use the var so that the config is always the same, basically as it is for the icons:

                  style: |
                    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);"))) ]]
                    }
1 Like
643

Thanks @SeLLeRoNe - I’m sure I tried that and it didn’t work, maybe I made a typo?!

644

You are right, it doesn’t.
It did change the color to red so I thought the temperature was in the range but today after a more accurate check I noticed it was setting the first color for all (red)

That’s very unfortuante, using the vars would have been much easier

645

I’m using v0.5 from HACS and I really like the look of the card. I’m using it to show my realtime home energy production/consumption, which means that it can swing between around -4kW to 6kW. I created a sensor that always reports 0 and added it as an entity to display a line at 0 and I change the line color between green and red as it crosses 0.

I would really like to see the graph better reflect signed values, including filling from zero to the value (positive or negative) and not just from the bottom of the graph. Here’s an example where the fill covers the region from the lowest value in the graph to the line, while the more logical choice in my usage would be for the fill to extend from the green line to zero on the y-axis.

22%20PM
22%20PM1008×442 19 KB

As solar production goes down and energy consumption goes up, it becomes more interesting to see how far above 0 the line is, so I’d like the fill to represent the area above zero.

Is there a way to do this with the options the card has today?

646

Having some trouble with a card with multiple graphs. I’ve installed via HACS and it says I have the latest version.

In the first picture the graph names are above the graph - if I do fill: false the names move beneath the graphs. Can I keep them above the graphs?
fillfalse 1

If I hover over the points, whichever graph, it will show in the left state field. Is it possible to make it show in the “corresponding” field? i.e. update the right field if I hover over the pink graph.
pink blue

I read that the card now can open the more-info dialog on both entities. That doesn’t work - it will only open the first entity wherever I click.

647

I am getting an error in the lovelace editor that is driving me nuts!

YAML Error: YAMLException: bad indentation of a sequence entry at line 10, column 14: show_line: false ^

My config:

type: 'custom:mini-graph-card'
name: Allergy Index
icon: 'mdi:tree'
hours_to_show: 72
show:
  points: false
entities:
  - sensor.allergy_index_today
  - sensor.allergy_index_tomorrow 
    show_line: false

line 10 is show_line: false and column 14 is the colon

Any line entered below a dict throws an error, so it appears as if no individual sensor configs can be done. Name, color, show… all of them.

Hass version: 0.96.5 - Docker on Ubuntu

648

Shouldn’t it be:

entities:
  entity: sensor.allergy_index_today
  entity: sensor.allergy_index_tomorrow 
  show_line: false