# Zustands-Gantt Widget type: `opendash-widget-hc-states-gantt` · Plugin: `@opendash/plugin-highcharts` ![[states-gantt.png]] ### Beschreibung Das **Zustands-Gantt Widget** visualisiert zeitliche Verläufe und Dauer von unterschiedlichen Anlagen- oder Betriebszuständen als chronologischen Zeitstrahl. IoT-Anwender erhalten dadurch eine lückenlose Historie darüber, wann und wie lange bestimmte Ereignisse, Schwellenwertüberschreitungen oder Betriebsmodi in einem gewählten Zeitraum aktiv waren. ### Voraussetzungen * Mindestens eine aktive Datenquelle im System, die historische Zeitreihen oder Events liefert (z. B. Maschinenzustände, numerische Verbrauchsdaten oder Statusmeldungen). * Vorhandene Berechtigungen zum Anpassen und Bearbeiten des jeweiligen Dashboards. --- ## 1. Konfiguration und Einrichtung 1. Klicke auf die Schaltfläche **Einstellungen** auf dem noch nicht konfigurierten Widget-Block, um das Konfigurationsfenster zu öffnen. 2. Stelle sicher, dass du dich im Tab **Daten** befindest, und klicke in das Eingabefeld unter **Wähle Datenquellen aus, die du visualisieren möchtest.** 3. Wähle aus der Liste die gewünschte Datenquelle aus (z. B. `Demo Halle A - Maschine A Verbrauch` und `Demo Halle A - Maschine A Status`). 4. Lege im Bereich **Wähle den Zeitraum, für den die Daten geladen werden sollen.** das Zeitfenster fest. Gib dazu die gewünschte Zahl ein (z. B. `1`) und wähle die Einheit aus dem Dropdown-Menü (z. B. **Tag**). 5. Wechsle ganz oben in den Tab **Einstellungen** und klicke im Bereich **Bedingungen** auf die Schaltfläche **+ Bedingung hinzufügen**. 6. Klicke im rechten Seitenmenü auf **Bedingung hinzufügen**, um das logische Regelwerk (Bedingung 1) zu öffnen. 7. Wähle im Dropdown-Menü **Daten Item auswählen** die gewünschte Variable aus (z. B. `Demo Halle A - Maschine A Verbrauch`). 8. Bestimme über das Dropdown-Menü **Wähle einen Auslöser** die mathematische oder textbasierte Regel (z. B. **Nummer größer als**) und trage im darunterliegenden Feld den gewünschten Grenzwert ein (z. B. `22.5`). 9. Passe im Bereich **Darstellung** das Aussehen für diesen Zustand an: * Klicke auf das Farbfeld neben **Farbe auswählen für Zustand** und wähle den passenden Farbton aus der Matrix. * Trage im Feld **(Optional) Angezeigter Text** den Namen ein, der auf dem Dashboard als Label erscheinen soll (z. B. `Verbrauch hoch`). 10. Klicke unten rechts im Seitenmenü auf **Fertig**, um die erste Bedingung zu sichern. 11. Wiederhole die Schritte 5 bis 10 für alle weiteren Zustände, die du abbilden möchtest (z. B. für eine Status-Zeichenkette wie `Produktion` mit dem Operator **Zeichenkette entspricht** und der Zuweisung einer grünen Farbe mit dem Text `Produziert`). 12. Klicke abschließend unten rechts im Hauptmenü auf **Speichern**, um die Konfiguration anzuwenden. --- ## 2. Erweiterte Einstellungen & Formatierung Die Auswertung der Bedingungen erfolgt hierarchisch von oben nach unten – die erste zutreffende Regel bestimmt die Farbe des Zeitstrahls für den jeweiligen Zeitpunkt. | Option | Beschreibung | Funktion | | :--- | :--- | :--- | | **UND-Gruppe / ODER-Gruppe** | Logische Verknüpfungstabs im Bedingungsmenü. | Erlaubt es, mehrere Variablen innerhalb einer einzigen Status-Regel entweder gleichzeitig (UND) oder alternativ (ODER) miteinander zu verknüpfen. | | **Icon-Auswahl (`facircle`)** | Symbol-Zuweisung im Darstellung-Bereich. | Ermöglicht es, dem Zustand ein individuelles Icon aus der Symbolbibliothek hinzuzufügen. | | **Icon-Ausrichtung** | Dropdown-Menü für Symbole. | Bestimmt, ob das zugewiesene Icon links oder rechts neben dem Zustandstext platziert wird. | | **Reihenfolge ändern (Pfeil-Symbole)** | Pfeiltasten rechts neben jeder angelegten Bedingung. | Verschiebt die Priorität einer Bedingung in der Auswertungsliste nach oben oder unten. | | **Kopieren (Doppelblatt-Symbol)** | Kopierfunktion im Bedingungen-Menü. | Dupliziert eine bereits konfigurierte Bedingung, um die Erstellung ähnlicher Regeln zu beschleunigen. | | **Löschen (Mülleimer-Symbol)** | Löschfunktion im Bedingungen-Menü. | Entfernt eine Bedingung permanent aus dem Widget. | | **Mehrere Zustände gleichzeitig zulassen** | Kontrollkästchen unter den Anzeigeoptionen. | Aktiviert, dass jeder Zustand eine eigene Zeile im Diagramm erhält. Deaktiviert schmilzt alle Zustände in einer einzigen, kombinierten Zeile zusammen. | | **Zustände kürzer als... ausblenden** | Numerisches Eingabefeld (Sekunden). | Filtert ultrakurze Spitzen oder "Datenrauschen" heraus, indem Zustände unter der angegebenen Sekundenzahl ignoriert werden. `0` zeigt alle an. | | **Zustands-Prozentwerte über dem Diagramm anzeigen** | Kontrollkästchen mit Haken-Option. | Blendet oberhalb des Zeitstrahls eine statistische Zusammenfassung ein, die zeigt, wie viel Prozent der Gesamtzeit jeder Zustand aktiv war. | | **Zeitraum-Navigation über dem Diagramm anzeigen** | Kontrollkästchen mit Haken-Option. | Fügt eine interaktive Zeitleiste über dem Widget hinzu, mit der schnell vor- und zurückgesprungen werden kann. | | **Standard-Anzeige** | Ausklappbarer Bereich ganz unten im Menü. | Definiert eine Fallback-Farbe und Beschriftung für Zeiträume, in denen keine einzige der definierten Bedingungen zutrifft. | --- ## 3. Das fertige Dashboard-Ergebnis Nach dem Speichern siehst du ein lineares, horizontales Gantt-Diagramm auf deinem Dashboard. Die x-Achse stellt den gewählten Zeitverlauf dar, während die farbigen Blöcke exakt signalisieren, wann welcher Zustand aktiv war. Über dem Diagramm listet eine kompakte Legende die prozentualen Zeitanteile der einzelnen Zustände auf. Fährst du mit der Maus über die farbigen Balken (Hover-Effekt), öffnet sich ein Tooltip, der dir den genauen Namen des Zustands, das Start- und Enddatum sowie die exakte Dauer des Ereignisses anzeigt. Über die Navigationselemente am linken oberen Rand des Widgets kannst du zudem den angezeigten Zeitraum flexibel verändern. > 💡 **Praxis-Tipp:** Wenn du wissen möchtest, ob eine Anlage im Laufe des Tages primär produktiv war oder stillstand, nutze die Option **Zustands-Prozentwerte über dem Diagramm anzeigen**. So siehst du die Verteilung sofort als konkreten Prozentwert auf einen Blick, ohne die einzelnen Balken manuell zusammenrechnen zu müssen.