🍩 Piotras Energy Donut

Share your Projects! Dashboards & Frontend
, , ,
1

:doughnut: Piotras Energy Donut

An interactive donut chart for energy distribution and percentage-based monitoring — available in three layouts with full visual editor.

Zrzut ekranu (1031)
Zrzut ekranu (1031)987×254 80.4 KB

Zrzut ekranu (1032)
Zrzut ekranu (1032)1017×214 81.5 KB

Zrzut ekranu (1033)
Zrzut ekranu (1033)1018×208 74.7 KB

Zrzut ekranu (1034)
Zrzut ekranu (1034)1017×202 56.2 KB

3 layout modes:

  • Layout 1: Callout Lines — donut with outward callout lines connecting segments to labels, automatic collision avoidance so labels never overlap
  • Layout 2: Legend — donut with a two-sided legend distributed symmetrically left and right of the chart
  • Layout 3: Percentage Gauge — dedicated single-value ring for percentage-based sensors (battery, humidity, tank level). Always-on display with optional comfort zone ring

Key features:

  • Interactive Focus Mode — click any segment or legend item to isolate it; selected segment enlarges while others fade, showing value and percentage in the chart center
  • Auto-reset timer — configurable detail_timeout returns the chart to overview automatically after a click
  • Callout lines toggle — show_lines: false hides lines for a clean look; clicking any segment reveals its line on demand
  • Configurable display limit — show only the top N devices; the rest are automatically grouped into the “Others” segment
  • Comfort Zone Ring — Layout 3 supports an optional outer ring divided into three threshold-based color zones (e.g. cold / comfort / hot)
  • 20-color custom palette — every segment color individually adjustable via c1–c20
  • Fully responsive — SVG scales cleanly to any card width with proportional ring thickness, radius and font sizes

Visual Editor: Full GUI — manage devices, tweak colors and dimensions without YAML.

Also works great for:

  • Live power (W) and current (A) monitoring
  • Battery and percentage-based sensors (layout: 3)
  • Custom units and precision via po_opisie and po_przecinku

:gear: Installation

Method 1: Via HACS (Recommended)

  1. Click the button below to automatically add the repository to your HACS:
Open your Home Assistant instance
  1. Click Add in the pop-up window.
  2. Once the repository page opens, click Download.
  3. After downloading, do a Hard reload of your browser.

Method 2: Manual Installation

  1. Download this repository as a ZIP file and extract it.
  2. Inside your Home Assistant config/www/ directory, create a new folder named piotras-energy-donut.
  3. Copy the compiled files (from dist/ folder)
    into config/www/piotras-energy-donut/.
  4. Go to Settings → Dashboards → Resources.
  5. Click Add Resource and enter:
/local/piotras-energy-donut/piotras-energy-donut-loader.js?v=1.1.0
  • Resource type: JavaScript Module
  1. Hard reload your browser (Ctrl+Shift+R).
3 Likes
Show off your favourite dashboard creations!
2

Release v1.2.0 — What’s New

This update introduces several highly requested features and improves the overall configuration experience, making the card more flexible for dynamic dashboards.

:sparkles: New Features

  • Dynamic Gauge Limits: In Layout 3, max_procent now supports Home Assistant entity IDs. You can now link your gauge’s maximum scale to a sensor (e.g., a daily energy budget or a dynamic threshold).
  • Enhanced Customization:
  • Added name_others: You can now rename the “Others” segment to anything you like (e.g., “Remaining”, “Unmeasured”).
  • Added show_labels: New toggle to hide/show all labels or the legend in Layout 1 and Layout 2 for a cleaner, minimalist look.
  • Power & Current Monitoring: Expanded documentation and internal logic to better support real-time monitoring with Watts (W) and Amperes (A).

:hammer_and_wrench: Visual Editor Improvements

  • Updated Editor UI: The visual editor has been fully adapted to support all new parameters (name_others, show_labels, etc.).
  • Configuration Sync Fix: Fixed an issue where the editor would sometimes lose sync with the card state when settings were not defined in YAML. The editor now correctly reads and reflects all active card data regardless of the storage method.
type: custom:piotras-energy-donut
layout: 3
title: Daily Usage
po_opisie: 'kWh'
max_procent: sensor.daily_energy_budget
po_przecinku: 2
devices:
  - entity: sensor.energy_today
    name: Today

Zrzut ekranu (1268)
Zrzut ekranu (1268)510×301 23.5 KB

type: custom:piotras-energy-donut
layout: 3
title: Power Usage
po_opisie: 'W'
max_procent: sensor.current_power_total_usage
po_przecinku: 0
devices:
  - entity: sensor.current_power_usage
    name: Current Power
3

UPDATE: Now officially available in HACS! :tada:

Great news! Piotras Energy Donut has been officially accepted into the HACS (Home Assistant Community Store) default repository.

What does this mean for you? You no longer need to add it as a "Custom Repository". You can now find, install, and update the card directly through the HACS search:

  1. Open HACS -> Frontend.
  2. Search for "Piotras Energy Donut".
  3. Click on the card and select Download.

A huge thank you to everyone who tested the early versions! The card now includes the full Visual Editor (GUI), so you can easily customize your energy distribution without touching any YAML code.

Enjoy, and let me know if you have any feedback or feature requests!