analytic-plot-card

Eine hochmoderne Home Assistant Custom Card mit Analytics-Dashboard-Design.

Features

✨ Design & UX

• Glow & Glassmorphismus mit backdrop-filter: blur()
• Dunkles High-Tech Farbschema (Anthrazit, Cyber-Blau)
• Responsive & Touch-optimiert
• Live-Badge mit Lade-Animation

📊 Funktionalität

• Chart.js mit Farbverläufen (Linear Gradient)
• Echtzeit-Daten aus Home Assistant History API
• Intelligente Tooltip-Formatierung (Deutsch)
• 24-Stunden-Verlauf mit 1-zu-1 Daten-Mapping
• Fehlerbehandlung & Fallback-States

🔧 Technologie

• LitElement 3 (Web Components)
• Chart.js 4.4+
• Keine externen Abhängigkeiten (außer via CDN)

Installation

Schritt 1: Datei in Home Assistant hinzufügen

# SSH in deinen HA-Server
ssh root@ha.local

# Zielverzeichnis erstellen
mkdir -p /config/www/community/analytic-plot-card

# Datei kopieren (oder via git clone)
cp analytic-plot-card.js /config/www/community/analytic-plot-card/

Schritt 2: Ressource registrieren

1. Home Assistant öffnen → Einstellungen
2. Dashboards → (oberes Menü) ⋮ → Ressourcen
3. Ressource hinzufügen klicken
4. URL: /local/community/analytic-plot-card/analytic-plot-card.js
5. Typ: JavaScript Module
6. Speichern & Seite aktualisieren (F5)

Schritt 3: Karte zum Dashboard hinzufügen

Dashboard öffnen → + Karte → Manuelle Karte → YAML:

type: custom:analytic-plot-card
entity: sensor.wohnzimmer_temperatur
title: Klima Schlafzimmer

Konfiguration

Minimale Konfiguration

type: custom:analytic-plot-card
entity: sensor.deine_entity

Alle verfügbaren Optionen

type: custom:analytic-plot-card
entity: sensor.wohnzimmer_temperatur          # Erforderlich: HA Entity
title: "Klima Schlafzimmer"                   # Optional: Card-Titel
name: "Temperatur"                             # Optional: Chart-Label

Unterstützte Entitys

✅ Alle Sensoren mit numerischen Werten

• sensor.* (Temperatur, Luftfeuchtigkeit, Druck, etc.)
• input_number.*
• climate.* (Temperatur-Attribute)
• Custom MQTT-Sensoren

Styling anpassen

CSS-Variablen in der Card ändern:

type: custom:analytic-plot-card
entity: sensor.temperatur
# Customize via Home Assistant theme oder custom-ui

Für fortgeschrittene Anpassungen: Card-Quellcode editieren und diese Variablen setzen:

:host {
  --card-background: rgba(17, 24, 39, 0.7);
  --accent-color: #3498db;
  --text-primary: #ffffff;
}

Datenverfügbarkeit

• Zeitraum: 24 Stunden (konfigurierbar via Code-Edit)
• Datenquelle: Home Assistant History API
• Refresh: Bei State-Change oder Seiten-Reload
• Cache: Pro Session (nach neuem Laden aus der DB)

Troubleshooting

Chart wird nicht angezeigt

❌ "Fehler: Chart is not defined"
✅ Browser-Cache löschen (Strg+Shift+Del)
✅ HA neu starten: Einstellungen → System → Neustart

Entity nicht gefunden

❌ "Entity nicht konfiguriert"
✅ Konfiguration prüfen: type: custom:analytic-plot-card
✅ Entity-ID korrekt? (case-sensitive)

Keine Daten im Chart

❌ "Keine Verlaufsdaten verfügbar"
✅ Sensor muss länger als 5 Min. existieren
✅ History DB aktiviert in configuration.yaml:
   history:
     include:
       entities:
         - sensor.deine_entity

History API antwortet langsam

• Große Datenmengen (>1000 Punkte) können langsam laden
• Lösung: In _fetchHistoryAndInitChart() Zeitraum anpassen:

  const startTime = new Date(endTime.getTime() - 7 * 24 * 60 * 60 * 1000); // 7 Tage statt 24h
  

Entwicklung

Code-Struktur

analytic-plot-card.js
├── AnalyticPlotCard (Haupt-Web-Component)
│   ├── LitElement Properties
│   ├── Styling (CSS Variables)
│   ├── Rendering (HTML Template)
│   ├── History API Integration
│   └── Chart.js Initialisierung
├── AnalyticPlotCardEditor (UI-Editor)
└── customElements.define() Registrierung

Erweiterungen

Mehrere Chart-Typen

type: 'line'  // aktuell
type: 'area'  // gestackt
type: 'bar'   // Histogramm

Zeit-Range-Selector

<div class="time-selector">
  <button @click=${() => this._setRange('24h')}>24h</button>
  <button @click=${() => this._setRange('7d')}>7 Tage</button>
</div>

Mehrere Datasets

datasets: [
  { label: 'Temperatur', data: [...] },
  { label: 'Luftfeuchte', data: [...] }
]

Version

• aktuell: 1.0.0
• Browser: Chrome 90+, Firefox 88+, Safari 14+
• Home Assistant: 2023.1+
• HA Core: Kompatibel mit allen Versionen (History API ist stabil)

Lizenz

MIT License — Frei nutzbar für Home Automation Projekte

Beiträge & Issues

Bugs melden oder Features vorschlagen über das Git-Repository!

---

Viel Spaß mit deinem Analytics Dashboard! 🚀