🍩 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