Symcon_Belevo_Energiemanagement_testing/Energy_Pie/module.html

<div style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">

  <!-- Controls -->
  <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
    <label style="display:flex;gap:6px;align-items:center;">
      <span>Zeitraum</span>
      <select id="range">
        <option value="day">Tag</option>
        <option value="week">Woche (Mo–So)</option>
        <option value="month">Monat</option>
        <option value="total">Gesamt</option>
      </select>
    </label>

    <label style="display:flex;gap:6px;align-items:center;">
      <span>Datum</span>
      <input id="date" type="date" />
    </label>

    <button id="prev"  type="button">◀</button>
    <button id="today" type="button">Heute</button>
    <button id="next"  type="button">▶</button>
  </div>

  <div id="period" style="margin-top:10px;font-size:12px;opacity:0.75;"></div>
  <div id="hint" style="margin-top:6px;font-size:12px;opacity:0.8;"></div>

  <!-- 2 Donuts -->
  <div id="grid"
       style="margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
              gap:14px;max-width:880px;">
  </div>
</div>

<script>
  const elRange  = document.getElementById('range');
  const elDate   = document.getElementById('date');
  const elPrev   = document.getElementById('prev');
  const elToday  = document.getElementById('today');
  const elNext   = document.getElementById('next');
  const elPeriod = document.getElementById('period');
  const elHint   = document.getElementById('hint');
  const elGrid   = document.getElementById('grid');

  // Trigger sofort bei Änderung
  elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));

  let dateTimer = null;
  function pushDateNow() {
    if (dateTimer) clearTimeout(dateTimer);
    dateTimer = setTimeout(() => requestAction('SetDate', elDate.value), 80);
  }
  elDate.addEventListener('input',  pushDateNow);
  elDate.addEventListener('change', pushDateNow);

  elPrev.addEventListener('click',  () => requestAction('Prev', 1));
  elToday.addEventListener('click', () => requestAction('Today', 1));
  elNext.addEventListener('click',  () => requestAction('Next', 1));

  function fmtDateTime(d) {
    const yyyy = d.getFullYear();
    const mm = String(d.getMonth() + 1).padStart(2,'0');
    const dd = String(d.getDate()).padStart(2,'0');
    const hh = String(d.getHours()).padStart(2,'0');
    const mi = String(d.getMinutes()).padStart(2,'0');
    return `${dd}.${mm}.${yyyy} ${hh}:${mi}`;
  }

  function escapeHtml(s) {
    return String(s)
      .replaceAll('&','&amp;')
      .replaceAll('<','&lt;')
      .replaceAll('>','&gt;')
      .replaceAll('"','&quot;')
      .replaceAll("'",'&#039;');
  }

  function toNum(x) {
    const n = Number(x);
    return Number.isFinite(n) ? n : 0;
  }

  function clamp01(x) {
    if (!Number.isFinite(x)) return 0;
    if (x < 0) return 0;
    if (x > 1) return 1;
    return x;
  }

  function donutCard({ title, percent, subtitle, color }) {
    // percent: 0..100
    const share = clamp01(percent / 100);

    const r = 56;
    const c = 2 * Math.PI * r;
    const dash = share * c;
    const gap  = c - dash;

    return `
      <div style="border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:14px;
                  display:flex;align-items:center;justify-content:center;min-height:210px;">
        <div style="position:relative;width:170px;height:170px;">
          <svg width="170" height="170" viewBox="0 0 170 170" style="display:block;">
            <!-- track -->
            <circle cx="85" cy="85" r="${r}"
                    fill="none" stroke="rgba(255,255,255,0.10)" stroke-width="18" />
            <!-- arc -->
            <circle cx="85" cy="85" r="${r}"
                    fill="none" stroke="${color}" stroke-width="18"
                    stroke-linecap="butt"
                    stroke-dasharray="${dash} ${gap}"
                    transform="rotate(-90 85 85)" />
          </svg>

          <div style="position:absolute;inset:0;display:flex;flex-direction:column;
                      align-items:center;justify-content:center;text-align:center;">
            <div style="font-weight:800;font-size:18px;line-height:1;">
              ${escapeHtml(percent.toFixed(1))}%
            </div>
            <div style="margin-top:4px;font-size:13px;opacity:0.80;">
              ${escapeHtml(title)}
            </div>
            <div style="margin-top:10px;font-size:12px;opacity:0.65;max-width:140px;">
              ${escapeHtml(subtitle)}
            </div>
          </div>
        </div>
      </div>
    `;
  }

  function render(values, meta) {
    const prod = toNum(values?.Produktion);
    const cons = toNum(values?.Hausverbrauch); // Verbrauch
    const grid = toNum(values?.Netz);          // Netzbezug

    const eigen = cons - grid;                 // Eigenverbrauch
    const eigenClamped = eigen < 0 ? 0 : eigen;

    const evq = (prod > 0) ? (eigenClamped / prod * 100) : 0;
    const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;

    // Hinweise
    if (meta?.hasData === false) {
      elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
    } else {
      elHint.textContent =
        `Produktion: ${prod.toFixed(2)} kWh · Verbrauch: ${cons.toFixed(2)} kWh · Netzbezug: ${grid.toFixed(2)} kWh · Eigenverbrauch: ${eigenClamped.toFixed(2)} kWh`;
    }

    elGrid.innerHTML = [
      donutCard({
        title: 'EVQ',
        percent: clamp01(evq / 100) * 100,
        subtitle: 'Eigenverbrauch / Produktion',
        color: '#63B3FF'   // blau
      }),
      donutCard({
        title: 'Autarkiegrad',
        percent: clamp01(autark / 100) * 100,
        subtitle: 'Eigenverbrauch / Verbrauch',
        color: '#A855F7'   // lila
      })
    ].join('');
  }

  // Symcon -> Tile
  window.handleMessage = function (data) {
    // Symcon liefert manchmal JSON als String
    if (typeof data === 'string') {
      try { data = JSON.parse(data); } catch(e) {}
    }
    if (!data) return;

    // Controls sync
    if (data.range) elRange.value = data.range;
    if (data.date)  elDate.value  = data.date;

    // total: Datum deaktivieren
    const isTotal = (data.range === 'total');
    elDate.disabled = isTotal;

    // Zeitraum-Text
    if (data.tStart && data.tEnd) {
      const s = new Date(data.tStart * 1000);
      const e = new Date(data.tEnd   * 1000);
      elPeriod.textContent = isTotal
        ? 'Zeitraum: Gesamt'
        : `Zeitraum: ${fmtDateTime(s)} – ${fmtDateTime(e)}`;
    } else {
      elPeriod.textContent = '';
    }

    render(data.values || {}, { hasData: data.hasData });
  };

  // initial anstoßen
  setTimeout(() => requestAction('Refresh', 1), 200);
</script>