ShineBridge v1.9.3 — Finanzen-Chart: auf letzte 14 Perioden begrenzt, echt responsiv
- Zeigt nur noch die letzten 14 Balken (statt aller Perioden im Abrechnungsjahr) — genug für einen Trend, ohne dass Labels sich gegenseitig überlappen - SVG jetzt echt responsiv (viewBox + width:100%, Mobile-first dimensioniert) statt fester Pixelbreite mit Scrollbalken — passt sich Handy wie Desktop an - X-Achsen-Labels um -40° gedreht statt horizontal — brauchen dadurch deutlich weniger Platz pro Balken, alle 14 bleiben lesbar Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
retr0
@@ -1,5 +1,5 @@
|
||||
name: ShineBridge
|
||||
version: "1.9.2"
|
||||
version: "1.9.3"
|
||||
slug: shinebridge
|
||||
description: Energiemanagement für Growatt/Goodwe-Wechselrichter — PV-Überschussladen, Wallbox-EMS, Tarifvergleich, Zigbee2MQTT-Überschussgeräte
|
||||
url: https://gitea.bitfire.work/retr0/shinebridge
|
||||
|
||||
@@ -798,11 +798,11 @@ async function loadFinance() {
|
||||
|
||||
// ── SVG-Balkendiagramm ────────────────────────────────────────
|
||||
// Bei langen Abrechnungsjahren nicht jeden einzelnen Tag zeigen — statt 112
|
||||
// Tagesbalken lieber ~16 Wochenbalken, deutlich lesbarer und trotzdem
|
||||
// aussagekräftig für "würde sich Spot lohnen".
|
||||
// Tagesbalken lieber Wochenbalken, und davon nur die letzten 14 (reicht für
|
||||
// einen Trend, bleibt aber lesbar statt endlos zu scrollen).
|
||||
const rawN = days.length;
|
||||
const bucket = rawN > 180 ? 14 : rawN > 21 ? 7 : 1;
|
||||
const periods = bucket === 1 ? days.map(d => ({
|
||||
const allPeriods = bucket === 1 ? days.map(d => ({
|
||||
fixed_eur: d.fixed_eur, spot_eur: d.spot_eur, label: d.date.slice(5),
|
||||
})) : (() => {
|
||||
const out = [];
|
||||
@@ -811,21 +811,24 @@ async function loadFinance() {
|
||||
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}` });
|
||||
out.push({ fixed_eur: fixed, spot_eur: spot, label: chunk[0].date.slice(5) });
|
||||
}
|
||||
return out;
|
||||
})();
|
||||
const MAX_PERIODS = 14;
|
||||
const periods = allPeriods.slice(-MAX_PERIODS);
|
||||
|
||||
// Echtes responsives SVG: viewBox in einer "Mobile-first"-Breite, skaliert per
|
||||
// width:100% frei auf den Container (Handy wie PC) — kein Scrollen mehr nötig,
|
||||
// da wir uns auf max. 14 Balken begrenzen.
|
||||
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 = 380, H = 220, PL = 40, PR = 8, PT = 14, PB = 46;
|
||||
const cW = W - PL - PR;
|
||||
const cH = H - PT - PB;
|
||||
const slot = cW / n;
|
||||
const barW = Math.min(22, Math.max(4, slot * 0.34));
|
||||
const barGap = Math.max(2, slot * 0.06);
|
||||
const barW = Math.max(3, slot * 0.36);
|
||||
const barGap = Math.max(1.5, slot * 0.08);
|
||||
const rBar = Math.min(2.5, barW / 2);
|
||||
|
||||
const allVals = periods.flatMap(d => [d.fixed_eur, d.spot_eur].filter(v => v != null));
|
||||
const maxVal = Math.max(...allVals, 0.01);
|
||||
@@ -835,12 +838,12 @@ async function loadFinance() {
|
||||
for (let i = 0; i <= yTicks; i++) {
|
||||
const v = maxVal * 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="1" stroke-dasharray="2,4"/>`;
|
||||
yLabels += `<text x="${PL-8}" y="${(y+3).toFixed(1)}" text-anchor="end" font-size="10" fill="#8b949e">${fEur(v)}</text>`;
|
||||
gridLines += `<line x1="${PL}" y1="${y.toFixed(1)}" x2="${W-PR}" y2="${y.toFixed(1)}" stroke="${C.grid}" stroke-width="1" stroke-dasharray="2,3"/>`;
|
||||
yLabels += `<text x="${PL-6}" y="${(y+3).toFixed(1)}" text-anchor="end" font-size="9" fill="#8b949e">${fEur(v)}</text>`;
|
||||
}
|
||||
|
||||
const labelStep = Math.max(1, Math.round(50 / slot));
|
||||
const rBar = Math.min(3, barW / 2);
|
||||
// Labels schräg statt horizontal — braucht bei 14 Balken pro Label deutlich
|
||||
// weniger Breite, dadurch bleiben trotz Platzmangel alle 14 lesbar.
|
||||
let bars = '', xLabels = '';
|
||||
periods.forEach((d, i) => {
|
||||
const cx = PL + i * slot + slot / 2;
|
||||
@@ -850,9 +853,8 @@ async function loadFinance() {
|
||||
const hSpot = Math.max(0, cH * d.spot_eur / maxVal);
|
||||
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) {
|
||||
xLabels += `<text x="${cx.toFixed(1)}" y="${H - 6}" text-anchor="middle" font-size="9" fill="#8b949e">${d.label}</text>`;
|
||||
}
|
||||
const ly = H - PB + 12;
|
||||
xLabels += `<text x="${cx.toFixed(1)}" y="${ly}" text-anchor="end" font-size="8.5" fill="#8b949e" transform="rotate(-40 ${cx.toFixed(1)} ${ly})">${d.label}</text>`;
|
||||
});
|
||||
|
||||
const defs = `<defs>
|
||||
@@ -867,6 +869,7 @@ async function loadFinance() {
|
||||
</defs>`;
|
||||
|
||||
const bucketLabel = bucket === 1 ? 'Tag' : bucket === 7 ? 'Woche' : '2 Wochen';
|
||||
const rangeNote = allPeriods.length > MAX_PERIODS ? ` · letzte ${n}` : '';
|
||||
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>
|
||||
@@ -874,12 +877,10 @@ async function loadFinance() {
|
||||
|
||||
const chartSection = `
|
||||
<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 ${bucketLabel}</div>
|
||||
<div style="overflow-x:auto">
|
||||
<svg viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" style="width:${W}px;max-width:none;display:block">
|
||||
<div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:14px">Kosten je ${bucketLabel}${rangeNote}</div>
|
||||
<svg viewBox="0 0 ${W} ${H}" style="width:100%;height:auto;display:block">
|
||||
${defs}${gridLines}${yLabels}${bars}${xLabels}
|
||||
</svg>
|
||||
</div>
|
||||
${legend}
|
||||
</div>`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user