diff --git a/haos-addon/config.yaml b/haos-addon/config.yaml index d465b82..d87fb8c 100644 --- a/haos-addon/config.yaml +++ b/haos-addon/config.yaml @@ -1,5 +1,5 @@ name: ShineBridge -version: "1.9.4" +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 diff --git a/haos-addon/src/web/index.html b/haos-addon/src/web/index.html index 942e3ae..6efa598 100644 --- a/haos-addon/src/web/index.html +++ b/haos-addon/src/web/index.html @@ -798,8 +798,7 @@ async function loadFinance() { // ── SVG-Balkendiagramm ──────────────────────────────────────── // Bei langen Abrechnungsjahren nicht jeden einzelnen Tag zeigen — statt 112 - // Tagesbalken lieber Wochenbalken, und davon nur die letzten 14 (reicht für - // einen Trend, bleibt aber lesbar statt endlos zu scrollen). + // Tagesbalken lieber Wochenbalken. const rawN = days.length; const bucket = rawN > 180 ? 14 : rawN > 21 ? 7 : 1; const allPeriods = bucket === 1 ? days.map(d => ({ @@ -815,18 +814,25 @@ async function loadFinance() { } 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 W = 380, H = 220, PL = 40, PR = 8, PT = 14, PB = 46; + // 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.max(3, slot * 0.36); + 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); @@ -869,7 +875,7 @@ async function loadFinance() { `; const bucketLabel = bucket === 1 ? 'Tag' : bucket === 7 ? 'Woche' : '2 Wochen'; - const rangeNote = allPeriods.length > MAX_PERIODS ? ` · letzte ${n}` : ''; + const rangeNote = allPeriods.length > n ? ` · letzte ${n}` : ''; const legend = `
Festpreis Spot (hypothetisch) @@ -878,7 +884,7 @@ async function loadFinance() { const chartSection = `
Kosten je ${bucketLabel}${rangeNote}
- + ${defs}${gridLines}${yLabels}${bars}${xLabels} ${legend}