# Spike Visualizer

## Übersicht
Der **Spike Visualizer** ist eine Weboberfläche zur interaktiven Analyse von CPU-Spikes, die aus Scheduler-Events und CPU-Migrationen abgeleitet wurden. Ziel ist es, Muster und Ausreißer in den Spike-Daten grafisch zu erkennen und mit Metriken wie *reorder_score* und *publish_rate* zu untersuchen.

## Ziel
Darstellung und Exploration klassifizierter CPU-Spikes durch eine interaktive Zeitleiste. Benutzer können Filter anwenden, Metriken untersuchen und Migrationen sichtbar machen, um Systemverhalten im Zeitverlauf zu verstehen.

## Kernfunktionen
- Interaktive Zeitleiste mit CPU-Spikes
- Filtermöglichkeiten nach CPU-ID, reorder_score und Zeitfenster
- Tooltip mit Eventdetails (publish_rate, reorder_score)
- Optionale Einblendung von Migrationen und Eventtypen
- Dynamisches Nachladen der Spike-Daten via API (`/api/spikes`)
- Zusammenfassung der wichtigsten Metriken oberhalb der Grafik
- Responsives Layout mit anpassbarer Diagrammansicht

## Datenfluss
1. Beim Laden der Seite ruft das Frontend per `GET /api/spikes` Spike-Daten als JSON ab.
2. Die Daten werden clientseitig nach CPU, Zeit und reorder_score gefiltert.
3. D3.js visualisiert die Daten als Timeline oder Scatterplot.
4. Benutzerinteraktionen (Filteränderung, Mouseover) aktualisieren Diagramm und Metriken in Echtzeit.

## API-Nutzung
### Route: `/api/spikes`
- **Methode:** `GET`
- **Zweck:** Abrufen der klassifizierten CPU-Spike-Daten
- **Optionale Parameter:**
  - `cpu_id`
  - `start_time`
  - `end_time`
- **Erwartete Antwort:**
  ```json
  [
    {
      "id": 12,
      "cpu_id": 0,
      "timestamp": 1738393200,
      "reorder_score": 0.86,
      "publish_rate": 52.7,
      "migration_flag": true
    }
  ]
  ```

## Ordnerstruktur
```
spike_visualizer/
│
├── index.html              # Einstiegspunkt der Web-App
├── css/
│   └── style.css           # Layout und Farbdefinition
├── js/
│   ├── app.js              # Initialisierung und Visualisierung
│   ├── api.js              # Schnittstelle zu /api/spikes
│   └── filters.js          # Filterlogik und UI-Events
└── README.md               # Diese Dokumentation
```

## Nutzung
1. Projektverzeichnis aufrufen und lokalen Webserver starten.
2. Browser öffnen und `index.html` laden.
3. Daten werden automatisch über `/api/spikes` geladen.
4. Filter und Interaktionen nutzen, um die Visualisierung anzupassen.

## Anforderungen
- Moderner Browser mit aktiviertem JavaScript
- Zugriff auf eine API-Instanz, die `/api/spikes` bereitstellt

## Lizenz und Hinweise
© 2026 Donau2Space.de