Symcon_Belevo_Energiemanagement_testing/Energy_Pie/module.html

<div id="wrap" 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</option>
        <option value="month">Monat</option>
        <option value="year">Jahr</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:15px;font-weight:600;"></div>
  <div id="hint"   style="margin-top:6px;font-size:15px;font-weight:700;"></div>

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

  <div id="err" style="margin-top:8px;color:#ffb4b4;font-size:13px;"></div>
</div>

<style>
  @media (max-width:720px){
    #grid{grid-template-columns:1fr}
  }

  #wrap{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    background:#121216;
  }

  #wrap::before{
    content:"";
    position:absolute;
    inset:-35%;
    background:
      radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,.42), transparent 60%),
      radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,.38), transparent 62%),
      radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,.26), transparent 64%);
    filter:blur(18px);
    pointer-events:none;
  }

  #wrap>*{position:relative;z-index:1}

  #hint .kv{margin-right:14px;white-space:nowrap}
  #hint .kv b{font-weight:900}
</style>

<script>
(function(){

  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');
  const elErr    = document.getElementById('err');

  function showErr(e){
    elErr.textContent = e?.message || e;
  }

  function ra(){
    return window.requestAction || window.parent?.requestAction || null;
  }

  function send(id,val){
    const f = ra();
    if(f) try{f(id,val)}catch(e){showErr(e)}
  }

  function fmt(d){
    const p=n=>String(n).padStart(2,'0');
    return `${p(d.getDate())}.${p(d.getMonth()+1)}.${d.getFullYear()}`;
  }

  function monthName(m){
    return ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'][m];
  }

  function isoWeek(d){
    d=new Date(Date.UTC(d.getFullYear(),d.getMonth(),d.getDate()));
    d.setUTCDate(d.getUTCDate()+4-(d.getUTCDay()||7));
    const y=d.getUTCFullYear();
    const s=new Date(Date.UTC(y,0,1));
    return Math.ceil((((d-s)/86400000)+1)/7)+" "+y;
  }

  function render(data){
    if(!data)return;

    elRange.value = data.range || 'day';
    elDate.value  = data.date  || '';

    elDate.disabled = data.range==='total';

    if(data.tStart && data.tEnd){
      const s=new Date(data.tStart*1000);
      const e=new Date(data.tEnd*1000-1000);

      if(data.range==='day')
        elPeriod.textContent=`Zeitraum: ${fmt(s)}`;
      else if(data.range==='week')
        elPeriod.textContent=`Zeitraum: Woche ${isoWeek(s)}`;
      else if(data.range==='month')
        elPeriod.textContent=`Zeitraum: ${monthName(s.getMonth())} ${s.getFullYear()}`;
      else if(data.range==='year')
        elPeriod.textContent=`Zeitraum: ${s.getFullYear()}`;
      else
        elPeriod.textContent='Zeitraum: Gesamt';
    }

    if(data.hasData===false){
      elHint.innerHTML=`<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
      elGrid.innerHTML='';
      return;
    }

    const v=data.values||{};
    elHint.innerHTML=`
      <span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2)||0} kWh</span>
      <span class="kv"><b>Verbrauch:</b> ${v.Hausverbrauch?.toFixed(2)||0} kWh</span>
      <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)"/>
        </svg>
        <div style="font-size:24px;font-weight:900">${p.toFixed(1)}%</div>
      </div>`;

    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');
  }

  window.handleMessage = d=>{
    try{if(typeof d==='string')d=JSON.parse(d)}catch{}
    render(d);
  };

  elRange.onchange = ()=>send('SetRange',elRange.value);
  elDate.onchange  = ()=>send('SetDate',elDate.value);
  elPrev.onclick   = ()=>send('Prev',1);
  elNext.onclick   = ()=>send('Next',1);
  elToday.onclick  = ()=>send('Today',1);

})();
</script>