Add max_outlier_visualization/README.md

max_outlier_visualization/README.md

@@ -0,0 +1,104 @@
+# Max-Outlier Visualisierung
+
+## Überblick
+Die **Max-Outlier-Visualisierungsoberfläche** dient zur Darstellung und Analyse von Ergebnissen aus CI-Parallelitätstests. Sie zeigt statistische Extrema (p95, p99) und Outlier-Tendenzen grafisch und tabellarisch an, um Leistungsabweichungen zwischen Testläufen zu identifizieren.
+
+---
+
+## Zielsetzung
+- Interaktive Ansicht von Max-Outlier-Ergebnissen
+- Filterung nach **Lauf-ID**, **Parallelitätsstufe** oder **Stratum**
+- Visualisierung der **p95/p99-Verteilungen** und Outlier-Tendenzen
+- Export als **CSV** oder **JSON**
+- Automatisches Datenladen über die API `/max-outlier-results`
+- Responsives Layout für Desktop und mobile Nutzung
+
+---
+
+## Datenfluss
+1. Beim Laden der Anwendung wird automatisiert die API `/max-outlier-results` aufgerufen.
+2. Der Rückgabewert ist ein **Array von Analyseobjekten** mit folgenden Feldern:
+   ```json
+   {
+     "run_id": "string",
+     "parallelism": "number",
+     "stratum": "string",
+     "delta_t": "number",
+     "p95": "number",
+     "p99": "number",
+     "retry_status": "string"
+   }
+   ```
+3. Diese Daten werden in einer **Tabelle** und einer **Chart-Komponente** dargestellt.
+4. Filteroptionen und Exporte reagieren dynamisch auf Nutzerinteraktion.
+
+---
+
+## API-Integration
+**Endpunkt:** `/max-outlier-results`
+
+**Methode:** `GET`
+
+**Optionale Parameter:**
+- `run_id` — Filtert nach Lauf-ID
+- `parallelism` — Filtert nach Parallelitätsstufe
+- `stratum` — Filtert nach Stratum
+
+**Beispiel-Antwort:**
+```json
+[
+  {
+    "run_id": "r123",
+    "parallelism": 8,
+    "stratum": "A",
+    "delta_t": 120,
+    "p95": 830,
+    "p99": 1120,
+    "retry_status": "stable"
+  }
+]
+```
+
+**Verwendung im Frontend:**
+- Der Abruf erfolgt über `js/api.js` mittels **fetch()** oder **async/await**.
+- Die Darstellung und Filterung werden durch modulare Komponenten koordiniert.
+
+---
+
+## Ordnerstruktur
+```
+/
+├── index.html
+├── css/
+│   ├── base.css
+│   └── responsive.css
+├── js/
+│   ├── app.js
+│   ├── api.js
+│   ├── table.js
+│   ├── chart.js
+│   └── export.js
+└── README.md
+```
+
+---
+
+## Nutzungsanleitung
+1. Öffne `index.html` im Browser oder lokalem Entwicklungsserver.
+2. Die Anwendung lädt automatisch Daten mittels `/max-outlier-results`.
+3. Verwende die Filterleisten zur Eingrenzung nach Lauf-ID, Parallelität und Stratum.
+4. Navigiere zwischen **Tabelle** und **Diagrammansicht**.
+5. Exportiere aktuelle Ansicht per Button als **CSV oder JSON**.
+
+---
+
+## Entwicklungshinweise
+- Nutze **ES6+** Syntax und modulare JS-Struktur.
+- Verwende defensive Programmierung beim Umgang mit API-Daten.
+- Stelle sicher, dass Responsive Breakpoints richtig greifen.
+- Keine externen Ressourcen oder Logos einbinden.
+
+---
+
+## Lizenz & Copyright
+© 2026 Donau2Space.de