Batteriespannungs-Diagramm: feste 170px-Höhe statt aspect-ratio, Y-Achse geklemmt

Die aspect-ratio-Lösung für die volle Spaltenbreite ließ auf großen Bildschirmen
die gesamte Koordinatenfläche mitwachsen - Achsenbeschriftungen (fester font-size
in SVG-Einheiten) wurden dadurch auf ~26px zu groß, das Diagramm unnötig hoch.
Zurück auf eine feste 170px-Höhe: der Y-Maßstab bleibt immer 1:1, nur die
X-Achse dehnt sich auf die volle Breite - normale Schriftgröße, kompaktes
Diagramm, trotzdem volle Spaltenbreite.

bvSkalaY()/y() klemmen jetzt auf [0,1] statt roh zu extrapolieren - ein Punkt
außerhalb von yMin/yMax (z. B. ein Ausreißer auf einer noch nicht aktualisierten
Instanz) zeichnet sich sonst weit außerhalb der Fläche und reißt die Linie über
den Rand hinaus, statt sichtbar am Achsenrand zu liegen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-27 18:33:31 +02:00
parent b8e560e75b
commit cf57c5f1a5
7 changed files with 61 additions and 14 deletions
@@ -1 +1 @@
{"version":"2026.8.27.3","sha256":"b99d93aae2ff58e58107e04f25edfb590e159f55414c11ba4645e82a36f09108","bytes":235508,"gebaut":"2026-08-27T16:01:36Z"}
{"version":"2026.8.27.5","sha256":"8d63b052bdcf4cf2eabd5a01f525fc25c4ab8eea30327dc3b8cbd0db2feb05ed","bytes":235510,"gebaut":"2026-08-27T16:30:48Z"}
@@ -1806,7 +1806,7 @@ function vBatterieverlauf() {
</div>
${genug ? `
<div id="bvChart" style="margin-top:14px;touch-action:none;position:relative">
<svg id="bvSvg" viewBox="0 0 ${BV_W} ${BV_H}" preserveAspectRatio="none" style="width:100%;aspect-ratio:${BV_W}/${BV_H};display:block"></svg>
<svg id="bvSvg" viewBox="0 0 ${BV_W} ${BV_H}" preserveAspectRatio="none" style="width:100%;height:${BV_H}px;display:block"></svg>
</div>
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:10px">
<span class="label" id="bvRange" style="margin-top:0"></span>
@@ -1872,7 +1872,15 @@ function vBatterieliste() {
}
function bvSkalaX(t) { return BV_ML + ((t - bvDomain[0]) / (bvDomain[1] - bvDomain[0])) * (BV_W - BV_ML - BV_MR); }
function bvSkalaY(v, yMin, yMax) { return BV_H - BV_MB - ((v - yMin) / (yMax - yMin)) * (BV_H - BV_MT - BV_MB); }
/* Auf [0,1] geklemmter Anteil statt roher Extrapolation - ein Punkt außerhalb
von yMin/yMax (z. B. ein Ausreißer, der die Plausibilitätsgrenze auf einer
noch nicht aktualisierten Instanz umgangen hat) zeichnet sich sonst weit
außerhalb der sichtbaren Fläche und reißt die Linie unkontrolliert nach
unten/oben aus - geklemmt liegt er sichtbar am oberen/unteren Rand. */
function bvSkalaY(v, yMin, yMax) {
const anteil = Math.max(0, Math.min(1, (v - yMin) / (yMax - yMin)));
return BV_H - BV_MB - anteil * (BV_H - BV_MT - BV_MB);
}
function bvDomainKlemmen(domain) {
let [a, b] = domain;
const volle = bvVollDomain[1] - bvVollDomain[0];
@@ -335,15 +335,16 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
.setup-popup,.sdpopup,.sheet,.beleg-popup{max-width:560px;margin-left:auto;margin-right:auto}
.standortmenu{max-width:640px;margin-left:auto;margin-right:auto}
/* Batteriespannungs-Diagramm ist auf BV_W=320 SVG-Einheiten gezeichnet
(audi-dashboard-app.js), vorher mit fester Hoehe von 170px bei
preserveAspectRatio="none" - bei voller Spaltenbreite (772px
Inhaltsbreite: 860 - 2*44px Seitenrand) zog das Diagramm zu einem extrem
breiten, flachen Band auseinander, gedeckelt mit max-width:400px (macht
es dafuer auf grossen Bildschirmen unnoetig klein). Das SVG traegt jetzt
ein aspect-ratio passend zum viewBox-Verhaeltnis (320/170), wodurch die
Hoehe mit der Breite mitwaechst - das Diagramm darf deshalb die volle
Spaltenbreite nutzen, ohne wieder zu verzerren. */
/* Batteriespannungs-Diagramm: die Hoehe bleibt bewusst bei den festen 170px
aus BV_H (audi-dashboard-app.js), nur die Breite nutzt die volle
Spaltenbreite (772px: 860 - 2*44px Seitenrand). Ein Versuch, die Hoehe per
aspect-ratio mit der Breite mitwachsen zu lassen (~410px bei voller
Spalte), liess auch die SVG-Beschriftungen (fester font-size in
Zeichen-Einheiten) auf ~26px mitwachsen und das Diagramm unnoetig hoch
werden - vom Nutzer als "Zahlen zu gross"/"Hoehe reduzieren" gemeldet.
Bei fester Hoehe bleibt der Y-Massstab immer 1:1 (170 Einheiten = 170px),
also bleiben Beschriftungen normal gross; nur die X-Achse dehnt sich -
genau das breite, flache Band, das der Nutzer hier ausdruecklich wollte. */
}
/* Fahrzeugbild randlos wie in einer Fahrzeug-App: der Platzhalter bleibt