🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
4937

Some styles for “timeline” history-graph

On December 2022 default colors for icons & “timeline” graphs were changed.
Later users got a possibility to customize colors by defining theme variables (also, in a normal format, not like “234,23,45” which did not allow users to use colors like “green” & “rgb(2,34,45)”).

One of changes was related to using a transparent color for history-graph for “unavailable” values.
Earlier a transparent color was used for periods when an entity did not exist.
On a screenshot from 2022.7.4 the upper entity was not created yet before ~06:05:

изображение
изображение1350×102 4.47 KB

And here is a similar picture from 2023.7 - the upper entity was just created, the 2nd entity is currently unavailable :

изображение
изображение893×92 3.04 KB

Can you see a difference between “not created” & “unavailable” here?

Created an issue on 13.12.22, but it appeared to be a waste of time since I failed to convince people in obvious (imho) things.

What I can do now is using a theme variable (let’s use “cyan” as intuitively “unavailble”):

my_super_theme:
  history-unavailable-color: cyan

which gives us this 100% clear picture:

изображение
изображение886×109 6.26 KB

Here are ways to style graphs locally:

изображение

code 
  - type: history-graph
    entities:
      - binary_sensor.testing_availability
    hours_to_show: 0.15
    show_names: false
  - type: history-graph
    entities:
      - binary_sensor.testing_availability
    hours_to_show: 0.15
    show_names: false
    card_mod:
      style: |
        ha-card {
          --history-unavailable-color: cyan;
        }

BTW, I especially love this puzzle - what is this?

изображение

Correct answer - this is a DEFAULT graph for “unavailable” entity.

For “unknown”:

изображение

code 
  - type: history-graph
    entities:
      - sensor.web_scrape
    hours_to_show: 1
    show_names: false
  - type: history-graph
    entities:
      - sensor.web_scrape
    hours_to_show: 1
    show_names: false
    card_mod:
      style: |
        ha-card {
          --history-unknown-color: pink;
        }

As for other values - a similar method can be used:

    type: history-graph
    entities:
      - entity: ...
    hours_to_show: ...
    card_mod:
      style: |
        ha-card {
          --graph-color-1: red;
          --graph-color-2: orange;
          --graph-color-3: yellow;
          --graph-color-4: green;
          --graph-color-5: lightblue;
          --graph-color-6: blue;
          --graph-color-7: violet;
        }

image
But it will not be persistent - colors depend on an order of occurrence in a timeline.
To get persistent colors - use a custom history-explorer-card:
image

code 
type: vertical-stack
title: state colors
cards:
  - type: entities
    entities:
      - entity: input_select.testing_value
  - type: custom:history-explorer-card
    defaultTimeRange: 5m
    stateColors:
      input_select.testing_value.one: red
      input_select.testing_value.two: orange
      input_select.testing_value.three: yellow
      input_select.testing_value.four: green
      input_select.testing_value.five: lightblue
      input_select.testing_value.six: blue
      input_select.testing_value.seven: violet
    graphs:
      - type: timeline
        entities:
          - entity: input_select.testing_value

Only for some domains & device_classes persistent colors may be defined:

type: history-graph
entities:
  - entity: sun.sun
  - entity: input_boolean.testing_boolean
  - entity: device_tracker.virtual_tracker_1
hours_to_show: 3
card_mod:
  style: |
    ha-card {
      --state-sun-above_horizon-color: red;
      --state-sun-below_horizon-color: green;
      --state-input_boolean-on-color: pink;
      --state-input_boolean-off-color: cyan;
      --state-device_tracker-home-color: magenta;
      --state-device_tracker-not_home-color: orange;
    }

image

4 Likes