n40_time_measurement/results_visualization

Results Visualization – Zeitmessungs-Dashboard

Überblick

Diese Webanwendung dient zur Visualisierung aggregierter Zeitmessungsdaten, die über die API-Route /results bereitgestellt werden. Ziel ist es, Stabilität und Vergleichbarkeit zwischen verschiedenen Messläufen (Runs) übersichtlich darzustellen.

Das Interface ermöglicht:

• Vergleich von pinned und unpinned Runs
• Filterung nach Run-Typ, Metrik oder Zeitabschnitt
• Anzeige von Kennzahlen wie Latenzmittelwert, Varianz und Stabilitätsindex
• Interaktive Aktualisierung der Diagramme bei Nutzerinteraktion
• Responsive Darstellung auf Desktop- und Tablet-Geräten

---

Architektur

Datenfluss

1. api.js ruft beim Laden die Route /results auf und empfängt aggregierte JSON-Daten.
2. Diese Daten werden an visualization.js übergeben.
3. visualization.js rendert interaktive Diagramme und Kennzahlen in der Hauptansicht.
4. Nutzerinteraktionen (Filter, Vergleich) führen zu einer erneuten Datenabfrage oder Filterung im Client.

API-Nutzung

Route: /results

Methode: GET

Parameter:

• runType – Pflichtparameter (z. B. "pinned", "unpinned")
• metric – Optional (z. B. "latency_mean", "variance")

Antwortstruktur (Beispiel):

[
  {
    "run_id": "abc123",
    "run_type": "pinned",
    "metrics": {
      "latency_mean": 10.5,
      "variance": 0.3,
      "stability_index": 0.98
    }
  }
]

---

Installation & Nutzung

Voraussetzungen

• Moderner Browser (Chrome, Firefox, Safari, Edge)
• Lokaler oder entfernter Webserver mit Zugriff auf /results-Endpoint

Lokale Entwicklung

1. Repository klonen:

   git clone <repository-url>
   cd results_visualization
   

2. Webserver starten (z. B. via VS Code Live Server oder Node.js/Express).
3. Hauptseite im Browser öffnen: index.html

Produktion

• Das Projekt kann als statische Webanwendung bereitgestellt werden.
• Die API muss unter /results erreichbar sein.

---

Benutzeroberfläche

Komponentenübersicht

• Summary Cards: Zeigen aggregierte Kennzahlen an.
• Filtersektion: Auswahl von Run-Typ und Metrik.
• Diagramme: Interaktive Visualisierung mittels visualization.js.

Responsives Verhalten

• Mobile-first Design.
• Zwei-Spalten-Layout ab mittleren Bildschirmgrößen.

---

Sicherheit & Datenschutz

• Es werden keine personenbezogenen Daten verarbeitet.
• Die Anwendung kommuniziert ausschließlich mit /results zur Messdatenabfrage.

---

Lizenz & Copyright

© 2026 Donau2Space.de