Chart-Dashboards

Liniendiagramme, Balken und Zeitreihen aus tabellarischen Daten.

Chart-Dashboards visualisieren Werte aus Sheet-Spalten als Diagramme. Es gibt zwei Hauptszenarien: Tag-im-Jahr-Vergleich (z.B. 2026 vs. 2025, eine Zeile pro Produkt) und Stunden-Verlauf heute (Soll vs. Ist, Live-Werte).

#Grundgerüst

'product_sales' => [
    'title' => 'Verkaufsauswertung',
    'description' => 'Tägliche Verkaufszahlen pro Artikel: 2026 vs 2025',
    'datasource' => [
        'type' => 'google_sheet',
        'slug' => 'sales-forecast',
        'sheetName' => 'Tabellenblatt1',
        'cache_ttl' => 900,
    ],
    'filter' => [
        'sku_column' => 'product_model',
        'pattern' => '/^B\d+$/',
    ],
    'columns' => [
        'name' => 'Name',
        'sku' => 'product_model',
    ],
    'charts' => [ /* siehe unten */ ],
],

#Achsen-Typen

#day_of_year — Multi-Chart, eines pro Zeile

Pro gefilterte Sheet-Zeile entsteht ein eigenes Chart mit 365 x-Punkten (Tag im Jahr). Ideal für Vergleiche „dieses Jahr vs. letztes Jahr". Spalten-Header als Datum (2026-04-15) → automatisches Mapping auf Tag im Jahr.

'charts' => [
    [
        'type' => 'line',
        'title' => '{name} ({sku})',     // Platzhalter aus columns
        'x_axis' => [
            'type' => 'day_of_year',
            'label' => 'Tag',
        ],
        'series' => [
            [
                'label' => '2026',
                'columns_prefix' => '2026-',
                'color' => '#4CAF50',
                'line_width' => 2,
            ],
            [
                'label' => '2025',
                'columns_prefix' => '2025-',
                'color' => '#9E9E9E',
                'line_width' => 2,
            ],
        ],
        'options' => [
            'cumulative' => true,
            'show_today_marker' => false,
        ],
    ],
],

Felder:

Die UI zeigt eine Suche (nach SKU/Name) und eine Cumulative-Checkbox.

#hour_range — Single-Chart, Stunden heute

Ein einzelner Chart mit Stunden auf der x-Achse zwischen Schichtbeginn und -ende. Linien- oder Balken-Form. Daten kommen aus zwei Sheets parallel: einem mit Schicht-Parametern (Start/End/Ziel), einem mit den Ist-Werten pro Stunde.

'shipping_progress' => [
    'title' => 'Versand-Fortschritt',
    'type' => 'chart',
    'access' => 'token',
    'token' => '...',
    'datasource' => [
        'type' => 'google_sheet_multi',          // mehrere Sheets aus einem Dokument
        'slug' => 'kpi',
        'sheets' => [
            'forecast' => [
                'sheetName' => 'Versand-Forecast',
                'cache_ttl' => 3600,
            ],
            'actuals' => [
                'sheetName' => 'Tabellenblatt1',
                'row' => 'last',
                'cache_ttl' => 60,
            ],
        ],
    ],
    'charts' => [
        [
            'type' => 'line',                    // 'line', 'hour_bars' oder 'hour_table'/'hour_table_horizontal'
            'title' => 'Versand heute',
            'x_axis' => [
                'type' => 'hour_range',
                'start_column' => 'forecast.Startzeit',  // sheet.spalte
                'end_column' => 'forecast.Endzeit',
            ],
            'series' => [
                [
                    'label' => 'Geplant',
                    'type' => 'linear',
                    'target_column' => 'forecast.Ziel',
                    'cumulative' => true,
                    'color' => '#9E9E9E',
                ],
                [
                    'label' => 'Tatsächlich',
                    'type' => 'hourly_columns',
                    'source' => 'actuals',
                    'column_pattern' => 'Verpackt {HH}:00',
                    'live_column' => 'Verpackt heute',   // optional, Live-Now-Punkt
                    'cumulative' => true,
                    'color' => '#4CAF50',
                    'color_below' => '#FFC107',          // Ampel-Faerbung gegen baseline
                    'compare_with' => 'Geplant',
                ],
            ],
            'options' => [
                'show_now_marker' => true,
            ],
        ],
    ],
],

#Series-Typen für hour_range

Optional an hourly_columns:

• live_column — Spalte mit dem aktuellen Tageswert. Schiebt einen zusätzlichen Datenpunkt an der aktuellen Uhrzeit ein, sodass der Chart bis zur Minute aktuell ist (nicht nur bis zur letzten abgeschlossenen Stunde).
• color_below + compare_with — Segment-Färbung. Pro Linien-Segment wird verglichen, ob der Ist-Wert über/unter dem Soll-Wert (= Series-Label aus compare_with) liegt. Farben werden zwischen color (≥ Soll) und color_below (≤ 75% Soll) interpoliert. Schwelle: < 75% rot, ≥ 100% grün, dazwischen Lerp über gelb.

#Chart-Type hour_bars

Statt einer kumulierten Linie ein Balken pro Stunde mit dem isolierten Stunden-Ergebnis (Differenz aus den kumulierten Werten). Soll-Linie horizontal bei target / hours. Letzter Balken nutzt den Live-Wert für die laufende Stunde.

'charts' => [
    [
        'type' => 'hour_bars',
        // datasource + series identisch zu 'line'
    ],
],

#Chart-Type hour_table / hour_table_horizontal

Statt eines Charts wird eine Tabelle gerendert. Nutzen dieselben hour_range-Daten:

• hour_table — vertikale Tabelle (Spalten Uhrzeit | Soll | Ist), aktuelle Stunde rot hervorgehoben, Diff-Badge im Header.
• hour_table_horizontal — drei Zeilen (Uhrzeit, Soll, Ist) mit einer Spalte pro Stunde. Pro Stunden-Spalte ein kleines Diff-Badge.

In beiden Tabellen werden Ist-Werte mit derselben Ampel-Farblogik wie der Linien-Chart gefärbt.

#Datasource: google_sheet_multi

Wenn ein Chart Daten aus mehreren Sheets desselben Spreadsheets braucht:

'datasource' => [
    'type' => 'google_sheet_multi',
    'slug' => 'kpi',
    'sheets' => [
        'aliasA' => ['sheetName' => 'Tabellenblatt1', 'cache_ttl' => 60],
        'aliasB' => ['sheetName' => 'Versand-Forecast', 'cache_ttl' => 3600],
    ],
],

Die Aliase werden mit Punkt-Notation in start_column, end_column, target_column, source referenziert (z.B. aliasB.Ziel).

#Praxis-Tipps

• Sheet sauber halten: einheitliche Spalten-Header (2026-04-15, nicht mal 15.04.2026)
• cache_ttl an Update-Frequenz anpassen: Sheet wird nur stündlich aktualisiert? Setze 3600
• Pro Filter ein Chart-Set: für „Gesamt + pro Kategorie" lieber zwei Dashboards anlegen als ein überfrachtetes
• Farben: bei day_of_year aktuelles Jahr farbig, Vorjahre grau. Bei hour_range Soll grau und Ist nach Ampel-Logik
• hour_bars und hour_table* haben kein Cumulative-Toggle — sie zeigen entweder isolierte Werte (Bars) oder kumulierte (Tabellen) basierend auf Series-Config

#Verwandt

• KPI-Dashboards — Tile-Layout, Embed-Mechanik, PWA-Install
• Übersicht — Datasource, Zugriff, Refresh