no message

Energy_Pie/module.html

@@ -33,13 +33,6 @@
               gap:14px;">
   </div>
 
-  <div id="explain"
-     style="margin-top:10px;
-            font-size:13px;
-            opacity:.75;
-            line-height:1.4;">
-  </div>
-
   <div id="err" style="margin-top:8px;color:#ffb4b4;font-size:13px;"></div>
 </div>
 
@@ -116,69 +109,59 @@
     return Math.ceil((((d-s)/86400000)+1)/7)+" "+y;
   }
 
-function render(data) {
+function render(data){
-  if (!data) return;
+  if(!data) return;
 
-  // UI-Status
   elRange.value = data.range || 'day';
   elDate.value  = data.date  || '';
+
   elDate.disabled = (data.range === 'total');
 
   // Zeitraum-Anzeige
   if (data.range === 'total') {
+    // ✅ Wunsch: bei Gesamt nix anzeigen
     elPeriod.textContent = '';
   } else if (data.tStart && data.tEnd) {
     const s = new Date(data.tStart * 1000);
     const e = new Date(data.tEnd * 1000 - 1000);
 
-    const pad = n => String(n).padStart(2, '0');
+    if (data.range === 'day')
-    const fmt = d => `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()}`;
-
-    if (data.range === 'day') {
       elPeriod.textContent = `Zeitraum: ${fmt(s)}`;
-    } else if (data.range === 'week') {
+    else if (data.range === 'week')
-      elPeriod.textContent = `Zeitraum: ${fmt(s)} – ${fmt(e)}`;
+      elPeriod.textContent = `Zeitraum: Woche ${isoWeek(s)}`;
-    } else if (data.range === 'month') {
+    else if (data.range === 'month')
-      elPeriod.textContent = `Zeitraum: ${fmt(s)} – ${fmt(e)}`;
+      elPeriod.textContent = `Zeitraum: ${monthName(s.getMonth())} ${s.getFullYear()}`;
-    } else if (data.range === 'year') {
+    else if (data.range === 'year')
-      elPeriod.textContent = `Zeitraum: ${fmt(s)} – ${fmt(e)}`;
+      elPeriod.textContent = `Zeitraum: ${s.getFullYear()}`;
-    }
+    else
+      elPeriod.textContent = ''; // fallback: lieber leer als falsch
+  } else {
+    elPeriod.textContent = '';
   }
 
-  // Keine Daten vorhanden
+  // Keine Daten
-  if (data.hasData === false) {
+  if(data.hasData === false){
-    elHint.innerHTML = `
+    elHint.innerHTML = `<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
-      <b>Letzter Zeitpunkt</b>
-      <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>
-    `;
     elGrid.innerHTML = '';
-    elExplain.innerHTML = '';
     return;
   }
 
   // Werte
   const v = data.values || {};
-  const prod = v.Produktion || 0;
-  const cons = v.Hausverbrauch || 0;
-  const grid = v.Netz || 0;
-  const eigen = Math.max(cons - grid, 0);
-
   elHint.innerHTML = `
-    <span class="kv"><b>Produktion:</b> ${prod.toFixed(2)} kWh</span>
+    <span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2) || 0} kWh</span>
-    <span class="kv"><b>Verbrauch:</b> ${cons.toFixed(2)} kWh</span>
+    <span class="kv"><b>Verbrauch:</b> ${v.Hausverbrauch?.toFixed(2) || 0} kWh</span>
-    <span class="kv"><b>Netzbezug:</b> ${grid.toFixed(2)} kWh</span>
+    <span class="kv"><b>Netzbezug:</b> ${v.Netz?.toFixed(2) || 0} kWh</span>
   `;
 
-  // Donut-Renderer
+  const donut = (t, p, c) => {
-  const donut = (title, percent, color) => {
     const r = 56;
     const C = 2 * Math.PI * r;
-    const p = Math.max(0, Math.min(100, percent));
+    const dash = (Math.max(0, Math.min(100, p)) / 100) * C;
-    const dash = (p / 100) * C;
 
     return `
       <div style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;">
-        <div style="font-weight:900">${title}</div>
+        <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">
@@ -186,55 +169,37 @@ function render(data) {
                     stroke="rgba(255,255,255,0.18)"
                     stroke-width="18"
                     fill="none" />
+
             <circle cx="80" cy="80" r="${r}"
-                    stroke="${color}"
+                    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 ${color});" />
+                    style="filter: drop-shadow(0 0 12px ${c});" />
           </svg>
 
           <div style="position:absolute;inset:0;
                       display:flex;align-items:center;justify-content:center;
                       font-size:24px;font-weight:900;">
-            ${p.toFixed(1)}%
+            ${Number(p).toFixed(1)}%
           </div>
         </div>
       </div>
     `;
   };
 
-  // Donuts einsetzen
+  const prod = v.Produktion || 0;
+  const cons = v.Hausverbrauch || 0;
+  const grid = v.Netz || 0;
+  const eigen = Math.max(cons - grid, 0);
+
   elGrid.innerHTML =
     donut('Eigenverbrauchsquote', prod ? (eigen / prod * 100) : 0, '#63B3FF') +
     donut('Autarkiegrad',        cons ? (eigen / cons * 100) : 0, '#A855F7');
-
-  // Erklärtexte unter den Kreisen
-  elExplain.innerHTML = `
-    <div>
-      <b>Eigenverbrauchsquote:</b>
-      Anteil des selbst erzeugten Stroms, der direkt im eigenen Haushalt verbraucht wird.
-    </div>
-    <div style="margin-top:6px;">
-      <b>Autarkiegrad:</b>
-      Anteil des gesamten Stromverbrauchs, der durch eigene Stromerzeugung gedeckt wird.
-    </div>
-  `;
 }
 
-document.getElementById('explain').innerHTML = `
-  <div>
-    <b>Eigenverbrauchsquote:</b>
-    Anteil des selbst erzeugten Stroms, der direkt im eigenen Haushalt verbraucht wird.
-  </div>
-  <div style="margin-top:6px;">
-    <b>Autarkiegrad:</b>
-    Anteil des gesamten Stromverbrauchs, der durch eigene Stromerzeugung gedeckt wird.
-  </div>
-`;
-
   window.handleMessage = d=>{
     try{if(typeof d==='string')d=JSON.parse(d)}catch{}
     render(d);