# 📊 Batterie-Optimierung Dashboard Überarbeitung

## 🎯 Übersicht

Ich habe **3 Dashboard-Varianten** erstellt, alle mit **maximal 4 Spalten** für bessere Übersichtlichkeit:

### 1. **Standard-Version** (`battery_optimizer_dashboard.yaml`)
- **Am umfangreichsten**: Alle Features und Details
- **Beste Wahl für**: Desktop-Nutzung, Detailanalyse
- **Highlights**:
  - Power Flow Card Plus für Energie-Visualisierung
  - 3 Plotly Graphen (Preis, SOC, Energie-Flüsse)
  - Vollständige Plan-Tabelle mit Statistiken
  - System-Informationen ausklappbar

### 2. **Kompakt-Version** (`battery_optimizer_dashboard_compact.yaml`)
- **Ausgewogen**: Kompakt aber vollständig
- **Beste Wahl für**: Tablet, ausgewogene Darstellung
- **Highlights**:
  - Stack-in-Card für platzsparendes Layout
  - 2 Plotly Graphen (Preis + SOC kombiniert)
  - Bubble Cards für moderne Optik
  - Kompakte Plan-Anzeige

### 3. **Minimal-Version** (`battery_optimizer_dashboard_minimal.yaml`)
- **Am übersichtlichsten**: Nur das Wichtigste
- **Beste Wahl für**: Smartphone, Quick-Check
- **Highlights**:
  - Quick Status Bar (3 Bubble Buttons)
  - Nächste 5 Ladungen im Fokus
  - 2 kleine Graphen (Preis + SOC)
  - Schnelleinstellungen nur wenn aktiv

---

## 📦 Installation

### Schritt 1: Dashboard in Home Assistant importieren

```yaml
# In deiner Home Assistant Konfiguration (configuration.yaml oder dashboards.yaml)
lovelace:
  mode: yaml
  dashboards:
    battery-optimizer:
      mode: yaml
      filename: dashboards/battery_optimizer_dashboard.yaml
      title: Batterie Optimierung
      icon: mdi:battery-charging
      show_in_sidebar: true
```

### Schritt 2: Datei hochladen

1. Kopiere eine der YAML-Dateien nach: `/config/dashboards/`
2. Oder: Füge den Inhalt direkt in den Dashboard-Editor ein
3. Neustart von Home Assistant (eventuell nötig)

### Schritt 3: Fehlende Entities anpassen

**Wichtig:** Passe folgende Entity-IDs an deine tatsächlichen IDs an:

```yaml
# Beispiele - ersetze durch deine tatsächlichen IDs:
sensor.openems_ess0_activepower          # Batterie-Leistung
sensor.esssoc                            # Batterie SOC
sensor.openems_grid_activepower          # Netz-Leistung
sensor.openems_production_activepower    # PV-Produktion
sensor.openems_consumption_activepower   # Verbrauch
sensor.hastrom_flex_extended_current_price # Strompreis
sensor.battery_charging_plan_status      # Plan-Status
sensor.battery_next_charge_time          # Nächste Ladung
```

---

## 🎨 Verwendete Custom Cards

Diese HACS-Karten werden verwendet:

### ✅ **Installiert bei dir:**
1. **Bubble Card** - Moderne Button- und Toggle-Cards
2. **Plotly Graph Card** - Professionelle interaktive Graphen
3. **Power Flow Card Plus** - Energie-Fluss-Visualisierung
4. **Stack-in-Card** - Kompaktes Stapeln von Cards

### 📋 **Falls noch nicht installiert:**

```bash
# In HACS → Frontend → Suche nach:
- Bubble Card
- Plotly Graph Card  
- Power Flow Card Plus
- Stack-in-Card
```

---

## 🔧 Anpassungen

### Layout ändern

```yaml
# Von 4 auf 3 Spalten ändern (in horizontal-stack):
- type: horizontal-stack
  cards:
    - card1  # Spalte 1
    - card2  # Spalte 2
    - card3  # Spalte 3 (entferne 4. Card)
```

### Farben anpassen

```yaml
# In Plotly Graphen:
line:
  color: '#FF9800'  # Deine Wunschfarbe (Hex)
```

### Graph-Zeitraum ändern

```yaml
hours_to_show: 48  # Von 48h auf z.B. 24h ändern
```

---

## 📱 Responsive Verhalten

### Automatische Anpassung

Alle Dashboards passen sich automatisch an:

- **Desktop** (>1024px): Volle Breite, alle Spalten
- **Tablet** (768-1024px): 2-3 Spalten, kompaktere Ansicht
- **Smartphone** (<768px): 1 Spalte, vertikales Stacking

### Mobile Optimierungen

Die **Minimal-Version** ist speziell für Smartphones optimiert:
- Große Touch-Targets (Bubble Cards)
- Weniger Scroll-Bedarf
- Schneller Überblick

---

## 🎯 Empfohlene Nutzung

| Gerät | Dashboard-Version | Warum? |
|-------|-------------------|--------|
| Desktop PC | **Standard** | Volle Details, alle Graphen sichtbar |
| Tablet | **Kompakt** | Ausgewogen zwischen Detail und Übersicht |
| Smartphone | **Minimal** | Quick-Check, wichtigste Infos |
| Wall Panel | **Kompakt** oder **Minimal** | Übersichtlich aus der Distanz |

---

## 🐛 Fehlerbehebung

### Problem: Cards werden nicht angezeigt

**Lösung:**
1. Prüfe ob alle Custom Cards installiert sind (HACS)
2. Lösche Browser-Cache
3. Neustart Home Assistant

### Problem: Entities nicht gefunden

**Lösung:**
```yaml
# In Developer Tools → States nachschauen:
# Welche Entity-IDs existieren wirklich?
# Dann im Dashboard anpassen
```

### Problem: Plotly Graph zeigt keine Daten

**Lösung:**
```yaml
# Prüfe ob die Entity historische Daten hat:
# Developer Tools → History → Entity auswählen
# Falls nicht: InfluxDB/Recorder-Integration prüfen
```

---

## 📊 Dashboard-Vergleich

| Feature | Standard | Kompakt | Minimal |
|---------|----------|---------|---------|
| Power Flow Card | ✅ | ✅ | ✅ |
| Preis-Graph | ✅ | ✅ | ✅ (klein) |
| SOC-Graph | ✅ | ✅ | ✅ (klein) |
| Energie-Fluss-Graph | ✅ | ❌ | ❌ |
| Detaillierte Plan-Tabelle | ✅ | ✅ | ❌ |
| Plan-Statistiken | ✅ | ✅ | ❌ |
| Nächste Ladungen | ✅ | ✅ | ✅ |
| System-Infos | ✅ | ✅ | ✅ (minimal) |
| Schnelleinstellungen | ✅ | ✅ | ✅ (conditional) |
| Bubble Cards | ✅ | ✅✅ | ✅✅✅ |
| Stack-in-Card | ❌ | ✅✅ | ❌ |

---

## 🔮 Nächste Schritte

Nach der Dashboard-Installation kannst du:

1. **Plan-Historie implementieren** (wie im vorherigen Chat besprochen)
2. **InfluxDB-Integration** für Langzeit-Datenanalyse
3. **Notifications** bei Ladestart/-ende
4. **Grafana-Dashboard** für erweiterte Analysen

---

## 💡 Tipps

### Performance-Optimierung

```yaml
# Reduziere refresh_interval bei Plotly:
refresh_interval: 300  # Nur alle 5 Minuten aktualisieren
```

### Conditional Cards

```yaml
# Zeige Card nur wenn Optimizer aktiv:
- type: conditional
  conditions:
    - entity: input_boolean.battery_optimizer_enabled
      state: 'on'
  card:
    # Deine Card hier
```

### Dark Mode Anpassungen

```yaml
# In card_mod für bessere Lesbarkeit:
card_mod:
  style: |
    ha-card {
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
```

---

## 📞 Support

Bei Fragen oder Problemen:

1. Prüfe die **Entity-IDs** in Developer Tools
2. Schaue in die **Browser-Konsole** (F12) nach Fehlern
3. Prüfe das **Home Assistant Log**

---

**Viel Erfolg mit deinem neuen Dashboard! 🚀**