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

no message

Browse Source
This commit is contained in:
Michael Haas
2025-12-18 06:56:39 +01:00
parent 4335c37d9f
commit fdc23168b3
1 changed files with 63 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Energy_Pie/module.html
+63 -54
View File
@@ -56,21 +56,21 @@
}
/* Nur EIN Layer, statisch */
#wrap::before{
#wrap::before{
content:"";
position:absolute;
inset:-35%;
background:
radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,0.22), transparent 60%),
radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,0.20), transparent 62%),
radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,0.12), transparent 64%),
radial-gradient(700px 560px at 35% 70%, rgba(168,85,247,0.10), transparent 66%),
radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.04), transparent 70%);
filter: blur(24px);
radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,0.42), transparent 60%),
radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,0.38), transparent 62%),
radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,0.26), transparent 64%),
radial-gradient(700px 560px at 35% 70%, rgba(168,85,247,0.22), transparent 66%),
radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.06), transparent 70%);
filter: blur(18px); /* weniger blur = mehr sichtbar */
opacity: 1;
pointer-events:none;
z-index:0;
}
}
/* Content über dem Background */
#wrap > *{
@@ -178,59 +178,68 @@
}
// --- 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; // farbiger Anteil
const rest = c - dash; // Rest (dunkel)
return `
<div style="border:1px solid rgba(255,255,255,0.12);
border-radius:16px;
padding:14px;
min-height:260px;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
background:rgba(0,0,0,0.08);
backdrop-filter: blur(2px);">
return `
<div style="border:1px solid rgba(255,255,255,0.12);
border-radius:16px;
padding:14px;
min-height:260px;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
background:rgba(0,0,0,0.18);
backdrop-filter: blur(6px);">
<div style="font-size:14px;font-weight:700;opacity:.9;">
${escapeHtml(title)}
</div>
<div style="font-size:14px;font-weight:700;opacity:.9;">
${escapeHtml(title)}
</div>
<div style="position:relative;width:180px;height:180px;">
<svg width="180" height="180" viewBox="0 0 180 180">
<circle cx="90" cy="90" r="${r}"
fill="none"
stroke="rgba(255,255,255,0.10)"
stroke-width="18" />
<circle cx="90" cy="90" r="${r}"
fill="none"
stroke="${color}"
stroke-width="18"
stroke-linecap="butt"
stroke-dasharray="${dash} ${gap}"
transform="rotate(-90 90 90)" />
</svg>
<div style="position:relative;width:180px;height:180px;">
<svg width="180" height="180" viewBox="0 0 180 180">
<div style="position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;
font-weight:800;font-size:24px;">
${escapeHtml(percent.toFixed(1))}%
</div>
</div>
<!-- Restsegment -->
<circle cx="90" cy="90" r="${r}"
fill="none"
stroke="rgba(255,255,255,0.20)"
stroke-width="18"
stroke-linecap="butt"
stroke-dasharray="${rest} ${dash}"
stroke-dashoffset="${-dash}"
transform="rotate(-90 90 90)" />
<div style="font-size:12px;opacity:.65;text-align:center;">
${escapeHtml(subtitle)}
<!-- Anteilsegment -->
<circle cx="90" cy="90" r="${r}"
fill="none"
stroke="${color}"
stroke-width="18"
stroke-linecap="butt"
stroke-dasharray="${dash} ${rest}"
transform="rotate(-90 90 90)"
style="filter: drop-shadow(0 0 10px ${color});" />
</svg>
<div style="position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;
font-weight:800;font-size:24px;">
${escapeHtml(percent.toFixed(1))}%
</div>
</div>
`;
}
<div style="font-size:12px;opacity:.65;text-align:center;">
${escapeHtml(subtitle)}
</div>
</div>
`;
}
function render(data) {
const values = data?.values || {};