diff --git a/experiment_results_visualization/README.md b/experiment_results_visualization/README.md new file mode 100644 index 0000000..1564845 --- /dev/null +++ b/experiment_results_visualization/README.md @@ -0,0 +1,68 @@ +# Experiment Results Visualization + +## Zweck + +Dieses Modul stellt ein webbasiertes Dashboard bereit, mit dem die Ergebnisse von Experiment-Runs analysiert und verglichen werden können. Besonderes Augenmerk liegt auf der Gegenüberstellung sogenannter **'pinned'** und **'unpinned'** Runs, um Performance- und Stabilitätsunterschiede sichtbar zu machen. + +## Hauptfunktionen + +- Visualisierung der *pinned* vs *unpinned* Resultate in interaktiven Diagrammen +- Dynamische Filterung und Auswahl einzelner Runs +- Anzeige statistischer Kennzahlen (p95, p99, Korrelationen) +- Vergleichsansicht mit wählbarem kompakten oder breitem Layout +- Automatische Aktualisierung durch regelmäßige API-Abfragen +- Responsive Darstellung für Desktop und Tablet + +## Datenfluss & Architektur + +1. **API-Aufruf:** Das Frontend lädt die Datensätze über den Endpunkt `/results` (GET-Anfrage). +2. **Verarbeitung:** Die empfangenen JSON-Daten enthalten Arrays für `pinned` und `unpinned` Runs. +3. **Darstellung:** JavaScript-Module analysieren die Werte, berechnen Statistiken und visualisieren diese in Diagrammen. +4. **Interaktion:** Nutzer können einzelne Runs filtern, wodurch das Dashboard und die Visualisierungen dynamisch aktualisiert werden. + +## API-Integration + +**Endpunkt:** `/results` +**Methode:** `GET` +**Erwartete Antwort:** + +```json +{ + "pinned": [ ... ], + "unpinned": [ ... ] +} +``` + +**Verwendung in:** `js/api.js` +**Zweck:** Lädt alle Resultate der Experiment-Runs zur Darstellung. + +## Ordnerstruktur + +``` +experiment_results_visualization/ +│ +├── index.html # Einstiegspunkt des Dashboards +├── css/ +│ ├── base.css # Grundlayout und Variablen +│ ├── components.css # Diagramm- und Tabellenstile +│ └── responsive.css # Anpassungen für verschiedene Viewports +│ +├── js/ +│ ├── api.js # Lädt Ergebnisse von der API /results +│ ├── charts.js # Darstellung von Diagrammen für pinned/unpinned Daten +│ ├── filters.js # UI-Logik für Filter und Run-Auswahl +│ └── stats.js # Berechnung von Kennzahlen (p95/p99, Korrelationen) +│ +└── README.md # Projektdokumentation +``` + +## Technische Hinweise + +- Die Anwendung ist vollständig clientseitig aufgebaut und nutzt native ES6-Module. +- Alle Requests an die API erfolgen asynchron (async/await, fetch). +- Keine externen Bibliotheken oder Assets erforderlich. +- Anpassung an unterschiedliche Bildschirmgrößen ist Teil des Kernlayouts. + +## Copyright + +© 2026 Donau2Space.de \ No newline at end of file