Lovelace: mini graph card

[Chris1989 (Chris Xanthou)]

Good evening,
I have a problem with an implementation,
I want to record the uptime in hours and minutes of a computer per day.
I use a binary_sensor.chris_pc with Ping (ICMP) integration,
On this, I record when the computer is connected,
I have done this:

    name: Chris PC Daily Uptime
    entity_id: binary_sensor.chris_pc
    state: 'on'
    type: time
    start: '{{ now().replace(hour=0, minute=0, second=0) }}'
    end: '{{ now() }}'

to measure the hours, and then I placed it on the card like this:

But I see that it records it wrong. What I want, I think, is simple,
I want to measure the usage per day to know how many hours the computer was on per day, can it be done?

[zimatcher (John H Hurley)]

Hi, Is there any way to get a action to happen when i click on the actual graph ?
It works clicking on any of the text or icon. but would like it to also work on the graph as I like the clean no points no label look.
want to go to more-info when i click the graph.

[Jarek_P]

How to add different icons to displayed states of entities (marked as red 1 and 2)?

My graph is generally connected to first entity and I’d like to add only numeric value of second one and mark both by icons showing what is there. I tried to look for solution by own, but this thread is too big, sorry.

[KitchenK]

Hi folks, I think there’s either a minor bug with this card, or I’m merely entering my yaml incorrectly!

The following code is only bringing up the more-info window for the sensor (which is shown on the graph) rather than the light entity I’d like it to be:

type: custom:mini-graph-card
entities:
  - entity: sensor.living_room_temperature
    name: Temperature
    show_state: true
    show_points: true
tap_action:
  action: more-info
  entity: light.ceiling_living_room

[KitchenK]

Just following up on this… It transpires that clicking the “Title” at the top of the card opens the tap_action target entity, however, clicking the state that’s displayed opens the original entity. I can’t seem to establish a way to make the state target the other entity too?

[pikim (MK)]

Is it possible to display a graph with e.g. the sum of two entities without a helper?

[Ildar_Gabdullin]

Not possible.

[Ildar_Gabdullin]

I guess only some zones are for this defined “tap_action”:

• red - to show more-info for entities;
• green - no action;
• other - for the defined “tap_action”.

[KitchenK]

Exactly! It feels as if there should be an option to be able to allow the defined tap_action to also point to a custom area when clicked in your “green zone” - even better would be if could click on a specific entity from the “entities” list in your green zone and it direct to a custom tap_action - similar to ApexCharts

[Ildar_Gabdullin]

@KitchenK

able to allow the defined tap_action to also point to a custom area when clicked in your “green zone”

Not good since points on a graph are supposed to be selected by a mouse to show a state.

[rjparana1 (Rjparana)]

I’m trying to add treading arrows that change depending on weither the trend is decreasing or increaseing in place of the icon using the icon_image: option

I’ve already made the automations and the sensors that handle tracking the trend. They work fine.
What I have so far but it results in a broken image.
but icon_image: /local/green_arrow.png works perfectly.
With the added if statements it results in a broken image which when right-clicked on and copy image addressed this is what it gives me http://192.168.1.2:8123/lovelace/%7B%%20if%20is_state('sensor.temperature_trend',%20'increasing')%20%%7D%20%20/local/red_arrow.png%7B%%20elif%20is_state('sensor.temperature_trend',%20'decreasing')%20%%7D%20%20/local/gray_arrow.png%7B%%20else%20%%7D%20%20/local/green_arrow.png%7B%%20endif%20%%7D

Here is my code

  - type: custom:mini-graph-card
    entities:
      - sensor.temperature
    icon_image: |
      {% if is_state('sensor.temperature_trend', 'increasing') %}
        /local/green_arrow.png
      {% elif is_state('sensor.temperature_trend', 'decreasing') %}
        /local/red_arrow.png
      {% else %}
        /local/gray_arrow.png
      {% endif %}
    show:
      labels: false
      labels_secondary: false
    refresh_interval: 0
    color_thresholds:
      - value: 85
        color: '#ff0000'
      - value: 80
        color: '#ffa500'
      - value: 75
        color: '#39FF14'
      - value: 65
        color: '#00ffff'
        line_width: 10
        font_size: 75

[Ildar_Gabdullin]

@rjparana1

icon_image: |

Templates not supported.

@rjparana1

refresh_interval:

There is no such an option.

@rjparana1

        line_width: 10
        font_size: 75

wrong indents

[rjparana1 (Rjparana)]

Templates not supported. Understood

but can icon color be changed with something like:

style: |
ha-icon {
color: [[ if(sensor.temperature_trend = stable, “gray;”, if(sensor.temperature_trend = increasing, “green”, if(sensor.temperature_trend = decreasing, “red”))) ]]
}

[Ildar_Gabdullin]

google about card-mod

[rjparana1 (Rjparana)]

even though not orginally perceived as helpful, you actually did help. thanks sorta.

solution:

card_mod:
style: |
ha-icon {
color: {% if states(‘sensor.temperature_trend’) == ‘stable’ %}
gray;
{% elif states(‘sensor.temperature_trend’) == ‘increasing’ %}
green;
{% elif states(‘sensor.temperature_trend’) == ‘decreasing’ %}
red;
{% endif %}
}

icon changes and color:

card_mod:
style: |
ha-icon {
{% if states(‘sensor.temperature_trend’) == ‘decreasing’ %}
color: red;
–icon-symbol: mdi:arrow-down-bold-outline;
{% elif states(‘sensor.temperature_trend’) == ‘stable’ %}
color: gray;
–icon-symbol: mdi:minus;
{% elif states(‘sensor.temperature_trend’) == ‘increasing’ %}
color: green;
–icon-symbol: mdi:arrow-up-bold-outline;
{% endif %}
}

[rjparana1 (Rjparana)]

@Ildar_Gabdullin

Sorta I do not need such “grateful” words. Next time will not waste my time for you.

I apologize I didnt intend on upsetting you. I did mean it when I said thanks…

[minion1 (Minion)]

Hi, experimenting with this amazing card.
I made this card to monitor voltage on all 3 phases. But I can’t get the color of the voltage to match the color of the line graph. Any help is appreciated. Code is below.

type: custom:mini-graph-card
name: Phase 1
show_state: true
state_adaptive_color: true
entities:
  - sensor.infini_3kw_lhr_voltage
line_width: 3
font_size: 80
hours_to_show: 6
points_per_hour: 60
decimals: 0
hour12: true
color_thresholds:
  - value: 250
    color: red
  - value: 255
    color: white
show:
  extrema: true
  name_adaptive_color: true
  state_adaptive_color: true

[Frosty]

like this ?

will need card_mod

type: custom:mini-graph-card
card_mod:
  style: |
    .states.flex {
      color: var(--red-color);
    }
name: Phase 1
show_state: true
state_adaptive_color: true
entities:
  - sensor.kitchen_temperature
line_width: 3
font_size: 80
hours_to_show: 6
points_per_hour: 60
decimals: 0
hour12: true
color_thresholds:
  - value: 250
    color: var(--red-color)
  - value: 255
    color: white
show:
  extrema: true
  name_adaptive_color: true
  state_adaptive_color: true

[minion1 (Minion)]

Yes that is exactly what I want, but somehow, it’s still not working for me, even after adding the card mod.

[Ildar_Gabdullin]

@minion1

But I can’t get the color of the voltage to match the color of the line graph

This is not supposed to be done by card-mod.
Use a native “state_adaptive_color: true” - what you tried to do but placed the option into a wrong place, it’s an “entity” object.
In fact, many options in your code are misplaced - check Docs.