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 ---
function donutCard({ title, percent, subtitle, color }) {
const share = clamp01(percent / 100);
const r = 56;
const c = 2 * Math.PI * r;
const dash = share * c;
const gap = c - dash;
function donutCard({ title, percent, subtitle, color }) {
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;">
<circle cx="85" cy="85" r="${r}"
fill="none" stroke="rgba(255,255,255,0.10)" 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>
return `
<div style="border:1px solid rgba(255,255,255,0.12);
border-radius:16px;
padding:14px;
min-height:210px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;">
<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>
<!-- Titel oben -->
<div style="font-size:14px;font-weight:700;opacity:.9;">
${escapeHtml(title)}
</div>
<!-- Donut -->
<div style="position:relative;width:170px;height:170px;">
<svg width="170" height="170" viewBox="0 0 170 170">
<circle cx="85" cy="85" r="${r}"
fill="none"
stroke="rgba(255,255,255,0.10)"
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>
`;
}
<!-- Untertitel unten -->
<div style="font-size:12px;opacity:.65;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div>
`;
}
function render(data) {
const values = data?.values || {};
@@ -235,8 +256,6 @@
})
].join('');
elDbg.textContent = `Letzte Daten: ${new Date().toLocaleTimeString()} · range=${data?.range ?? '-'} · date=${data?.date ?? '-'}`;
elErr.textContent = '';
}
// --- cache ---