near_expiry_unpinned_analysis/visualization_tool

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

[
  {
    "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