no message

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)=>`
+const donut = (t, p, c) => {
-      <div style="text-align:center">
+  const r = 56;
-        <div style="font-weight:900">${t}</div>
+  const C = 2 * Math.PI * r;          // Umfang
-        <svg width="160" height="160">
+  const dash = (Math.max(0, Math.min(100, p)) / 100) * C;
-          <circle cx="80" cy="80" r="56" stroke="${c}" stroke-width="18"
+
-            fill="none"
+  return `
-            stroke-dasharray="${p/100*351} 351"
+    <div style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;">
-            transform="rotate(-90 80 80)"/>
+      <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;