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:
@@ -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"}
|
||||
Binary file not shown.
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user