Kreisdiagramm Visualisierung hinzugefügt.
Zeigt Eigenvrebrauchsquote und Autarkiergrad an.
This commit is contained in:
belevo\mh
217
Energy_Pie/module.html
Normal file
217
Energy_Pie/module.html
Normal file
@@ -0,0 +1,217 @@
|
||||
<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');
|
||||
|
||||
// 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);
|
||||
|
||||
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 = ''; // fallback: lieber leer als falsch
|
||||
} else {
|
||||
elPeriod.textContent = '';
|
||||
}
|
||||
|
||||
// Keine Daten
|
||||
if(data.hasData === false){
|
||||
elHint.innerHTML = `<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
|
||||
elGrid.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Werte
|
||||
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>
|
||||
<span class="kv"><b>Einspeisung:</b> ${v.Einspeisung?.toFixed(2) || (0)} kWh</span>
|
||||
`;
|
||||
|
||||
const donut = (t, p, c) => {
|
||||
const r = 56;
|
||||
const C = 2 * Math.PI * r;
|
||||
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">
|
||||
<circle cx="80" cy="80" r="${r}"
|
||||
stroke="rgba(255,255,255,0.18)"
|
||||
stroke-width="18"
|
||||
fill="none" />
|
||||
|
||||
<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="position:absolute;inset:0;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-size:24px;font-weight:900;">
|
||||
${Number(p).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
const prod = v.Produktion || 0;
|
||||
const cons = v.Hausverbrauch || 0;
|
||||
const grid = v.Netz || 0;
|
||||
const feed = v.Einspeisung || 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>
|
||||
Reference in New Issue
Block a user