Detailed Charts Panel
Interaktive High-Performance Charts fĂĽr Home Assistant
Ich möchte euch gerne mein neues und bisher größtes Projekt vorstellen. 
Wir alle kennen das Problem der Auswertung in HA. In den letzten Wochen habe ich versucht in diese Richtung ein Projekt aufzuziehen. Die einfache Auswertung von Sensoren ist immer wieder Thema und das Detailed Charts Panel soll hoffentlich die LĂĽcke etwas schlieĂźen. Schaut es euch gerne an, ich bin auf das Feedback gespannt.
Es wird auf opensource Bibliotheken für die Charts gesetzt, damit verbringe ich eigentlich auch die meiste Zeit, weil es eine Menge Abhänigkeiten und Mathematik gibt. Das Projekt ist inzwischen ziemlich umfangreich geworden (7 notwendige Dateien), ich denke aber mit der aktuellen Version ab 2.0 sollte es für den ersten offiziellen Release bereit sein. Die Versionen davor funktionieren auch, haben aber immer entsprechend weniger Funktionen, daher ladet bitte die aktuellste Version herunter.
Das 
Detailed Charts Panel ist eine leistungsstarke Visualisierungslösung für Home Assistant, um historische Daten deiner Sensoren tiefgehend zu analysieren. Es bietet Funktionen, die weit über die Standard-History hinausgehen, wie z.B. Zoom, Pan, Grid-Layouts, verschiedene Diagrammtypen und eine fortbestehende Konfiguration. Zudem läuft alles rein lokal mit Hilfe der Websocket Api von Home Assistant.
Das Panel speichert deine Einstellungen (ausgewählte Sensoren, Farben, Ansichten) automatisch im Browser (Local Storage), sodass du deine Analyseumgebung nach einem Neustart sofort wieder vorfindest. Du kannst auch mehrere Ansichten definieren und einzeln speichern. Aktuell arbeite noch an den Feinheiten für die Card auf dem Dashboard. Im Fokus steht aber das Panel!
Wenn euch das Panel gefällt, würde ich mich sehr über ein Stern auf github 
freuen. 
Das sollte dem Algorithmus helfen, das Panel etwas zu pushen. Lieben Dank.
Schaut bitte unbedingt in Ruhe die Doku an.
Features
Interaktive Charts: Stufenloser Zoom & Pan (Touch & Mausrad) mit automatischem Nachladen der Daten.- Vorjahresvergleich: Vergleiche aktuelle Daten direkt mit dem Vorjahr (als graue Hinterlegung).
- Short-Term & Long-Term Charts: UnterstĂĽtz die Kurz- und Langezeitedaten-Auswertung.
Mehrsprachig: Komplette Ăśbersetzung in Deutsch und Englisch.
Panel Modus & Card Modus: Zwei Möglichkeiten der Betrachtung, komplettes Panel oder als Dashboard Card.
Auto-Scale (W 
kW): Rechnet Werte von W/Whautomatisch inkW/kWhum – kein Kopfrechnen mehr!
Donut Sidebar: Optionale Seitenleiste fĂĽr die prozentuale Verteilung (ideal fĂĽr Stromverbrauch).
Flexible Layouts:
- Combined: Alles in einem Chart.
- Grid: 1 bis 4 Spalten nebeneinander.
- Mixed: Ăśbersicht oben, Details unten.
Thresholds: Setze Warnlinie (z.B. bei 600W) als visuelle Referenz.
Duales Speichern: Speichere Ansichten lokal im Browser oder global in einer Datei.
Live-Statistiken: Min / Max / Durchschnitt / Summe / Aktuell – intelligent berechnet.
Drag & Drop: Ordne Charts im Grid-Modus einfach per Maus neu an.
Modern UI: Voller Support fĂĽr Home Assistant Themes (Light & Dark Mode).
Binary Sensoren: Automatische Erkennung und Darstellung von binären Sensoren (z.B. Heizung, Fenster).
Präzision & Rundung: Werte in Tooltips und Statistiken verwenden display_precisionEinstellung des Sensors aus HA.
Intelligente Tooltips: Info-Fenster weicht dem Mauszeiger automatisch aus, um den Chart nicht zu verdecken.
Mehrsprachig: Komplette Ăśbersetzung in Deutsch und Englisch.
Panel Modus & Card Modus: Zwei Möglichkeiten der Betrachtung, komplettes Panel oder als Dashboard Card.
Auto-Scale (W 
kW): Rechnet Werte von 
Donut Sidebar: Optionale Seitenleiste fĂĽr die prozentuale Verteilung (ideal fĂĽr Stromverbrauch).
Flexible Layouts:
Thresholds: Setze Warnlinie (z.B. bei 600W) als visuelle Referenz.
Duales Speichern: Speichere Ansichten lokal im Browser oder global in einer Datei.
Live-Statistiken: Min / Max / Durchschnitt / Summe / Aktuell – intelligent berechnet.
Drag & Drop: Ordne Charts im Grid-Modus einfach per Maus neu an.
Modern UI: Voller Support fĂĽr Home Assistant Themes (Light & Dark Mode).
Binary Sensoren: Automatische Erkennung und Darstellung von binären Sensoren (z.B. Heizung, Fenster).
Präzision & Rundung: Werte in Tooltips und Statistiken verwenden 
Intelligente Tooltips: Info-Fenster weicht dem Mauszeiger automatisch aus, um den Chart nicht zu verdecken.Panel Mode
Card Mode
Installation
HACS (Empfohlen)
-
Das github ĂĽber den Link in Home Assistant einfĂĽgen.
-
Das „Detailed Charts Panel“ sollte nun in HACS verfügbar sein. Klicke auf „INSTALLIEREN“.
-
Die Ressource wird automatisch zu deiner Lovelace-Konfiguration hinzugefĂĽgt.
Manuelle Installation ĂĽber Hacs
Manuelle Installation ĂĽber Hacs
Ă–ffne HACS in Home Assistant.
- Gehe zu „Frontend“ und klicke auf die drei Punkte in der oberen rechten Ecke.
- Wähle „Benutzerdefinierte Repositories“ („Custom repositories“) aus.
- Füge die URL zu diesem GitHub-Repository hinzu und wähle „Lovelace“ als Kategorie.
- Klicke auf „HINZUFÜGEN“ („ADD“).
- Das „Detailed Charts Panel“ sollte nun in HACS verfügbar sein. Klicke auf „INSTALLIEREN“.
- Die Ressource wird automatisch zu deiner Lovelace-Konfiguration hinzugefĂĽgt.
Manuelle Installation in HA
Manuelle Installation in HA
-
Dateien herunterladen:
- Lade alle Dateien aus diesem Repository herunter (insbesondere
.jsDateien). - Wichtig: Da dieses Panel externe Bibliotheken nutzt, stelle sicher, dass
chart.umd.min.js,hammer.min.jsundchartjs-plugin-zoom.min.jsebenfalls heruntergeladen werden.
- Lade alle Dateien aus diesem Repository herunter (insbesondere
-
Dateien in Home Assistant hochladen:
- Erstelle einen neuen Ordner namens
detailed-charts-panelimwww/community-Verzeichnis deiner Home Assistant-Konfiguration. - Kopiere alle heruntergeladenen Dateien in diesen neuen Ordner. Deine Ordnerstruktur sollte wie folgt aussehen:
/config/www/community/detailed-charts-panel/detailed-charts-panel.js /config/www/community/detailed-charts-panel/chart.umd.min.js /config/www/community/detailed-charts-panel/hammer.min.js /config/www/community/detailed-charts-panel/chartjs-plugin-zoom.min.js
- Erstelle einen neuen Ordner namens
-
Ressource zu Home Assistant hinzufĂĽgen:
- Gehe in Home Assistant zu Einstellungen > Dashboards.
- Klicke auf das Menü mit den drei Punkten oben rechts und wähle Ressourcen.
- Klicke auf + Ressource hinzufĂĽgen.
- Gebe als URL
/local/community/detailed-charts-panel/detailed-charts-panel.jsein. - Wähle als Ressourcentyp JavaScript-Modul.
- Klicke auf Erstellen.
WICHTIG!
Damit das Dashboard in der Sidebar angezeigt werden kann, mĂĽsst ihr in der configuration.yaml am Anfang diesen Code einfĂĽgen:
panel_custom:
- name: detailed-charts-panel
sidebar_title: Detailed Charts
sidebar_icon: mdi:chart-bell-curve-cumulative
module_url: /local/community/detailed-charts-panel/detailed-charts-panel.js
| 
| 
