From cf75341bdbb4738cae865afafc8b048d49d05891 Mon Sep 17 00:00:00 2001 From: Mika Date: Wed, 11 Mar 2026 12:43:09 +0000 Subject: [PATCH] Add max_outlier_visualization/README.md --- max_outlier_visualization/README.md | 104 ++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 max_outlier_visualization/README.md diff --git a/max_outlier_visualization/README.md b/max_outlier_visualization/README.md new file mode 100644 index 0000000..8df829c --- /dev/null +++ b/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 \ No newline at end of file