Lovelace: Power usage card

cheelio · October 15, 2019, 9:10pm

Having my home filled up with zwave switches and dimmers that all provide energy sensors, I thought it would be nice to have a piechart that would provide insight in the realtime power usage.
Because I already hooked up my (DSMR) energy meter to homeassistant, I could use the total amount of energy consumed as a 100% value so that I can display an ‘unkown’ part in the pie chart.
Here’s the result.

Things that can be improved:

Rendering speed: sometimes it takes a second to display the pie chart. I’m not a front-end guy and don’t know why this takes longer sometimes. Maybe something with the shadow-DOM in relation with the graph-js code. Suggestions are welcome!

You can install the card from HACS and follow instructions on my github.

Usage

Add plugin .js as a module:

- url: /local/lovelace-graph-card.js
  type: module

Add lovelace card to view:

- type: "custom:power-usage-card"                  # Mandatory
  title: "Actueel stroomverbruik"                  # Optional customized title
  total_power_usage: sensor.power_consumption      # Optional total power consumption (DSMR) sensor.
                                                   # If available then other measured values will be 
                                                   # substracted from total to calculate 'unknown' value.
  unknownText: "Onbekend"                          # Optional customized unknown text. Only applicable
                                                   # with total_power_usage option enabled.
  entities:
    - entity: sensor.dimmer_kitchen_power          # One or more entities providing Watt (W) measurements
      name: Keuken                                 # Optional customized name for entity
    - entity: sensor.dimmer_garage_power
      name: Garage
    - entity: sensor.wall_plug_livingroom_left
      name: Huiskamer links
    - entity: sensor.wall_plug_livingroom_tv
      name: Huiskamer TV

sparkydave · October 18, 2019, 5:29am

I’m not seeing this card in HACS… is it still available there somehow?

cheelio · October 18, 2019, 5:18pm

Good point you’ll have to manually add my GitHub as a plug-in repository under HACS -> settings.

fversteegen · October 27, 2019, 7:16am

Have been looking for such a card for ages. Thank you very much for creating it!

Just to check: is this card also able to show power consumption in past 24 hours (if I feed it KwH data)?

cheelio · October 28, 2019, 9:03pm

I guess that won’t work right now. What kind of sensors do you have that provide realtime kWh data?

I think it’s a good idea to create another view to show the current day or last 24 hour totals but I guess that will still be based on (k)W sensors, don’t you think?

fversteegen · October 28, 2019, 9:09pm

Well… Not realtime, but I do have hourly, daily and monthly KwH sensors. Would be great to visualize them in a donut graph.

frozendevl · January 4, 2020, 8:11pm

This is awesome, great job.

Is there any way to sort by largest consumption?

monkey-house · February 13, 2020, 3:20pm

Is anyone making this work? I get errors in frontend: Custom element doesn’t exist: power-usage-card.
I did change the text in resources from:

- url: /local/lovelace-graph-card.js
  type: module

To

- url: /local/lovelace-graph-card.js
  type: module
- url: /local/power-usage-card.js
  type: module

@cheelio: can you confirm this needs to be done?
Here is my code:

      - title: Power Distribution
        entities:
          - entity: sensor.battery_power
            name: Battery
          - entity: sensor.grid_power
            name: Grid
          - entity: sensor.current_yield
            name: Yield
        type: 'custom:power-usage-card'

monkey-house · February 13, 2020, 3:25pm

Also tried this:

      - title: Power Distribution
        total_power_usage: sensor.total_power
        unknownText: 'Unknown'
        entities:
          - entity: sensor.battery_power
            name: Battery
          - entity: sensor.grid_power
            name: Grid
          - entity: sensor.current_yield
            name: Yield
        type: 'custom:power-usage-card'

No luck. This looks like bad code. Please confirm this works…

ksya · February 17, 2020, 7:30pm

It works for me, but I do not see any colors. Am I missing something?

edit: And suddenly there is color!
Loading takes a long time indeed, maybe I get some time in the future to improve

Some things that need improvement:

Colors change
The pie size increases/decreases on hover
Rounding of the “other” category to 1 decimal would be better

catalinbordan · March 29, 2020, 11:18pm

Hello,
can you share how dit you manage to install?
hacs do not alow to add this repository, and like @monkey-house I did not mange it to setup manual. files seems different like in read me info.
thanks

Later edit.
in git hub page you will see another 2 forks. one of this is working to be added in hacs.

mirekmal · April 6, 2020, 2:32pm

Would it be possible to remove dependency from power metering in this card, please? Ability to feed it with any raw data would make it wonderful pie chart graph, that people are begging for! I tried to to feed it with data about consumption of RAM on my ESXi server per VM and it kinda work, though colors are missing, but whole logic seems to work perfectly, including calculation of available memory!

mirekmal · April 6, 2020, 2:52pm

Hmm… interesting… just switched from my work laptop (Windows 10 + Chrome) to my personal computer (Mac + Safari) and it works as expected:

Perhaps the only wish would be to be able to customize colors

Otherwise great work !!!

firstof9 · April 6, 2020, 3:36pm

You’re likely looking for something like this card

mirekmal · April 8, 2020, 10:55am

Thanks @firstof9! This is exactly what I was looking for!

luuk · April 30, 2020, 4:14pm

hey! ik found that card to work nice and cleen to! Now i have a problem with the colors not showing can this be the results of hass having the update? my card is white, when i use the power card i do get colors but only when I hover over the card. Any one have the same problem? i hav W10 and Chrome. and @mirekmal l did you manege to change color of the slices?

cheers Luuk

mirekmal · April 30, 2020, 4:52pm

Same for me, though I have no time to investigate

luuk · May 1, 2020, 10:10am

tnx for the reply! i wil try to have a look this weekend and se if i can find the problem but im not really a coder. I love the card to bad it is not used a lot in the hass community I wil give a update if i can fix it.

luuk · May 1, 2020, 4:59pm

Okay I just worked on it for 4 hours but I think I’m too big a noob. I have read a lot and clicked through but adjusting small things does not work. I can’t go further thought at first it was due to the import of the chart.js but now I have no idea. hopefully someone else can find the problem. when I test with the power card I do have color when I hover above it.

update:
I cleared the power-usage-card.js and then my colors load. I am now looking for color adjustment in general.

ebendl · July 5, 2020, 10:20pm

Why would my “Unknown” show up as “unavailable”? If I hover above it, it actually says “NaN”.

type: 'custom:power-usage-card'
title: Power Usage
total_power_usage: sensor.victron_current_power_usage
unknownText: Unknown
entities:
  - entity: sensor.kitchen_1_power
    name: Upright fridge
  - entity: sensor.ulink_plug_power
    name: Barfridge
  - entity: sensor.freezer_plug_power
    name: Freezer
  - entity: sensor.microwave_power
    name: Microwave
  - entity: sensor.kettle_plug_power
    name: Kettle
  - entity: sensor.dishwasher_power
    name: Dishwasher
  - entity: sensor.washing_machine_power
    name: Washing machine
  - entity: sensor.oven_power
    name: Oven
  - entity: sensor.geyser_power
    name: Geyser
  - entity: sensor.bneta_plug_power
    name: Bneta plug
  - entity: sensor.pow2_power
    name: Eben laptop
  - entity: sensor.laptop_power
    name: ASUS Laptop
  - entity: sensor.borehole_power
    name: Borehole
  - entity: sensor.shelly_1pm_power
    name: TV
  - entity: sensor.back_yard_lights_power
    name: Backyard lights
  - entity: sensor.kitchen_light_power
    name: Kitchen lights
  - entity: sensor.dining_room_lights_power
    name: Dining room lights
  - entity: sensor.tv_room_lights_power
    name: TV Room lights

The sensor sensor.victron_current_power_usage is definitely numerical.

Screenshot 2020-07-06 at 00.17.26

Edit: Ok, actually when I plugged in the other missing device (“BNeta Plug”) the unknown started showing.