Add visualization_tool/README.md

visualization_tool/README.md

@@ -0,0 +1,83 @@
+# Δt<0‑Analyse‑Visualisierung
+
+## Projektbeschreibung
+Dieses Projekt stellt ein webbasiertes Frontend zur Visualisierung der Analyseergebnisse von Δt<0‑Fällen in Near‑Expiry‑Unpinned‑Datenszenarien dar. Ziel ist die übersichtliche Aufbereitung und interaktive Untersuchung der Analyseergebnisse, um kritische Zeitabweichungen sichtbar zu machen und Trends je Run‑Typ zu erkennen.
+
+## Ziel und Funktionsübersicht
+**Ziel:** Visualisierung und interaktive Analyse der Δt‑Ergebnisse.
+
+**Kernfunktionen:**
+- Abruf der Analyseergebnisse über die API‑Route `/results`.
+- Tabellarische Darstellung mit den Feldern: **Δt**, **Status**, **Run‑Typ**.
+- Dynamische farbliche Hervorhebung von Datensätzen mit Δt<0.
+- Interaktive Diagramme zur Verteilung und Entwicklung der Messwerte.
+- Filterung nach Run‑Typ und wählbaren Zeitintervallen.
+- Responsives Layout für Desktop‑ und Mobilgeräte.
+
+## Datenflussübersicht
+1. **Fetch‑Operation:** Beim Laden der Seite wird ein GET‑Request an `/results` ausgeführt.
+2. **Verarbeitung:** Die Antwortdaten werden im JavaScript zu einem strukturierten Objektmodell umgewandelt.
+3. **Darstellung:**
+   - Tabelle listet alle Runs mit relevanten Attributen.
+   - Diagramme visualisieren die zeitliche Entwicklung und Häufigkeit.
+4. **Filterung:** Änderungen durch Nutzereingaben führen zu einer dynamischen Neudarstellung der Datensicht.
+
+## API‑Schnittstelle
+**Endpoint:** `/results`
+
+**Methode:** `GET`
+
+**Erwartete Query‑Parameter:**
+- `filter` — optionaler Filter nach Run‑Typ
+- `time_range` — Zeitintervall für die angefragte Auswertung
+
+**Erwartete Antwort:** Array von Objekten:
+```json
+[
+  {
+    "run_id": "string",
+    "category": "string",
+    "delta_t": "number",
+    "timestamp": "string (ISO)",
+    "status": "string"
+  }
+]
+```
+**Verwendung im Code:**
+- `js/api.js`: führt den Fetch‑Request aus.
+- `js/app.js`: verarbeitet die Daten, rendert Tabelle und Diagramm.
+
+## Strukturübersicht
+```
+📁 visualization_tool
+ ├── index.html
+ ├── css/
+ │    ├── style.css
+ ├── js/
+ │    ├── api.js      → API‑Kommunikation
+ │    ├── app.js      → Steuerung, Rendering, Filterlogik
+ ├── README.md         → Projektdokumentation
+```
+
+## Bedienungsanleitung
+1. Öffne die Weboberfläche im Browser.
+2. Die Übersichtstabelle und die Diagramme werden automatisch mit Daten aus `/results` befüllt.
+3. Verwende die Filteroptionen zur Einschränkung nach **Run‑Typ** oder **Zeitintervallen**.
+4. Farbkennzeichnung:
+   - **Rot / Warnfarbe:** Δt<0 (kritischer Fall)
+   - **Neutral / Blaugrün:** Δt≥0
+5. Änderungen der Filter führen ohne Neuladen zu einer aktualisierten Darstellung.
+
+## Responsives Design & Barrierefreiheit
+- **Layout:** Mobile‑first konzipiert.
+- **Komponenten:** Verwendung semantischer HTML‑Elemente.
+- **Zugänglichkeit:** ARIA‑Labels für dynamische Elemente, ausreichende Farbkontraste.
+
+## Weiterentwicklung
+- Erweiterung der Diagrammtypen (z. B. Histogramm, Trendanalyse).
+- Unterstützung zusätzlicher API‑Filter.
+- Exportfunktionen der Ergebnisse.
+
+---
+
+© 2026 Donau2Space.de