# Δ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