From 7ac31ef2a2f4fc3431615cc501ec937e3965ac30 Mon Sep 17 00:00:00 2001
From: "belevo\\mh" <mh@belevo.ch>
Date: Thu, 18 Dec 2025 11:15:11 +0100
Subject: [PATCH] no message

---
 Energy_Pie/module.html | 47 +++++++++++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index 53e7c2a..7c4e9bb 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -146,17 +146,44 @@
       <span class="kv"><b>Netzbezug:</b> ${v.Netz?.toFixed(2)||0} kWh</span>
     `;
 
-    const donut=(t,p,c)=>`
-      <div style="text-align:center">
-        <div style="font-weight:900">${t}</div>
-        <svg width="160" height="160">
-          <circle cx="80" cy="80" r="56" stroke="${c}" stroke-width="18"
-            fill="none"
-            stroke-dasharray="${p/100*351} 351"
-            transform="rotate(-90 80 80)"/>
+const donut = (t, p, c) => {
+  const r = 56;
+  const C = 2 * Math.PI * r;          // Umfang
+  const dash = (Math.max(0, Math.min(100, p)) / 100) * C;
+
+  return `
+    <div style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;">
+      <div style="font-weight:900">${t}</div>
+
+      <div style="position:relative;width:160px;height:160px;">
+        <svg width="160" height="160" viewBox="0 0 160 160">
+          <!-- Rest-Kreis -->
+          <circle cx="80" cy="80" r="${r}"
+                  stroke="rgba(255,255,255,0.18)"
+                  stroke-width="18"
+                  fill="none" />
+
+          <!-- Anteil -->
+          <circle cx="80" cy="80" r="${r}"
+                  stroke="${c}"
+                  stroke-width="18"
+                  fill="none"
+                  stroke-linecap="butt"
+                  stroke-dasharray="${dash} ${C}"
+                  transform="rotate(-90 80 80)"
+                  style="filter: drop-shadow(0 0 12px ${c});" />
         </svg>
-        <div style="font-size:24px;font-weight:900">${p.toFixed(1)}%</div>
-      </div>`;
+
+        <!-- Prozent IN der Mitte -->
+        <div style="position:absolute;inset:0;
+                    display:flex;align-items:center;justify-content:center;
+                    font-size:24px;font-weight:900;">
+          ${p.toFixed(1)}%
+        </div>
+      </div>
+    </div>
+  `;
+};
 
     const prod=v.Produktion||0;
     const cons=v.Hausverbrauch||0;