Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
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
649

omg… so simple and simply overlooked… the shame

Thank you!

1 Like
650

i am having an issue when trying to add the secondary y-axis.

currently i am just pulling in my energy meter for hte past 24 hours and trying to overlay a "nightmode’ binary sensor to compare day/night visually.

the example shows an input number. must it be so or can in be on/off?

651

I would need your help. I start with HA. I’m trying to understand how custom cards work.
I wanted to install mini-graph-card.
Can you tell me or I’m wrong. I would like to keep the card configurator.

  1. I sent the file mini-graph-card-bundle.js in / config.

  2. I added at the top of the configuration editor the line:

Attractions:
   - type: module
     url: /local/mini-graph-card-bundle.js?v=0.5.0

07
072522×1134 267 KB

3. I created a card and I put the code:

- type: custom: mini-graph-card
   entities:
     - ssensor.processor_use
   show:
     labels: true
   color_thresholds:
     - value: 20
       color: "# f39c12"
     - value: 21
       color: "# d35400"
     - value: 21.5
       color: "# c0392b"

54
542068×878 97.9 KB

it does not work.

652

The .js needs to be in /config/www

653

thank you for the answer.
it’s the same thing

654

The red error box is telling you the problem.

It says that your indentation is off. And it’s telling you exactly where the indentation is off - in line 2.

Look at line 2. You should see how bad the indentation starting there is compared to everything else.

655

sorry but what is indentation?