dh/Symcon_Belevo_Energiemanagement_testing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
belevo\mh
2025-12-17 15:32:48 +01:00
parent c8d5bb3ab4
commit e99c5c0902
1 changed files with 54 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
Energy_Pie/module.html
View File

@@ -144,43 +144,64 @@
} }
// --- donut card --- // --- donut card ---
function donutCard({ title, percent, subtitle, color }) { function donutCard({ title, percent, subtitle, color }) {
const share = clamp01(percent / 100); const share = clamp01(percent / 100);
const r = 56; const r = 56;
const c = 2 * Math.PI * r; const c = 2 * Math.PI * r;
const dash = share * c; const dash = share * c;
const gap = c - dash; const gap = c - dash;
return ` return `
<div style="border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:14px; <div style="border:1px solid rgba(255,255,255,0.12);
display:flex;align-items:center;justify-content:center;min-height:210px;"> border-radius:16px;
<div style="position:relative;width:170px;height:170px;"> padding:14px;
<svg width="170" height="170" viewBox="0 0 170 170" style="display:block;"> min-height:210px;
<circle cx="85" cy="85" r="${r}" display:flex;
fill="none" stroke="rgba(255,255,255,0.10)" stroke-width="18" /> flex-direction:column;
<circle cx="85" cy="85" r="${r}" align-items:center;
fill="none" stroke="${color}" stroke-width="18" justify-content:center;
stroke-linecap="butt" gap:10px;">
stroke-dasharray="${dash} ${gap}"
transform="rotate(-90 85 85)" />
</svg>
<div style="position:absolute;inset:0;display:flex;flex-direction:column; <!-- Titel oben -->
align-items:center;justify-content:center;text-align:center;"> <div style="font-size:14px;font-weight:700;opacity:.9;">
<div style="font-weight:800;font-size:18px;line-height:1;"> ${escapeHtml(title)}
${escapeHtml(percent.toFixed(1))}% </div>
</div>
<div style="margin-top:4px;font-size:13px;opacity:0.80;"> <!-- Donut -->
${escapeHtml(title)} <div style="position:relative;width:170px;height:170px;">
</div> <svg width="170" height="170" viewBox="0 0 170 170">
<div style="margin-top:10px;font-size:12px;opacity:0.65;max-width:140px;"> <circle cx="85" cy="85" r="${r}"
${escapeHtml(subtitle)} fill="none"
</div> stroke="rgba(255,255,255,0.10)"
</div> stroke-width="18" />
<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>
<!-- Prozent im Kreis -->
<div style="position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:22px;">
${escapeHtml(percent.toFixed(1))}%
</div> </div>
</div> </div>
`;
} <!-- Untertitel unten -->
<div style="font-size:12px;opacity:.65;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div>
`;
}
function render(data) { function render(data) {
const values = data?.values || {}; const values = data?.values || {};
@@ -235,8 +256,6 @@
}) })
].join(''); ].join('');
elDbg.textContent = `Letzte Daten: ${new Date().toLocaleTimeString()} · range=${data?.range ?? '-'} · date=${data?.date ?? '-'}`;
elErr.textContent = '';
} }
// --- cache --- // --- cache ---