diff --git a/metric_visualization/README.md b/metric_visualization/README.md new file mode 100644 index 0000000..a7e033d --- /dev/null +++ b/metric_visualization/README.md @@ -0,0 +1,67 @@ +# 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: +```json +[ + { + "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 +1. **Initialisierung** – Beim Laden der Anwendung werden Basis-Layouts und UI-Komponenten aufgebaut. +2. **API-Abruf** – Die Anwendung ruft Analyseergebnisse von `/api/analysis` ab. +3. **Verarbeitung** – Clientseitig werden die Daten für Diagramme und Statistiken umgewandelt. +4. **Visualisierung** – Zeitverläufe und Ausreißer (Δt<0) werden hervorgehoben. +5. **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 + +## Lizenz und Rechte +© 2026 Donau2Space.de – Alle Rechte vorbehalten.