“Real Time” Solar / Energy Dashboard

Summary

Home Assistant introduced an energy dashboard in 2021.8. Whilst useful and offers a quick setup, it lags an hour behind due to the way it presents data.

So I set out to create my own “real time” dashboard. I say “real time” because my solar reports data back every 10 minutes which I don’t consider “real time” but more “real time” than the hourly Home Assistant energy dashboard.

Pre-requisites

To get the above working, ideally you would have HACS installed to make the following components easier to install.

ApexCharts Card – creates the central graph.
Mini Graph Card – displays appliance power usage.
Mushroom Theme – Creates the rounded corders and overall look and feel.
Swipe Card – Allow cards to respond to swipe gestures.

Dashboard and View

Create a view with the Panel layout with the Mushroom theme. Everything else like name, icon, etc are up to you.

Panel layout only allows a single card but it expands to the full height and width of the page.

Cards

Add a Grid card with 1 column. You can then add a new column / page for each row. In my example there are a total of 4.

Row 1

Add a Horizontal Stack and then add all the gauges you need. This is out of the box feature.

Row 2

Add a Horizontal Stack and then add entity card for each entity/sensor you want to display.

Example:
type: horizontal-stack
cards:
- type: entity
entity: sensor.battery_charge_remaining_hours
name: Battery Run Time
attribute: time_remaining
- type: entity
entity: sensor.time_to_charge_battery
attribute: time_remaining

Row 3

Apex Charts is complicated and powerful.
Top level graph settings are set to show a day and in 24 hours:
type: custom:apexcharts-card
hours_12: false
graph_span: 1d

The top of the graph is set to show the sensor information and coloured in their respective graph colours:
header:
show: true
title: Power Source
show_states: true
colorize_states: true

The default I have set for all series (groups of data / entity data) is to show the highest and lowest value labels:
all_series_config:
show:
extremas: true

Series are the lines drawn on the chart. Most of them have the same settings:
series:
- entity: sensor.all_pv_wattage
name: Solar
type: area
stroke_width: 2
opacity: 0.1
color: blue
yaxis_id: watt
The colour and name will be different for each series.

The load doesn’t have the area filled in and has an increased line width to make it stand out more:
series:
- entity: sensor.load_consumption
name: Load
curve: straight
stroke_width: 3
color: rgb(255, 152, 82)
yaxis_id: watt

The other notable thing are the day and night areas. It converts the state of below_horizon to a value of 1 otherwise it’s 0. This will be used in the y-axis further down.
- entity: sun.sun
transform: 'return x === ''below_horizon'' ? 1 : 0;'
color: grey
type: area
curve: stepline
opacity: 0.2
stroke_width: 0
yaxis_id: timeofday
show:
datalabels: false
in_header: false
extremas: false

The battery charged uses the right y axis so the series is setup slightly differently:
- entity: sensor.state_of_charge
name: Charge
type: area
stroke_width: 2
opacity: 0
color: rgb(128, 128, 128)
yaxis_id: percent
show:
extremas: false

To tie all of this together, needs 3 y axis:

1. kW for most of the kW entities. This is called watt
2. night and day which will not be visible on the graph called timeofday
3. percentage to show the battery charge.
   yaxis:
- id: watt
apex_config:
labels:
show: true
axisBorder:
show: true
axisTicks:
show: true
title:
text: kW
- id: percent
min: 0
max: 100
opposite: true
apex_config:
labels:
show: true
axisBorder:
show: true
axisTicks:
show: true
title:
text: '%'
- id: timeofday
max: 0.1
apex_config:
labels:
show: false
axisBorder:
show: false
axisTicks:
show: false

   Row 4

   Add a Swipe card using multiple horizontal stack cards. You can the swipe the row and it will show each horizontal stack in turn.
   

   To create the appliance cards, please refer to Brunty’s energy post. Once you’ve created one, the rest are pretty much rinse and repeat.

   Here’s an example with 2 cards per swipe:
   type: custom:swipe-card
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.tv_plug_power_meter
- entity: sensor.tv_plug_energy_utility
show_state: true
show_graph: false
name: TV
icon: mdi:television-classic
show:
extrema: true
legend: false
average: true
fill: fade
line_width: 2
lower_bound: 0
min_bound_range: 100
points_per_hour: 6
animate: true
- type: custom:mini-graph-card
entities:
- entity: sensor.dishwasher_power
- entity: sensor.dishwaser_energy_utility
show_state: true
show_graph: false
name: Dishwasher
icon: mdi:dishwasher
show:
extrema: true
legend: false
average: true
fill: fade
line_width: 2
lower_bound: 0
min_bound_range: 100
points_per_hour: 6
animate: true
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.coffee_machine_power_meter
- entity: sensor.coffee_machine_energy_utility
show_state: true
show_graph: false
name: Coffee Machine
icon: mdi:coffee-maker
show:
extrema: true
legend: false
average: true
fill: fade
line_width: 2
lower_bound: 0
min_bound_range: 100
points_per_hour: 6
animate: true
- type: custom:mini-graph-card
entities:
- entity: sensor.kettle_power
- entity: sensor.kettle_energy_daily_utility
show_state: true
show_graph: false
name: Kettle
show:
extrema: true
legend: false
average: true
fill: fade
line_width: 2
lower_bound: 0
min_bound_range: 100
points_per_hour: 6
animate: true

   Summary

   The graph gives a good view of the power source used. It’s definitely not mobile friendly however I hope to gain minute to minute insights since we recently installed solar panels. Next one would be central heating / gas dashboard.

   

   About Danny

   I.T software professional always studying and applying the knowledge gained and one way of doing this is to blog. Danny also has participates in a part time project called Energy@Home [http://code.google.com/p/energyathome/] for monitoring energy usage on a premise. Dedicated to I.T since studying pure Information Technology since the age of 16, Danny Tsang working in the field that he has aimed for since leaving school. View all posts by Danny → This entry was posted in Blog, Home Automation and tagged apexchartjs, Battery, energy, grid, home assistant, solar. Bookmark the permalink.

   5 Responses to “Real Time” Solar / Energy Dashboard

   1. Manu says:

      16 September 2023 at 14:49

      Nice card but realtime my system is going to lag – 16 cpu / 64gb ram
      Is there a option to higher the time of logging?

      Reply
      • Danny says:

        18 September 2023 at 14:13

        I would be very surprised with that spec on the server and / or local machine accessing the dashboard will have performance issue. If it is, I doubt it will be spec related.

        The logging will very much depending on your integration. Sorry I can’t help further.

        Reply

   2. Pingback: Imagine a fusion of Home Assistant and Neurokit 2 – and the world will live as one – PETER GAMMA (Director & Physiologist), MEDITATION RESEARCH INSTITUTE SWITZERLAND (MRIS)

   3. james says:

      10 December 2023 at 0:20

      I am Having A difficult time implementing this, is it possible you can post the entire config in one go [the yaml for the cards setup]? Trying to piece this together is causing me a lot of issues.

      I have 80% working, but perhaps the configuration has been updated and no longer supporting your syntax?

      Reply
      • Danny says:

        10 December 2023 at 17:31

        Hi James,

        Sure: https://gist.github.com/dannytsang/2cab40f1bac7357d13032074cb9881e9

        Reply

   Leave a Reply Cancel reply

   Your email address will not be published. Required fields are marked *.

   Comment *

   All comments must go through an approval and anti-spam process before appearing on the website. Please be patience and do not re-submit your comment if it does not appear.

   Name *

   Email *

   Website

   Δ

   This site uses Akismet to reduce spam. Learn how your comment data is processed.