retr0/Shinebridge
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ShineBridge v1.9.2 — Finanzen-Chart modernisiert: Wochen-/2-Wochen-Aggregation, abgerundete Balken, Verlauf

Browse Source 
Statt bei langen Abrechnungsjahren jeden einzelnen Tag zu zeigen (bei 112 Tagen
unlesbar), aggregiert der Chart jetzt automatisch:
- ≤21 Tage: täglich (wie bisher)
- 22–180 Tage: wöchentlich (~16 Balken bei einem Jahr)
- >180 Tage: 2-wöchentlich

Zusätzlich: abgerundete Balken mit Farbverlauf statt flacher Füllung, echter
Abstand zwischen Festpreis-/Spot-Balkenpaar statt direkt aneinandergrenzender
Hälften, gestrichelte Gridlines, HTML-Legende mit runden Farbchips statt
SVG-Text-Legende.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
retr0
2026-08-25 13:56:32 +02:00
co-authored by Claude Sonnet 5
parent e9168ee72b
commit 722301b1d6
2 changed files with 59 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
haos-addon/config.yaml
+1 -1
View File
@@ -1,5 +1,5 @@
name: ShineBridge name: ShineBridge
version: "1.9.1" version: "1.9.2"
slug: shinebridge slug: shinebridge
description: Energiemanagement für Growatt/Goodwe-Wechselrichter — PV-Überschussladen, Wallbox-EMS, Tarifvergleich, Zigbee2MQTT-Überschussgeräte description: Energiemanagement für Growatt/Goodwe-Wechselrichter — PV-Überschussladen, Wallbox-EMS, Tarifvergleich, Zigbee2MQTT-Überschussgeräte
url: https://gitea.bitfire.work/retr0/shinebridge url: https://gitea.bitfire.work/retr0/shinebridge
haos-addon/src/web/index.html
+58 -28
View File
@@ -797,19 +797,37 @@ async function loadFinance() {
</div>`; </div>`;
// ── SVG-Balkendiagramm ──────────────────────────────────────── // ── SVG-Balkendiagramm ────────────────────────────────────────
// Breite skaliert mit der Anzahl Tage (Mindestplatz pro Tag), statt bei vielen // Bei langen Abrechnungsjahren nicht jeden einzelnen Tag zeigen — statt 112
// Tagen alles in eine feste Breite zu quetschen — sonst werden Balken bei // Tagesbalken lieber ~16 Wochenbalken, deutlich lesbarer und trotzdem
// langen Abrechnungsjahren (>60 Tage) zu Haarlinien und unlesbar. // aussagekräftig für "würde sich Spot lohnen".
const H = 180, PL = 44, PR = 12, PT = 10, PB = 28; const rawN = days.length;
const n = days.length; const bucket = rawN > 180 ? 14 : rawN > 21 ? 7 : 1;
const MIN_SLOT = 10; // px pro Tag (Balkenpaar + Abstand), unterhalb dessen nichts mehr lesbar ist const periods = bucket === 1 ? days.map(d => ({
fixed_eur: d.fixed_eur, spot_eur: d.spot_eur, label: d.date.slice(5),
})) : (() => {
const out = [];
for (let i = 0; i < days.length; i += bucket) {
const chunk = days.slice(i, i + bucket);
const fixed = chunk.reduce((s, d) => s + (d.fixed_eur || 0), 0);
const spotVals = chunk.map(d => d.spot_eur).filter(v => v != null);
const spot = spotVals.length ? spotVals.reduce((a, b) => a + b, 0) : null;
const from = chunk[0].date.slice(5), to = chunk[chunk.length - 1].date.slice(5);
out.push({ fixed_eur: fixed, spot_eur: spot, label: from === to ? from : `${from}–${to}` });
}
return out;
})();
const n = periods.length;
const H = 190, PL = 44, PR = 12, PT = 14, PB = 30;
const MIN_SLOT = 34; // px pro Balkenpaar — bewusst großzügig, jetzt wo wenige Balken übrig sind
const W = Math.max(600, PL + PR + n * MIN_SLOT); const W = Math.max(600, PL + PR + n * MIN_SLOT);
const cW = W - PL - PR; const cW = W - PL - PR;
const cH = H - PT - PB; const cH = H - PT - PB;
const barW = Math.max(3, Math.floor(cW / n) - 2); const slot = cW / n;
const gap = Math.max(1, Math.floor(cW / n) - barW); const barW = Math.min(22, Math.max(4, slot * 0.34));
const barGap = Math.max(2, slot * 0.06);
const allVals = days.flatMap(d => [d.fixed_eur, d.spot_eur].filter(v => v != null)); const allVals = periods.flatMap(d => [d.fixed_eur, d.spot_eur].filter(v => v != null));
const maxVal = Math.max(...allVals, 0.01); const maxVal = Math.max(...allVals, 0.01);
const yTicks = 4; const yTicks = 4;
@@ -817,40 +835,52 @@ async function loadFinance() {
for (let i = 0; i <= yTicks; i++) { for (let i = 0; i <= yTicks; i++) {
const v = maxVal * i / yTicks; const v = maxVal * i / yTicks;
const y = PT + cH - (cH * i / yTicks); const y = PT + cH - (cH * i / yTicks);
gridLines += `<line x1="${PL}" y1="${y.toFixed(1)}" x2="${W-PR}" y2="${y.toFixed(1)}" stroke="${C.grid}" stroke-width="0.5"/>`; gridLines += `<line x1="${PL}" y1="${y.toFixed(1)}" x2="${W-PR}" y2="${y.toFixed(1)}" stroke="${C.grid}" stroke-width="1" stroke-dasharray="2,4"/>`;
yLabels += `<text x="${PL-4}" y="${(y+4).toFixed(1)}" text-anchor="end" font-size="9" fill="#8b949e">${fEur(v)}</text>`; yLabels += `<text x="${PL-8}" y="${(y+3).toFixed(1)}" text-anchor="end" font-size="10" fill="#8b949e">${fEur(v)}</text>`;
} }
// Label-Abstand an der tatsächlichen Balkenbreite ausrichten (~60px pro Label), const labelStep = Math.max(1, Math.round(50 / slot));
// statt pauschal 8 Labels über die ganze — jetzt variable — Breite zu verteilen. const rBar = Math.min(3, barW / 2);
const labelStep = Math.max(1, Math.round(60 / (barW + gap)));
let bars = '', xLabels = ''; let bars = '', xLabels = '';
days.forEach((d, i) => { periods.forEach((d, i) => {
const x0 = PL + i * (barW + gap); const cx = PL + i * slot + slot / 2;
const hFixed = cH * d.fixed_eur / maxVal; const hFixed = Math.max(0, cH * d.fixed_eur / maxVal);
bars += `<rect x="${x0}" y="${(PT + cH - hFixed).toFixed(1)}" width="${barW/2}" height="${hFixed.toFixed(1)}" fill="${C.fixed}" opacity="0.85"/>`; bars += `<rect x="${(cx - barGap/2 - barW).toFixed(1)}" y="${(PT + cH - hFixed).toFixed(1)}" width="${barW.toFixed(1)}" height="${Math.max(hFixed,1).toFixed(1)}" rx="${rBar}" fill="url(#gradFixed)"/>`;
if (d.spot_eur != null) { if (d.spot_eur != null) {
const hSpot = cH * d.spot_eur / maxVal; const hSpot = Math.max(0, cH * d.spot_eur / maxVal);
bars += `<rect x="${x0 + barW/2}" y="${(PT + cH - hSpot).toFixed(1)}" width="${barW/2}" height="${hSpot.toFixed(1)}" fill="${C.spot}" opacity="0.85"/>`; bars += `<rect x="${(cx + barGap/2).toFixed(1)}" y="${(PT + cH - hSpot).toFixed(1)}" width="${barW.toFixed(1)}" height="${Math.max(hSpot,1).toFixed(1)}" rx="${rBar}" fill="url(#gradSpot)"/>`;
} }
if (i % labelStep === 0) { if (i % labelStep === 0) {
const label = d.date.slice(5); xLabels += `<text x="${cx.toFixed(1)}" y="${H - 6}" text-anchor="middle" font-size="9" fill="#8b949e">${d.label}</text>`;
xLabels += `<text x="${(x0 + barW/2).toFixed(1)}" y="${H - 4}" text-anchor="middle" font-size="9" fill="#8b949e">${label}</text>`;
} }
}); });
const legend = `<text x="${PL}" y="${H+18}" font-size="10" fill="${C.fixed}">■ Festpreis</text> const defs = `<defs>
<text x="${PL+70}" y="${H+18}" font-size="10" fill="${C.spot}">■ Spot (hypothetisch)</text>`; <linearGradient id="gradFixed" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="${C.fixed}" stop-opacity="0.95"/>
<stop offset="100%" stop-color="${C.fixed}" stop-opacity="0.55"/>
</linearGradient>
<linearGradient id="gradSpot" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="${C.spot}" stop-opacity="0.95"/>
<stop offset="100%" stop-color="${C.spot}" stop-opacity="0.55"/>
</linearGradient>
</defs>`;
const bucketLabel = bucket === 1 ? 'Tag' : bucket === 7 ? 'Woche' : '2 Wochen';
const legend = `<div style="display:flex;gap:18px;margin-top:10px;font-size:11px;color:var(--text-dim)">
<span style="display:inline-flex;align-items:center;gap:6px"><span style="width:10px;height:10px;border-radius:3px;background:${C.fixed};display:inline-block"></span>Festpreis</span>
<span style="display:inline-flex;align-items:center;gap:6px"><span style="width:10px;height:10px;border-radius:3px;background:${C.spot};display:inline-block"></span>Spot (hypothetisch)</span>
</div>`;
const chartSection = ` const chartSection = `
<div style="border-top:1px solid var(--border);padding-top:24px;margin-top:4px"> <div style="border-top:1px solid var(--border);padding-top:24px;margin-top:4px">
<div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:14px">Kosten je Tag</div> <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:14px">Kosten je ${bucketLabel}</div>
<div style="overflow-x:auto"> <div style="overflow-x:auto">
<svg viewBox="0 0 ${W} ${H+24}" width="${W}" height="${H+24}" style="width:${W}px;max-width:none;display:block"> <svg viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" style="width:${W}px;max-width:none;display:block">
${gridLines}${yLabels}${bars}${xLabels}${legend} ${defs}${gridLines}${yLabels}${bars}${xLabels}
</svg> </svg>
</div> </div>
${n > 60 ? `<div style="font-size:11px;color:var(--text-dim);margin-top:6px">← Horizontal scrollbar, ${n} Tage</div>` : ''} ${legend}
</div>`; </div>`;
el.innerHTML = `<div style="padding:4px 0">${empfehlung}${cards}${chartSection}</div>`; el.innerHTML = `<div style="padding:4px 0">${empfehlung}${cards}${chartSection}</div>`;