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 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:

ApexCharts-Bibliothek: static/js/charts/apexcharts.min.js
Konfigurationsdatei: static/js/charts/chart-config.js
Renderer: static/js/charts/chart-renderer.js
Adapter: static/js/charts/chart-adapter.js

Funktionsweise

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

Verwendung in Templates

Um ein Diagramm in einer Template-Datei anzuzeigen:

<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):

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

Für Balkendiagramme:

[
  {
    "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:

[
  {
    "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:

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

Erweiterung

Um weitere Diagrammtypen oder Funktionen hinzuzufügen:

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

3.2 KiB Raw Blame History