Metric Visualization – Δt Analysis Frontend

Zweck

Dieses Web-Frontend dient der Darstellung und Auswertung von Zeitreihenanalysen mit Fokus auf Δt<0-Fälle. Es unterstützt Forschende und Analysten darin, Trends, Warnraten und Anomalien interaktiv zu untersuchen.

Hauptziele

Visualisierung von Analyseergebnissen aus dem Backend (/api/analysis)
Interaktive Diagramme für Δt-Zeitverläufe
Hervorhebung und Filterung von Δt<0-Datenpunkten
Anzeige von aggregierten Statistikwerten (Warn- und Unknown-Rates)
Responsives und zugängliches UI-Design für Desktop, Tablet und Mobilgeräte

API-Nutzung

Endpunkt: /api/analysis
Methode: GET
Erwarteter Rückgabewert: Array von Objekten im Format:

[
  {
    "run_id": "string",
    "t_index_visible": "number",
    "t_gate_read": "number",
    "delta_t": "number",
    "warn_rate": "number",
    "unknown_rate": "number"
  }
]

Verwendung:
Die API wird von den Modulen js/api.js (Abruf der Daten) und js/app.js (Darstellung im UI) genutzt.

Verzeichnisstruktur

project-root/
├── index.html
├── css/
│   ├── base.css
│   └── layout.css
├── js/
│   ├── api.js
│   ├── app.js
│   └── charts/
│       └── deltaTChart.js
├── README.md
└── LICENSE

Funktionaler Ablauf

Initialisierung – Beim Laden der Anwendung werden Basis-Layouts und UI-Komponenten aufgebaut.
API-Abruf – Die Anwendung ruft Analyseergebnisse von /api/analysis ab.
Verarbeitung – Clientseitig werden die Daten für Diagramme und Statistiken umgewandelt.
Visualisierung – Zeitverläufe und Ausreißer (Δt<0) werden hervorgehoben.
Interaktion – Nutzer können Datenpunkte selektieren, Tooltips einsehen und Filter anwenden.

Responsives Design

Mobile-first Ansatz
Layouts passen sich an Viewportgrößen ab 640px, 1024px an.
Barrierefreiheit
Nutzung semantischer HTML-Strukturen, ARIA-Attribute und ausreichender Farbkontraste.

Weiterentwicklung

Erweiterung auf zusätzliche Metriken (bspw. Δt>0-Trends)
Exportfunktionen für Daten und Diagramme
Vergleichsansichten zwischen Laufserien

2.3 KiB Raw Blame History Unescape Escape