Koala Sankey diagram - #3879
Conversation
| def upgrade(topic: str, payload) -> Optional[dict]: | ||
| # Add the Sankey diagram to the koala carousel order so it also appears for existing | ||
| # installations. | ||
| if re.search("^openWB/general/web_theme$", topic) is not None: |
There was a problem hiding this comment.
Der reguläre Ausdruck vergleicht das komplette Topic. Das ist einiges an Overhead und kann auch simpler gelöst werden.
| if re.search("^openWB/general/web_theme$", topic) is not None: | |
| if topic == "openWB/general/web_theme": |
| type: str = "koala", | ||
| official: bool = True, | ||
| userManagementSupported: bool = True, | ||
| configuration: KoalaWebThemeConfiguration = None) -> None: |
There was a problem hiding this comment.
Wurde zwar nicht in diesem PR bearbeitet, sollte aber korrigiert werden.
| configuration: Optional[KoalaWebThemeConfiguration] = None) -> None: |
| vehicle_card_view_breakpoint: int = 4, | ||
| chargePoint_table_search_input_field: bool = False, | ||
| vehicle_table_search_input_field: bool = False, | ||
| top_carousel_slide_order: list = None |
There was a problem hiding this comment.
Sollte ebenfalls korrigiert werden.
| top_carousel_slide_order: Optional[list[str]] = None |
| from helpermodules.auto_str import auto_str | ||
|
|
||
| from modules.common.abstract_device import DeviceDescriptor |
There was a problem hiding this comment.
Hier den Import von Optional ergänzen.
| from typing import Optional | |
| from helpermodules.auto_str import auto_str | |
| from modules.common.abstract_device import DeviceDescriptor |
| return `${(watts / 1000).toLocaleString('de-DE', { | ||
| minimumFractionDigits: 1, | ||
| maximumFractionDigits: 1, | ||
| })} kW`; |
There was a problem hiding this comment.
Bitte keine hart codierten Zahlenformate verwenden. Es sollte immer die Umgebung des Browsers verwendet werden.
| return `${(watts / 1000).toLocaleString('de-DE', { | |
| minimumFractionDigits: 1, | |
| maximumFractionDigits: 1, | |
| })} kW`; | |
| return `${(watts / 1000).toLocaleString(undefined, { | |
| minimumFractionDigits: 1, | |
| maximumFractionDigits: 1, | |
| })} kW`; |
There was a problem hiding this comment.
Mega das ihr hier in die Richtung Design was macht, ich finde nur die Darstellung mit den sich kreuzenden Balken im Sankey mega unübersichtlich, gerade wenn es da mehrere Flows in verschiedenste Quellen/Verbraucher gibt, ist das schon mega unruhig und unübersichtlich.
Als Anregung, ich hab mir das eigene Sankey so aufgebaut mit der Schnittstelle Hauptverteilung in der Mitte:
3 participants
Das Sankey-Diagramm wurde dem oberen Karussell als separate Slide hinzugefügt.
Das Sankey-Diagramm visualisiert die aktuellen Energieflüsse und zeigt, welcher Anteil jeder Quelle – PV, Netz, Speicher – auf welche Senke – Haus, Ladepunkte, Speicher – entfällt.
Abhängigkeit: Dieser PR gehört zu openWB/openwb-ui-settings#1071 im Settings-Repository und sollte gemeinsam mit diesem gemergt werden. Dort wird das Sankey-Diagramm in die Sortierung der oberen Karussell-Slides aufgenommen.
Bei Hybrid-Wechselrichtern lädt der Speicher direkt per DC aus der eigenen PV. Das Diagramm erkennt dies an der Gerätehierarchie (Speicher als Kind des Wechselrichters) und ordnet die Speicherladung zuerst der PV zu – statt sie anteilig auf alle Quellen zu verteilen.
Wenn mehr als drei Ladepunkte konfiguriert sind, werden die Ladepunkte zu einem einzigen Sink mit der Bezeichnung „Ladepunkte“ zusammengefasst.
plugin:
Für das Diagramm nutzen wir das Chart.js-Plugin chartjs-chart-sankey (npm-Paket). Trotz niedriger Versionsnummer wird es von kurkle, einem der Chart.js-Kernentwickler, gepflegt – wir bleiben damit innerhalb einer Bibliothek.
Eigener Code (Hover & Beschriftung):
Ergänzt wurde eigener Code für zwei Dinge:
Hervorhebung beim Überfahren: Der Fluss unter dem Cursor bleibt farbig, alle anderen Flüsse und ihre Beschriftungen werden ins Graue abgedunkelt.
Die Hover-Hervorhebung des Sankey-Plugins ist sehr dezent. Daher wurde ein eigener, deutlicherer Hover-Fokus für eine bessere Visualisierung implementiert.
Wertbeschriftung: Jeder Fluss trägt seine Leistung mit nachgestellter Einheit (z. B. „6,90 kW"); überlappende Labels werden entlang des Flusses versetzt, der Rest per Tooltip gezeigt.
Die Schriftart für die Chart-JS im Koala-Theme wurde global angepasst, sodass sie nun mit der Schriftart der restlichen Anwendung übereinstimmt.
Hover:
Label Verschiebung:
Tooltip:
Ladepunkt-Zusammenführung.
Slide Reinfolge einstellbar unter Einstellungen:
