Zeitraum im Kartenkopf; Verlauf feiner als ein Punkt pro Tag

Zeitraum-Auswahl:
Sie stand ueber dem Diagramm und nahm ihm Hoehe weg. Jetzt sitzt sie klein im
Kartenkopf neben dem Titel - die ganze Kartenhoehe gehoert dem Diagramm. Die
Wahl wird in der Anordnung mitgespeichert, bleibt also nach dem Neuladen
erhalten; ausserhalb des Bearbeitungsmodus geschieht das still im Hintergrund.

Feinere Aufloesung:
Ein Punkt je Tag verbarg, WANN ein- und ausgelagert wurde. Die Abtastrate
richtet sich jetzt nach dem Zeitraum:
  bis  2 Tage  -> stuendlich
  bis 14 Tage  -> alle 6 Stunden
  bis 120 Tage -> taeglich
  darueber     -> woechentlich
So bleibt die Punktzahl immer zwischen etwa 25 und 105 - fein genug zum
Erkennen, grob genug zum Zeichnen. Ein Test haelt diese Spanne fest.

Die Zeitachse traegt entsprechend Uhrzeit statt Datum, wenn stuendlich
abgetastet wird. Punkte heissen jetzt "at" (Zeitpunkt) statt "date".
Zeitstempel aus SQLite kommen ohne Zeitzone zurueck und werden vereinheitlicht,
sonst schluege die Differenzbildung fehl.

Auswahl erweitert: 24 Stunden, 2 Tage, 7, 30, 90 Tage, 6 Monate, 1 Jahr.

Geprueft: "npm run build" laeuft durch. pytest weiterhin nicht ausfuehrbar -
kein Python auf diesem Rechner; die Tests wurden an die neue Aufloesung
angepasst.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-23 10:36:33 +02:00
parent 97a6e94ea1
commit 1fd1e89872
6 changed files with 199 additions and 115 deletions

View File

@@ -554,9 +554,14 @@ td select { width: auto; min-width: 0; max-width: 100%; }
.karten-titel { font-weight: 600; font-size: 0.875rem; }
/* Auswahlfelder in Karten (Zeitraum, Artikel) */
.card-toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.card-toolbar select { margin-top: 0; width: auto; min-width: 0; flex: 1 1 140px; }
select.zeitraum { margin-top: 0; width: auto; min-width: 0; flex: 0 0 auto; align-self: flex-start; }
/* Zeitraum-Auswahl sitzt im Kartenkopf klein und zurueckhaltend, damit sie
die Ueberschrift nicht ueberlagert. */
select.zeitraum {
margin-top: 0; width: auto; min-width: 0; flex: 0 0 auto;
padding: 3px 6px; font-size: 0.78rem;
color: var(--muted); border-color: var(--border);
}
select.zeitraum:hover { color: var(--text); }
/* ---------- Startseite: Kartentypen ---------- */
.card-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }