Lovelace: mini graph card

@typxxi The object is right because I tried before with this and it works:

style: |
  ha-card .states.flex .state .state__value.ellipsis{
    color: orange;
  }

Now I just try with the following code, thanks @Ildar_Gabdullin, the 20 change colour but it does not change in orange as it should be based on the values of the sensor.

It displays the value 20 always in green.

       style: |
          ha-card .states.flex .state .state__value.ellipsis{
          {% if state_attr('sensor.ble_moisture_xxxxx', 'median') | int >= 21 %}
            color: orange;
          {% elif state_attr('sensor.ble_moisture_xxxxxx', 'median') | int <= 20 %}
            color: red;
          {% endif %}
            color: green;

What am I doing wrong ? Something with if or elif ?

In your code the final value is always green.
Change it into smth like this as per your intentions:

          {% if state_attr('sensor.ble_moisture_xxxxx', 'median') | int >= 21 %}
            color: orange;
          {% elif state_attr('sensor.ble_moisture_xxxxxx', 'median') | int <= 20 %}
            color: red;
          {% else %}
            color: green;
          {% endif %}

i.e. it is green for values like 20.1, 20.2, … 20.99

1 Like

Yes, this one does work as hoped, great.

How would I get the bold font for it applied cause the following did not work?

font-style: bold;

thx

Any reason the graph isn’t showing when I cast this to my Google Hub?

Above someone had already a similiar cast issue shown which has not been solved.
Look above if that is similiar to your fault cause he had added fotos.

1 Like

Yep, that’s exactly it. :frowning:

@Ildar_Gabdullin Thank you, I write the code as you did and it works.

So if you want to change the value state like 20 and the symbol like % , I share below the entire code :

    cards:
      - type: custom:mini-graph-card
        style: |
          ha-card .states.flex .state .state__value.ellipsis{
          {% if state_attr('sensor.ble_moisture_xxxxx, 'median') | int >= 21 %}
            color: orange;
          {% elif state_attr('sensor.ble_moisture_xxxxxx', 'median') | int <= 20 %}
            color: white;
          {% else %}
            color: green;
          {% endif %}
              }
          ha-card .states.flex .state .state__uom.ellipsis {
          {% if state_attr('sensor.ble_moisture_xxxxx') | int >= 21 %}
            color: orange;
          {% elif state_attr('sensor.ble_moisture_xxxxx', 'median') | int <= 20 %}
            color: white;
          {% else %}
            color: green;
          {% endif %}
              }
        entities:
          - entity: sensor.ble_moisture_xxxxx

Does this code really work ?

I have my doubts cause in the first if line there is a ' missing after sensor …ture_xxxx cause you had started with a '

And in the ellipsis part here
{% if state_attr('sensor.ble_moisture_xxxxx') | int >= 21 %}

the following first if line seems also to miss a part
, 'median'

cause I guess you refer to the median as attribute of the sensor before and therefore it is needed there too. Here it did not work that way, so all others should take care for the 2 lines at least.

You are right, the code is wrong.

1 Like

Here is a code that is working and also adopts the color of title and icon
Some font size and font weight adjustments too.

First how it will look like and then the code which was mostly supported by Ildar_Gabdullin cause I had a lot of troubles to get bold and font size and every tiny change right but he helped with all the expertise needed.
This is just an example and some elements are oversized to show the possible results on first glance. It is a collection of improvements from struggles when for example the colour of the unit did not match that of the value so it needed an additional option to achieve it which you can find in the line that shows opacity.

image

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.ble_humidity_e72e00a350c2
show:
  labels: true
  name_adaptive_color: 'true'
  icon_adaptive_color: 'true'
color_thresholds:
  - value: 63
    color: '#f39c12'
  - value: 64
    color: '#d35400'
  - value: 65
    color: '#c0392b'
style: |
  ha-card .header.flex .name.flex {
    font-weight: 900;
    font-size: 20px;
    opacity: 1;
  }
  ha-card .header.flex .icon {
    color: white;
    --mdc-icon-size: 44px;
  }
  ha-card .states.flex .state .state__value.ellipsis{
    {% if state_attr('sensor.ble_humidity_123456789', 'median') | int >= 64 %}
      color: #d35400;
    {% elif state_attr('sensor.ble_humidity_123456789', 'median') | int <= 65 %} 
      color: #f39c12;
    {% else %}
      color: #c0392b;
    {% endif %}
    font-weight: 500;
    font-size: 60px;
  }
  ha-card .states.flex .state .state__uom.ellipsis {
    {% if state_attr('sensor.ble_humidity_123456789', 'median') | int >= 64 %}
      color: #d35400;
    {% elif state_attr('sensor.ble_humidity_123456789', 'median') | int <= 65 %} 
      color: #f39c12;
    {% else %}
      color: #c0392b;
    {% endif %}
    font-weight: 500;
    font-size: 30px;
    opacity: 1;
  }
name: HUMIDITY WZ - 48 h
hours_to_show: 48
group_by: hourly

Newbies pay attention: do not use colors with those ‘’ like here ‘#c0392b’ in the CSS or style part cause then it will not work. In the style part you have to remove ‘’ and then it will work again. You can also use colour names in both parts like orange, red, green and so on.

Finally there are pieces that do not work or do not always work cause at some point
font-weight: 500;
worked for example for the value but not for the title line where I had played even with
font-weight: 900;

This whole thing is a very powerfull tool and offers great results in a lot of different areas cause I also used this kind of card for showing the weight development provided by scale sensor over 2 weeks where I also needed BMI and kcal shown in that card here with the blue box i have added. And this worked great and might be helpfull for others too. Side note: the last measurment is older than 4 hours and so results disappear and you see a NaN where you would usually see the weight in kg and same for kcal amount and BMI figure.

image

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.ble_weight_mi_scale2
show:
  labels: true
  state: true
  name: false
  icon: false
style: |
  ha-card {
    background-image: url('/local/img/miscale2.jpg');
    background-size: 100% 100%;
  }
  ha-card .states.flex .state .state__value.ellipsis {
    color: white;
    font-style: bold;
    font-size: 60px;
  }
  ha-card .states.flex .state .state__uom.ellipsis {
    color: white;
    font-size: 30px;
    opacity: 1;
  }
  ha-card .states.flex::after {
    color: white;
    font-style: bold;
    font-size: 24px;
    content: "{{ states('sensor.scale_3_basal_metabolism') }} kcal\A   {{states('sensor.scale_2_bmi')}} BMI";
    white-space: pre;
    background-color: rgba(50,50,850,0.9);
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
  }
color_thresholds:
  - value: '102'
    color: lightorange
  - value: '103'
    color: '#f39c12'
  - value: '104'
    color: darkorange
  - value: '105'
    color: orange
  - value: '106'
    color: red
  - value: '107'
    color: darkred
name: GEWICHT - 14 Tage
height: 200
hours_to_show: '336'
line_width: 7
upper_bound: 110
lower_bound: 100

Lot of support from Ildar_Gabdullin therefore I hope someone will benefit from these results / screenshots and examples too. Most of this is not described on github or just partially therefore I added these examples. We use it for weight, kcal, energy and a lot more values cause it is powerfull and flexible as you can see in the scale with background picture.

2 Likes

Sorry,
yes that had been working and now both, value and unit fit colorise perfectly together without any tint we had seen previously, so thanks again:

But here this technique did not work out for the card cause instead of white the title gets greyish tinted again or uses the user accent colours instead but I would of cause like to fix that color to a clean white.
image

I simply added your opacity line advice in this part without any changes but the title line stayed greyish instead of white

  ha-card .header.flex .name.flex {
    color: white;
    font-size: 20px;
    opacity: 1;
  }

which you can find in the beginning of this whole card

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.ble_weight_mi_scale2
show:
  labels: 'true'
  state: 'false'
  name: 'false'
  icon: 'true'
style: |
  ha-card {
    background-image: url('/local/img/miscale2.jpg');
    background-size: 100% 100%;
  }
  ha-card .header.flex .name.flex {
    color: white;
    font-size: 20px;
    opacity: 1;
  }
  ha-card .header.flex .icon {
    color: white;
    --mdc-icon-size: 40px;
  }
  ha-card .states.flex .state .state__value.ellipsis {
    color: white;
    font-style: bold;
    font-size: 60px;
  }
  ha-card .states.flex .state .state__uom.ellipsis {
    color: white;
    font-size: 30px;
    opacity: 1;
  }
  ha-card .states.flex::after {
    color: white;
    font-style: bold;
    font-size: 24px;
    content: "{{ states('sensor.scale_3_basal_metabolism') }} kcal\A   {{states('sensor.scale_2_bmi')}} BMI";
    white-space: pre;
    background-color: rgba(50,50,850,0.9);
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
  }
color_thresholds:
  - value: '102'
    color: '#f39c12'
  - value: '104'
    color: '#d35400'
  - value: '105'
    color: '#c0392b'
name: 'BEST PRACTICE: GEWICHT - 14 T.'
height: 200
hours_to_show: '336'
line_width: 7
upper_bound: 110
lower_bound: 100

Here’s an explanation how to deal with utility meter counter in mini graph card using the group_by: interval feature, which has not been explained so far.

This is an example about monitoring energy consumption with counters created by the utility meter integration which resets the particular 4 sensors every hour, day, week, month once they are created for

  • kWh_hourly
  • kWh_daily
  • kWh_weekly
  • kWh_monthly

ATTENTION: each sensor counts up until the end of its intervall. Then it’ll be resetted to 0
kWh_daily shows you the consumption of each day + current day so far, same for hourly.

Here is a graph of such a kWh_weekly sensor (code follows below) on Sat. 8 pm:
image

  1. You can see steadily growing bars
  2. till the counter will be resetted (end of 7th day) and the next bar will be tiny again, just the consumption of first day of the week.
  3. the marked last bar shows a value of 2.38 kWh which represents the current weekly counter till now, so 5 days and 20 hours right now (8 pm means last 4 hours of saturday + 24 hours of sunday are missing in that 2.38 kWh figure for a full week)

Here is the card and then the key lines you have to take for:

type: 'custom:mini-graph-card'
name: COUCH
smoothing: false
hours_to_show: 336
points_per_hour: 1
line_width: 2
line_color: orange
animate: true
height: 80
entities:
  - sensor.kwh_2_3_weekly
font_size: 70
show:
  graph: bar
  points: true
  icon: false
  labels: true
  name: true
group_by: date
aggregate_func: max
decimals: 3
lower_bound: 0
upper_bound: 3

Now the explanation of the key lines:

  • hours_to_show: 336
    means a 14 day history (14 x 24 h = 336 h)
  • points_per_hour: 1
    means that at the end 1 value will be used for each hour
  • group_by: date
    means that all the hourly values of 1 day will be grouped by date or per day in 1 bar
  • aggregate_func: max: 1
    is the key for a chart based on a counter cause this will force the chart to use ONLY the biggest one of the 24 hourly values of a day which for a counter always is that of the last hour.

With these parameters you’ll get 1 bar for each day that will increase day by day till the end of sunday when that weekly reset will happen as seen above in the consumption that was 2.38 kWh (ATTENTION: weekly counter, not daily) on Saturday 8 pm missing the figures of the 4 hours of Saturday evening and full Sunday.

But I wanted to see only 2 figures for each of the past 2 weeks and NOT 14 daily bars of which only the 2 sunday bars show the consumption of the week.

And here at this point I stumbled a lot and could not really get any further cause I could use the consumption ‘group_by: hour’ which is usefull for an hourly sensor to see hourly bars.
With the ‘group_by: date’ option I got daily bars from the sensors but there is NO SUCH OPTION FOR group_by: WEEK / MONTH

The only further option (beyond group_by: hour / date) called ‘interval’ was not explained on github nor here or somewhere else cause I had searched for ‘group_by: interval’

Below you see the mini graph card we wanted to get: 1 bar for each week
The 2.392 kWh means the weekly consumption of the current week Sat. 8 pm, so the consumption of tonight (4 hours) and sunday are missing.
image

But how do we get these 2 bars instead of the previous 14 bars from the weekly kWh counter shown below?
image

With no such ‘group_by: week’ option we need to use group_by: interval
But how and where is the interval defined ?

Not so easy cause the only definition you can use indirectly is offered in this line
points_per_hour: 1

But 1 point every hour would mean a lot of values where we are looking for what ?
The consumption of 1 week = 7 days = 168 hours

Here it gets tougher cause the only kind of interval figure we want is the 1 week consumption or 1 figure after 168 hours or every 168th hour !
And this ‘kind of interval’ can be assigned indirectly to points_per_hour:

We do not need 1 or more points per hour but every 168 th hour which means in terms of points_per_hours to divide 1 by 168 or 1 / 168.
But unfortunatelly you can not assign it this way: points_per_hour: 1/168
You have to do the calculation 1 / 168 first and put the result into the line:
points_per_hour: 0.00595238095

In total you only have to change these 2 lines in the example code from above
points_per_hour: 0.00595238095
and
group_by: interval

NEXT CHAPTER: MONTHLY FIGURES instead of weekly

If you do not want the weekly figure but the monthly one then you first have to change the sensor from weekly to monthly which in my case would mean for example
- sensor.kwh_0_4_monthly
instead of
- sensor.kwh_0_3_weekly

Then you have to calculate the new intervall by 1 / ( days in this month x 24 h) or for july: 1 / (31 x 24) = 1 / 744 = 0.00134408602
points_per_hour: 0.00134408602

And then there is a final point to adopt cause you want to see the figures of the last few months which means you have to replace hours_to_show: from 336 hours ( past 2 weeks) with 3 months x 744 h or 2.232 hours which has to be changed here
hours_to_show: 2232

Once you have done that you should get 3 bars if you have already recorded the power consumption long enough: 2.232 hours have to be recorded to show 3 monthly figures.

FINAL CHAPTER: DAILY FIGURES OF LAST 2 WEEKS

Just to make it clear: If you’d only like to see the daily consumption instead of the weekly figures mentioned before you would not use the weekly counter sensor but the daily counter sensor or here in my particular case
- sensor.kwh_0_2_daily
instead of
- sensor.kwh_0_3_weekly

After this change the initially code from the top would show you this 14 bar graph of nice daily consumption figures for the last 2 weeks or 336 hours which you can compare with each other easily. If you click on such bar you will see the daily figure.
Now in my case here this 0.321 kWh stands for the consumption of the current day which gives you an orientation about consumption in the days before relatively to today or you hover over an other bar or click on a bar.
image

This could be easier of cause but I guess now it should be a lot easier to adopt the mini graph to show all those energy / water / money counters (bars / lines) and of cause everyone searching for ‘group_by: intervall’ will find a solution

4 Likes

Is it possible to show the last recorded value instead of NaN when a sensor goes down? I have a temperature logger which goes to sleep for 15 minutes after a 15second wakeup. Only during the wakeup the mini graph card shows a numerical value. Am I missing a configuration option?

@typxxi You are right, my mistake I forgot the attribute ‘median’ when I copied it on the forum.

Anyway the code is perfectly working.

I see you code and it is useful to know how to make the value and the text bigger. Thank you for share with us.

Create a template sensor with this logic (pseudo code):

my_new_sensor:
  value_template = 
    if states('sensor.source_sensor') in ['unavailable','unknown']
    states('sensor.my_new_sensor')
    else
    states('sensor.source_sensor')
    endif

Then the new sensor will keep the last valid state if the source sensor becomes unavailable.

Update: DO NOT use this code by a simple copy-paste, change it with according to the right syntax.
This code was only specified to describe a logic.

1 Like

I assumed that this sensors belongs into the configuration.yaml and added this

weight_sensor:
  value_template = 
    if states('sensor.ble_weight_mi_scale2') in ['unavailable','unknown']
    states('sensor.weight_sensor')
    else
    states('sensor.ble_weight_mi_scale2')
    endif

I got this error after restart in log files
Setup failed for weight_sensor: Integration not found.

The genuine Xiaomi Scale sensor ‘sensor.ble_weight_mi_scale2’ is created in a separate sensor file which is bound in via

[configuration.yaml]
bodymiscale: !include components/bodymiscale.yaml

Do I have to add the new state sensor (“weight_sensor”) to the bodymiscale.yaml or what else do I have to change ?

I specially wrote “pseudo code” since it has a wrong syntax.
It was only used to describe a logic.
Use a right syntax.

simply ‘embrace’ it?

   {% if states('sensor.ble_weight_mi_scale2') in ['unavailable','unknown'] %}
     {{states('sensor.weight_sensor')}}
   {% else %}
     {{states('sensor.ble_weight_mi_scale2')}}
   {% endif %}

and @typxxi, don’t use the =, but :

value_template: 

see the legacy template docs or re-write the above in the new template: format

2 Likes


Problems mini graph with header or footer. Need Configuration errors detected:

  • Required key “footer.image” is missing.
  • Required key “footer.entity” is missing.

I would simply avoid to mix all those together cause what you want is visible on the footer I guess, the kWh consumption graph by date , right ?

I have done these the past days that are based on the power metering utility or ingeration that resets the hourly, daily, weekly monthly counters when it is time.

You might try this one out, which will give you a daily graph.
you have to adjust lower and upper bound (kWh s in this case)

type: 'custom:mini-graph-card'
name: 14 days - kWh
smoothing: false
hours_to_show: 240
points_per_hour: 1
line_width: 2
line_color: orange
animate: true
height: 80
entities:
  - sensor.kwh_0_2_daily
font_size: 70
show:
  graph: bar
  points: true
  icon: true
  labels: true
  average: false
group_by: date
aggregate_func: max
decimals: 3
lower_bound: 1
upper_bound: 2

Will give you such graph:
image