`energy-distribution` card causes high CPU - moving dots...?

[nagyrobi]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Added the energy-distribution standalone card as described in the manual to my main dashboard page:

type: energy-distribution
link_dashboard: true

I noticed that the usage of my Intel Core i5-4250U CPU went to about 30%. As soon as I removed that card, the CPU usage went down to 3%. The process showing high CPU usage is the one corresponding to the browser displaying the page.

I suspect that this is caused by moving the little dots along the lines. I'd suggest to mitigate this by having an overriding option not to show the moving dots, something like:

animated_dots: false

Describe the behavior you expected

Not to hog the CPU that much for design/visual tasks.

Steps to reproduce the issue

Using Firefox browser (any recent version) in kiosk mode, started with command:

firefox -kiosk 'http://ha.server.address:8123/main-dashboard/my-page'

The device in use is an Intel NUC D54250WYKH with a 250GB SSD, 4GB RAM running Debian with X11 and Firefox in full screen 1920x1080. Intel Graphics 3D acceleration is supported, driver is installed and working fine.

What version of Home Assistant Core has the issue?

2022.9.4, frontend 20220907.2 - latest

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

No response

Which operating system are you using to run this browser?

No response

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[nagyrobi]

Still issue

[timmchugh11]

This is still an issue, the card take a lot of of CPU resources, is there not a more efficient way to render the card, maybe use CSS instead, as it can sometimes grind my browsers to a halt, even with an i7-12700H.

[SonarClouds]

Version: Home Assistant 2023.4.2 Host: Debian 11 on an Intel i5-3470, 16GB RAM, SSD

Clients:

• Desktop AMD Ryzen 3900X 32GB RAM, SSD
• Samsung S7
• Samsung M52
• Dell Venue 11 (Intel M-5Y71), 4GB RAM, SSD

Browsers (tested clean without any addons):

• Firefox
• Chrome

Issues: High CPU load if the energy distribution card is used on the current view. Especially the energy dashboard gets unusable on devices with less CPU power.

Findings:

• On my desktop my friends HA instance energy dashboard only uses <=2% (25% of one core) with a clean Firefox or Chrome browser.
• On my smartphones and the tablet my friends instance is usable with a little stuttering here and there.
• On my desktop my instance uses 4-5% (>50% of one core).
• On my smartphones and the tablet using my instance, the energy dashboard opens and stutters quite a bit. If i try to to switch to another day it basically get's stuck on my smartphones. My Tablet just takes a minute to load the next day.

Suspicion: Could it be an issue with some of my power meters having short update intervals (1s)? I have around 8 sensors updating ~1s, 10 sensors updating ~10s and 6 sensors upating ~60s.

Idea to reproduce: Maybe this is reproducable if you write some template sensors which update every second with generated values and use these in the energy dashboard.

If you cannot reproduce it with the template sensors you can get access to my instance.

[nagyrobi]

Are those templates defined as sensors in HA, or they are just parsed from Lovelace, eg. by secondaryinfo-entity-row?

[SonarClouds]

As actual sensors in HA. What I cannot say is if the amount of sensor data accumulated makes a difference. If I find some free time I might try to setup my ha-dev-instance and see if I can get some more insights.

[SonarClouds]

Here is an example i just used to reproduce the issue. My app or browser on my smarphone and tablet will lag and at some point hang if i browse through days. I hope this helps.

Template sensors:

template:
  sensor:
  - unique_id: Importiert Netz
    name: 'Importiert Netz'
    state: '{{ now().hour*3600+now().minute*60 + now().second }}'
    unit_of_measurement: "kWh"
    device_class: energy
    state_class: total_increasing
    attributes:
        second_counter: "{{ now().second }}"

  - unique_id: Exportiert Netz
    name: 'Exportiert Netz'
    state: '{{ now().hour*3600+now().minute*60 + now().second }}'
    unit_of_measurement: "kWh"
    device_class: energy
    state_class: total_increasing
    attributes:
        second_counter: "{{ now().second }}"
        
  - unique_id: Importiert Netz2
    name: 'Importiert Netz2'
    state: '{{ now().hour*3600+now().minute*60 + now().second }}'
    unit_of_measurement: "kWh"
    device_class: energy
    state_class: total_increasing
    attributes:
        second_counter: "{{ now().second }}"

  - unique_id: Exportiert Netz2
    name: 'Exportiert Netz2'
    state: '{{ now().hour*3600+now().minute*60 + now().second }}'
    unit_of_measurement: "kWh"
    device_class: energy
    state_class: total_increasing
    attributes:
        second_counter: "{{ now().second }}"         

  - unique_id: Importiert Batterie
    name: 'Importiert Batterie'
    state: '{{ now().hour*3600+now().minute*60 + now().second }}'
    unit_of_measurement: "kWh"
    device_class: energy
    state_class: total_increasing
    attributes:
        second_counter: "{{ now().second }}"

  - unique_id: Exportiert Batterie
    name: 'Exportiert Batterie'
    state: '{{ now().hour*3600+now().minute*60 + now().second }}'
    unit_of_measurement: "kWh"
    device_class: energy
    state_class: total_increasing
    attributes:
        second_counter: "{{ now().second }}"         

  - unique_id: Exportiert PV
    name: 'Exportiert PV'
    state: '{{ now().hour*3600+now().minute*60 + now().second }}'
    unit_of_measurement: "kWh"
    device_class: energy
    state_class: total_increasing
    attributes:
        second_counter: "{{ now().second }}"
        
  - unique_id: Exportiert PV2
    name: 'Exportiert PV2'
    state: '{{ now().hour*3600+now().minute*60 + now().second }}'
    unit_of_measurement: "kWh"
    device_class: energy
    state_class: total_increasing
    attributes:
        second_counter: "{{ now().second }}"         

  - unique_id: Exportiert PV3
    name: 'Exportiert PV3'
    state: '{{ now().hour*3600+now().minute*60 + now().second }}'
    unit_of_measurement: "kWh"
    device_class: energy
    state_class: total_increasing
    attributes:
        second_counter: "{{ now().second }}" 

  - unique_id: Exportiert PV4
    name: 'Exportiert PV4'
    state: '{{ now().hour*3600+now().minute*60 + now().second }}'
    unit_of_measurement: "kWh"
    device_class: energy
    state_class: total_increasing
    attributes:
        second_counter: "{{ now().second }}"

Automation to force Update every second:

- id: '1681300590519'
  alias: Trigger Updates
  description: ''
  trigger:
  - platform: time_pattern
    seconds: /1
  condition: []
  action:
  - service: homeassistant.update_entity
    data: {}
    target:
      entity_id:
      - sensor.importiert_netz
      - sensor.exportiert_netz
      - sensor.importiert_netz2
      - sensor.exportiert_netz2
      - sensor.exportiert_batterie
      - sensor.importiert_batterie
      - sensor.exportiert_pv
      - sensor.exportiert_pv2
      - sensor.exportiert_pv3
      - sensor.exportiert_pv4
  mode: single

Energy dashboard:

{
  "version": 1,
  "minor_version": 1,
  "key": "energy",
  "data": {
    "energy_sources": [
      {
        "type": "grid",
        "flow_from": [
          {
            "stat_energy_from": "sensor.importiert_netz",
            "stat_cost": null,
            "entity_energy_price": null,
            "number_energy_price": null
          },
          {
            "stat_energy_from": "sensor.importiert_netz2",
            "stat_cost": null,
            "entity_energy_price": null,
            "number_energy_price": null
          }          
        ],
        "flow_to": [
          {
            "stat_energy_to": "sensor.exportiert_netz",
            "stat_compensation": null,
            "entity_energy_price": null,
            "number_energy_price": null
          },
          {
            "stat_energy_to": "sensor.exportiert_netz2",
            "stat_compensation": null,
            "entity_energy_price": null,
            "number_energy_price": null
          }          
        ],
        "cost_adjustment_day": 0.0
      },
      {
        "type": "battery",
        "stat_energy_from": "sensor.exportiert_batterie",
        "stat_energy_to": "sensor.importiert_batterie"
      },
      {
        "type": "solar",
        "stat_energy_from": "sensor.exportiert_pv",
        "config_entry_solar_forecast": null
      },
      {
        "type": "solar",
        "stat_energy_from": "sensor.exportiert_pv2",
        "config_entry_solar_forecast": null
      },
      {
        "type": "solar",
        "stat_energy_from": "sensor.exportiert_pv3",
        "config_entry_solar_forecast": null
      },
      {
        "type": "solar",
        "stat_energy_from": "sensor.exportiert_pv4",
        "config_entry_solar_forecast": null
      }
    ],
    "device_consumption": [
      {
        "stat_consumption": "sensor.exportiert_netz"
      },
      {
        "stat_consumption": "sensor.importiert_netz"
      },
      {
        "stat_consumption": "sensor.exportiert_netz2"
      },
      {
        "stat_consumption": "sensor.importiert_netz2"
      },
      {
        "stat_consumption": "sensor.exportiert_batterie"
      },
      {
        "stat_consumption": "sensor.importiert_batterie"
      },      
      {
        "stat_consumption": "sensor.exportiert_pv"
      },      
      {
        "stat_consumption": "sensor.exportiert_pv2"
      },      
      {
        "stat_consumption": "sensor.exportiert_pv3"
      },      
      {
        "stat_consumption": "sensor.exportiert_pv4"
      }
    ]
  }
}

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[nagyrobi]

Still an issue.

[SonarClouds]

Absolutely. I cannot use the Energy Dashboard for my HA instance on any of my mobile devices.

[timmchugh11]

I concur, still an issue the SVG animateMotion of the circles still cause high CPU usage.

I found going into the Elements tab in DevTools and deleting the circles fixes the issue.

[wimg]

I can confirm this on an Ubuntu 23.04 with the latest updates and NVidia drivers.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[SonarClouds]

Still an issue....

[karwosts]

I can't think of any solution to actually reduce the cpu usage, for the moment the only thing that comes to mind would be maybe a little discrete pause button that stops the amimation when you click it, maybe the state could be remembered in per-device localStorage.

That kind of makes the card feel pointless though so I hesitate to suggest that. Curious if people would take advantage of such an option if it was available. Would you want to just permanently pause the card to disable all animations?

[nagyrobi]

Yes. I would permanently disable the moving dots. Or maybe try with fewer, slower moving dots. Say, have only one dot move at a time, eg animate it like line by line sequentially.

[The-H23]

same issue here... the card is not usable on low performance devices

[bubonicbob]

This is on a Apple M1 Max taking 100% of a core for this animation. There's gotta be a better way to render this since it doesn't seem to matter how fast/slow the CPU is.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[nagyrobi]

Still there

[Macstar1601]

I have the same problem and have therefore switched from a Raspbery Pi4 to Pi5. Unfortunately, I have only now realized that the problem is on the client side.

[nagyrobi]

A bug that made you spend some money.