# P99 Spike Analysis Visualization

## Zielsetzung
Dieses Web-Dashboard dient der Visualisierung und Analyse von P99-Spikes innerhalb eines Systems. Es zeigt zeitliche Muster sowie mögliche Zusammenhänge mit Migration-Events, Clocksource-Wechseln und CPU-bezogenen Auffälligkeiten. Ziel ist es, Performance-Ausreißer schnell nachvollziehbar und interaktiv analysierbar zu machen.

## Kernfunktionen
- **Zeitreihen- und Scatter-Plots** zur Visualisierung der Spikedaten
- **Filterfunktionen** nach Event-Typ (Migration, Clocksource-Wechsel, CPU-ID) und Zeitfenster
- **Interaktive Selektion** einzelner Spikes zur Anzeige detaillierter Werte
- **Statistische Kennzahlen** wie Median, P99 und Δ-Tail
- **Responsives Interface** für Desktop und mobile Geräte

## Datenfluss
1. Die Anwendung ruft über den Endpoint `/api/spike_data` die analysierten P99-Spikedaten (JSON) ab.
2. Die Daten werden clientseitig aufbereitet und mithilfe einer Chart-Komponente dargestellt.
3. Benutzer wählen Filter, um die dargestellten Daten einzugrenzen oder neue Requests zu senden.
4. Änderungen werden dynamisch gerendert, ohne die Seite neu zu laden.

## API-Integration
### Endpoint
`GET /api/spike_data`

**Erwartete Parameter:**
- `time_range` – Zeitbereich für die Abfrage
- `event_type` – Typ des Performance-Events (z. B. Migration, Clocksource-Wechsel, CPU)
- `cpu_id` – CPU-Identifikator zur Filterung

**Antwortstruktur:**
```json
[
  {
    "timestamp": 1732830000,
    "type": "migration",
    "cpu": 3,
    "value": 19.2
  }
]
```

Die JavaScript-Logik für den API-Aufruf ist im Modul `js/api.js` implementiert.

## Ordnerstruktur
```
/ (Projektwurzel)
│
├── index.html               # Einstiegspunkt der Anwendung
├── css/
│   └── style.css            # Zentrales Layout und Responsive-Design
├── js/
│   ├── api.js               # Kommunikation mit /api/spike_data
│   ├── charts.js            # Darstellung der Spikedaten mittels Charts
│   └── app.js               # Initialisierung, UI-Logik und Event-Handling
└── README.md                # Projektdokumentation
```

## Nutzung
1. Projektdateien lokal oder auf einem Webserver bereitstellen.
2. Sicherstellen, dass der API-Endpunkt `/api/spike_data` erreichbar ist.
3. `index.html` im Browser öffnen.
4. Über die verfügbaren Filter Datenbereiche oder Eventtypen auswählen.
5. Diagramme und Kennzahlen werden automatisch aktualisiert.

## Technische Hinweise
- Es werden keine Bild- oder Icon-Ressourcen geladen.
- Die Anwendung ist vollständig clientseitig, abgesehen vom API-Request.
- Defensives Error-Handling sorgt für Stabilität auch bei fehlerhaften API-Antworten.

## Lizenz und Rechte
© 2026 Donau2Space.de