# Chart-Integration mit ApexCharts

Dieses Dokument beschreibt die Integration von ApexCharts in die MYP-Plattform zur Visualisierung von Daten.

## Übersicht

Die MYP-Plattform nutzt [ApexCharts](https://apexcharts.com/) für die Darstellung von Diagrammen und Visualisierungen. ApexCharts ist eine moderne JavaScript-Bibliothek zur Erstellung interaktiver Diagramme mit einem einfachen API und reaktionsfähigem Design.

## Dateien und Struktur

Die Chart-Integration besteht aus folgenden Komponenten:

1. **ApexCharts-Bibliothek**: `static/js/charts/apexcharts.min.js`
2. **Konfigurationsdatei**: `static/js/charts/chart-config.js`
3. **Renderer**: `static/js/charts/chart-renderer.js`
4. **Adapter**: `static/js/charts/chart-adapter.js`

### Funktionsweise

1. Die **Chart-Konfiguration** definiert Standardstile, Farben und Optionen für alle Diagrammtypen.
2. Der **Chart-Renderer** verwaltet die Erstellung, Aktualisierung und Zerstörung von Diagrammen.
3. Der **Chart-Adapter** verbindet die bestehende `renderChart`-Funktion mit der neuen ApexCharts-Implementierung.

## Verwendung in Templates

Um ein Diagramm in einer Template-Datei anzuzeigen:

```html
<div id="mein-chart" class="h-64" data-api-endpoint="/api/pfad/zu/daten" data-chart data-chart-type="line"></div>
```

### Verfügbare Attribute:

- `data-chart`: Markiert das Element als Diagramm-Container
- `data-api-endpoint`: Der API-Endpunkt, von dem Daten geladen werden
- `data-chart-type`: Der Diagrammtyp (optional, wird sonst automatisch bestimmt)

## Unterstützte Diagrammtypen

Die folgenden Diagrammtypen werden unterstützt:

- `line`: Liniendiagramm
- `area`: Flächendiagramm
- `bar`: Balkendiagramm
- `pie`: Kreisdiagramm
- `donut`: Ringdiagramm
- `radial`: Radialdiagramm

## Datenformat

Die API-Endpunkte sollten Daten in einem der folgenden Formate zurückgeben:

### Für Kreisdiagramme (pie/donut):

```json
{
  "scheduled": 12,
  "active": 5,
  "completed": 25,
  "cancelled": 3
}
```

### Für Balkendiagramme:

```json
[
  {
    "printer_name": "Drucker 1",
    "job_count": 25,
    "print_hours": 124.5
  },
  {
    "printer_name": "Drucker 2",
    "job_count": 18,
    "print_hours": 85.2
  }
]
```

### Für Linien- und Flächendiagramme:

```json
[
  {
    "date": "2023-01-01",
    "value": 42
  },
  {
    "date": "2023-01-02",
    "value": 58
  }
]
```

## Theme-Unterstützung

Die Diagramme unterstützen automatisch das Light- und Dark-Mode-Theme der MYP-Plattform. Bei einem Themenwechsel werden alle aktiven Diagramme mit den passenden Farben aktualisiert.

## Anpassung

Um die Diagramme anzupassen:

1. **Farben**: Anpassungen in `MYP_CHART_COLORS` in `chart-config.js`
2. **Standardoptionen**: Änderungen in `getBaseChartOptions()` in `chart-config.js`
3. **Spezifische Diagrammtypen**: Anpassungen in den jeweiligen Funktionen (`getLineChartConfig`, `getPieChartConfig`, etc.)

## Erweiterung

Um weitere Diagrammtypen oder Funktionen hinzuzufügen:

1. Fügen Sie eine neue Konfigurationsfunktion in `chart-config.js` hinzu
2. Erweitern Sie die `createChart`-Funktion in `chart-renderer.js`, um den neuen Diagrammtyp zu unterstützen
3. Aktualisieren Sie den `chart-adapter.js`, um die Datentransformation für den neuen Diagrammtyp zu unterstützen