# 04 Erweiterte Gestaltung

Professionelle Dashboards erfordern eine einheitliche Gestaltung: passende Farben, korrekte Einheiten, Schwellenwerte und klare visuelle Hierarchien. In diesem Tutorial lernst du die wichtigsten Techniken, um deine Panels produktionsreif zu gestalten:

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-961a992b7a53bb7f2c4d0158bfd5b7eee59ff559%2Fgrafana-style-transparent-01.png?alt=media" alt=""><figcaption></figcaption></figure>

## Was du lernst

* Field Overrides für individuelle Gestaltung einzelner Datenreihen
* Einheiten und Dezimalpräzision konfigurieren
* Schwellenwerte direkt im Diagramm anzeigen
* Mehrere Y-Achsen für unterschiedliche Einheiten nutzen
* Transparente Panels für Shopfloor-Anzeigen

## Voraussetzungen

* Vorherige Tutorials in diesem Abschnitt abgeschlossen
* Grundlegendes Verständnis der Panel-Konfiguration

***

## Field Overrides

Field Overrides ermöglichen es, unterschiedliche Einstellungen auf bestimmte Datenreihen innerhalb eines Panels anzuwenden.

### Override-Typen

| Typ                       | Beschreibung       | Beispiel                         |
| ------------------------- | ------------------ | -------------------------------- |
| **Fields with name**      | Exakter Feldname   | "Abzugsgeschwindigkeit (Soll)"   |
| **Fields matching regex** | Regulärer Ausdruck | `.*\(Soll\)$` für alle Sollwerte |
| **Fields with type**      | Datentyp           | Alle numerischen Felder          |

### Override erstellen

1. Suche im Panel-Editor den Abschnitt **Overrides** in der rechten Seitenleiste
2. Klicke auf **+ Add field override** und wähle den Abgleichtyp
3. Klicke auf **+ Add override property** und konfiguriere die gewünschte Eigenschaft

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-a5eaff7030443e6c53a2d0dc00dd54313b89add5%2Fgrafana-style-override-byname-01.png?alt=media" alt=""><figcaption></figcaption></figure>

### Häufige Override-Eigenschaften

| Eigenschaft  | Pfad                            | Beschreibung                   |
| ------------ | ------------------------------- | ------------------------------ |
| Color        | Standard options > Color        | Feste Farbe                    |
| Unit         | Standard options > Unit         | Anzeigeeinheit                 |
| Decimals     | Standard options > Decimals     | Dezimalpräzision               |
| Display name | Standard options > Display name | Benutzerdefinierte Bezeichnung |
| Line style   | Graph styles > Line style       | Solid, Dash, Dots              |
| Line width   | Graph styles > Line width       | Linienstärke                   |
| Y-axis       | Axis > Placement                | Linke oder rechte Achse        |

### Beispiel: Ist- vs. Sollwert

| Override | Farbe         | Linienstil    | Breite |
| -------- | ------------- | ------------- | ------ |
| Ist-Wert | Blau (fest)   | Solid         | 2      |
| Sollwert | Orange (fest) | Dash (10, 10) | 1      |

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-2bb403f91b2f24210c1b9d82bd87a28f28a52519%2Fgrafana-style-actual-vs-setpoint-01.png?alt=media" alt=""><figcaption></figcaption></figure>

***

## Einheiten und Dezimalstellen

Korrekte Einheiten machen Werte sofort verständlich.

1. Suche in der rechten Seitenleiste nach **Standard options** > **Unit**
2. Durchsuche die Kategorien oder verwende die Suche

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-e11b3f3712d896f92862723aed92d5698df9f6e6%2Fgrafana-style-unit-selector-01.png?alt=media" alt=""><figcaption></figcaption></figure>

### Häufige Einheiten in der Fertigung

| Kategorie           | Einheiten       |
| ------------------- | --------------- |
| **Durchsatz**       | kg/h, t/h       |
| **Temperatur**      | °C, °F          |
| **Druck**           | bar, PSI        |
| **Geschwindigkeit** | m/min, RPM      |
| **Prozent**         | Percent (0-100) |

Unter **Decimals** steuerst du die Dezimalpräzision. Faustregel: 0 für Zähler, 1 für Temperaturen und Prozent, 2 für Präzisionsmessungen.

{% hint style="info" %}
Wenn die gewünschte Einheit nicht in der Liste vorhanden ist: **Misc** > **Custom** und das Suffix eingeben (z. B. "pieces/h").
{% endhint %}

***

## Farben

### Farbschemata

Unter **Standard options** > **Color scheme** stehen verschiedene Optionen:

| Schema               | Einsatzbereich                                  |
| -------------------- | ----------------------------------------------- |
| **Single color**     | Einfache Panels mit einer Datenreihe            |
| **Classic palette**  | Mehrere Datenreihen automatisch unterscheiden   |
| **Green-Yellow-Red** | Leistungsmetriken mit Gradient                  |
| **By value**         | Statusindikatoren basierend auf Schwellenwerten |

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-0a174127392b2a7e66047656e1853bcd979b4b2d%2Fgrafana-style-color-schemes-01.png?alt=media" alt=""><figcaption></figcaption></figure>

### Farbkonventionen für die Fertigung

| Farbe      | Verwendung      |
| ---------- | --------------- |
| **Blau**   | Ist-/Messwerte  |
| **Orange** | Soll-/Zielwerte |
| **Grün**   | Guter Status    |
| **Gelb**   | Warnung         |
| **Rot**    | Kritisch/Fehler |

***

## Schwellenwerte auf Diagrammen

Schwellenwerte können als horizontale Linien oder farbige Flächen direkt im Zeitreihendiagramm angezeigt werden.

1. Suche in der Seitenleiste nach **Thresholds** und füge Schwellenwerte hinzu
2. Suche nach **Graph styles** > **Threshold display** und wähle einen Modus:

| Modus                 | Beschreibung                                  |
| --------------------- | --------------------------------------------- |
| **Off**               | Nur Legendenfarben beeinflusst                |
| **As lines**          | Horizontale Linien an den Schwellenwertstufen |
| **As filled regions** | Farbige Flächen zwischen den Schwellenwerten  |
| **Both**              | Linien und farbige Flächen                    |

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-63ad328b1cdac63fc641caf70e0e90e6e79e519a%2Fgrafana-style-threshold-lines-01.png?alt=media" alt=""><figcaption></figcaption></figure>

### Beispiel: Soll-Ist-Abweichung

Ein praktisches Beispiel: Bilde die Differenz aus Soll- und Ist-Wert (z. B. über eine Transformation) und zeige sie als eigene Zeitreihe. Lege dann symmetrische Schwellenwerte als **As filled regions** an:

| Schwellenwert | Farbe | Bedeutung                    |
| ------------- | ----- | ---------------------------- |
| Base          | Rot   | Starke Abweichung (negativ)  |
| -20           | Gelb  | Leichte Abweichung (negativ) |
| -5            | Grün  | Normalbetrieb                |
| 5             | Gelb  | Leichte Abweichung (positiv) |
| 20            | Rot   | Starke Abweichung (positiv)  |

Da bei einer Abweichungsdarstellung die genaue Größe großer Ausreißer weniger relevant ist als das Toleranzband selbst, empfiehlt es sich, die Y-Achse zu begrenzen. Setze unter **Standard options** die Werte **Min** und **Max** (z. B. -30 und 30). Aktiviere unter **Axis** den Toggle **Centered zero**, um die Nulllinie immer mittig darzustellen.

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-46310e47b7ffd7121260c774c82e94cf3a3dcd46%2Fgrafana-style-deviation-thresholds-01.png?alt=media" alt=""><figcaption></figcaption></figure>

***

## Mehrere Y-Achsen

Die ENLYZE-Datenquelle legt Variablen mit unterschiedlichen Einheiten automatisch auf separate Y-Achsen. Wählst du z. B. Temperatur (°C), Durchsatz (kg/h) und Druck (bar) in einer Abfrage, erhältst du drei Achsen.

Wenn du mehr Kontrolle über die Positionierung möchtest, nutze Overrides:

1. Füge einen Override für die Datenreihe hinzu
2. Füge die Eigenschaft **Axis** > **Placement** hinzu
3. Wähle **Right**

{% hint style="info" %}
Verwende unter **Axis** > **Color mode** den Modus **Series**, damit die Achsenfarbe zur Datenreihenfarbe passt. So wird klar, welche Achse zu welchen Daten gehört.
{% endhint %}

***

## Dashboard-Einstellungen

### Transparenter Hintergrund

Unter **Panel options** > **Transparent background** machst du den Panel-Hintergrund transparent. Geeignet für Shopfloor-Anzeigen und Präsentationen.

### Zeitbereich

* **Dashboard-Zeitbereich**: In den Dashboard-Einstellungen (Zahnradsymbol) unter **Time options** den Standard-Zeitbereich und das Refresh-Intervall festlegen
* **Panel-spezifisch**: Unter **Query options** > **Relative time** den Dashboard-Zeitbereich für einzelne Panels überschreiben (z. B. "1h")

***

## Das fertige Shopfloor-Panel

Die einzelnen Techniken ergeben zusammen ein produktionsreifes Panel:

| Einstellung      | Wert                     |
| ---------------- | ------------------------ |
| **Line width**   | 2                        |
| **Fill opacity** | 15                       |
| **Gradient**     | Opacity                  |
| **Legend**       | Table mit Last, Min, Max |
| **Transparent**  | Yes                      |

### Overrides

| Datenreihe          | Farbe  | Stil                   |
| ------------------- | ------ | ---------------------- |
| Ist-Geschwindigkeit | Blau   | Durchgezogen, Breite 2 |
| Sollwert            | Orange | Gestrichelt, Breite 1  |

### Schwellenwerte

| Wert               | Farbe | Bedeutung |
| ------------------ | ----- | --------- |
| Base               | Grün  | Normal    |
| 90 % des Sollwerts | Gelb  | Warnung   |
| 80 % des Sollwerts | Rot   | Kritisch  |

<figure><img src="https://3556205377-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn6Jn6Re8NNPSKD1jGZyL%2Fuploads%2Fgit-blob-9bdc01a63aef8c30ada173a8cc57a7c779e140d4%2Fgrafana-style-complete-shopfloor-01.png?alt=media" alt=""><figcaption></figcaption></figure>

***

## Tipps

* **Einheitlichkeit**: Gleiche Farben für gleiche Metriktypen im gesamten Dashboard. Nicht kg/h und t/h mischen.
* **Regex-Overrides**: Nutze `.*\(Soll\)$`, um allen Sollwerten gleichzeitig dieselbe Farbe zuzuweisen.
* **Barrierefreiheit**: Nicht allein auf Farben verlassen. Textbeschriftungen und Linien helfen auch bei eingeschränktem Farbsehen.
* **Performance**: Übermäßig viele Overrides vermeiden. Regex-Overrides sind effizienter als viele einzelne By-Name-Overrides.

***

## Nächste Schritte

* [**Dashboard-Organisation**](https://docs.enlyze.com/integrations/grafana/intermediate-features/01-dashboard-organization) - Zeilen, Ordner und Verlinkung
* [**Transformationen**](https://docs.enlyze.com/integrations/grafana/intermediate-features/02-transformations) - Datenmanipulation