ShineBridge v1.9.5 — Finanzen-Chart: Container-Breite gemessen, Periodenanzahl passt sich an statt Balken aufzublasen

Statt die SVG per viewBox unbegrenzt mitwachsen zu lassen (wurde am Desktop
riesig) oder sie bei einer festen max-width zu kappen (ließ rechts Leerraum),
wird jetzt die tatsächliche Container-Breite gemessen und in echten Pixeln
gerendert — Höhe bleibt dabei komplett unabhängig fix.

Zusätzlich: auf breiten Screens werden mehr Wochen gezeigt statt derselben
14 Balken künstlich zu verbreitern (Zielbreite ~24px/Periode, min. 10, max.
28 Perioden) — nutzt den zusätzlichen Platz sinnvoll für mehr Historie statt
für aufgeblähte Einzelbalken.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

haos-addon/config.yaml

@@ -1,5 +1,5 @@
 name: ShineBridge
-version: "1.9.2"
+version: "1.9.5"
 slug: shinebridge
 description: Energiemanagement für Growatt/Goodwe-Wechselrichter — PV-Überschussladen, Wallbox-EMS, Tarifvergleich, Zigbee2MQTT-Überschussgeräte
 url: https://gitea.bitfire.work/retr0/shinebridge

haos-addon/src/web/index.html

@@ -798,11 +798,10 @@ 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.
   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 +810,31 @@ 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 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);
+  // Container-Breite messen und die SVG in echten Pixeln in genau dieser Breite
+  // zeichnen (keine viewBox-Skalierung mehr) — Höhe bleibt dabei fix, unabhängig
+  // von der Breite. Statt auf breiten Screens dieselben 14 Balken künstlich
+  // aufzublasen, wird stattdessen die Anzahl gezeigter Perioden an die Breite
+  // angepasst — mehr Platz zeigt mehr Wochen, bei einer angenehmen Zielbreite
+  // pro Balkenpaar (~46px), nicht überbreite Einzelbalken.
+  const H = 240, PL = 40, PR = 8, PT = 14, PB = 46;
+  const measuredW = el.clientWidth || 380;
+  const W = Math.max(300, measuredW);
   const cW = W - PL - PR;
+  const IDEAL_SLOT = 24;   // px/Periode, entspricht dem Slot, der auf Handy-Breite gut aussah
+  const maxPeriods = Math.min(28, Math.max(10, Math.round(cW / IDEAL_SLOT)));
+  const periods = allPeriods.slice(-maxPeriods);
+
+  const n = periods.length;
   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, Math.min(26, 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 +844,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 +859,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 +875,7 @@ async function loadFinance() {
   </defs>`;
 
   const bucketLabel = bucket === 1 ? 'Tag' : bucket === 7 ? 'Woche' : '2 Wochen';
+  const rangeNote = allPeriods.length > n ? ` · 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 +883,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 width="${W}" height="${H}" style="display:block">
         ${defs}${gridLines}${yLabels}${bars}${xLabels}
       </svg>
-      </div>
       ${legend}
     </div>`;