“Real Time” Solar / Energy Dashboard

Filed Under Blog, Home Automation at 7th November 2022 0:01 by

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 , , , , , . 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

    Leave a Reply

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