# 📊 Dashboard-Varianten Vergleich

## 🎨 Visueller Aufbau

### 1️⃣ STANDARD-VERSION (11KB)

```
┌─────────────────────────────────────────────────────┐
│  🔋 Power Flow Card Plus (Energie-Visualisierung)   │
└─────────────────────────────────────────────────────┘
┌─────────────────────────┬───────────────────────────┐
│  🎛️ STEUERUNG           │  📅 AKTUELLER PLAN        │
│  • Auto-Optimierung     │  • Plan-Status            │
│  • Manuelle Steuerung   │  • Nächste Ladung         │
│  • Parameter (6 Items)  │  • Geplante Stunden       │
└─────────────────────────┴───────────────────────────┘
┌─────────────────────────────────────────────────────┐
│  📈 GRAPH: Strompreis & Ladeplanung (48h)           │
│     - Preis-Linie mit Füllung                       │
│     - Geplante Ladungen als Marker                  │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│  📊 GRAPH: Batterie SOC & Leistung (24h)            │
│     - SOC (linke Y-Achse)                           │
│     - Leistung (rechte Y-Achse)                     │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│  ⚡ GRAPH: Energie-Flüsse (24h)                     │
│     - PV-Produktion                                 │
│     - Netzbezug                                     │
│     - Batterie                                      │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│  📋 DETAILLIERTER PLAN (ausklappbar)                │
│     - Statistiken-Tabelle                           │
│     - Stunden-Detail-Tabelle                        │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│  ℹ️ SYSTEM-INFORMATIONEN (ausklappbar)              │
│     - OpenEMS Status                                │
│     - Kapazitäten                                   │
│     - PV-Prognosen                                  │
│     - Automation-Status                             │
└─────────────────────────────────────────────────────┘
```

**Verwendete Cards:** 7 verschiedene Typen, 15+ Cards total  
**Beste für:** Desktop, Detailanalyse, Monitoring-Station  
**Scroll-Bedarf:** Hoch (6-7 Bildschirme)

---

### 2️⃣ KOMPAKT-VERSION (8KB)

```
┌─────────────────────────────────────────────────────┐
│  🔋 Power Flow Card Plus (Energie-Visualisierung)   │
└─────────────────────────────────────────────────────┘
┌─────────────────────────┬───────────────────────────┐
│  🎛️ STEUERUNG (Stack)   │  📅 PLAN (Stack)          │
│  ┌─────────────────┐    │  ┌─────────────────┐     │
│  │ Auto Toggle     │    │  │ Plan-Status     │     │
│  │ Manuell Toggle  │    │  │ Nächste Ladung  │     │
│  │ SOC + Preis     │    │  │ X Std geplant   │     │
│  └─────────────────┘    │  └─────────────────┘     │
└─────────────────────────┴───────────────────────────┘
┌─────────────────────────────────────────────────────┐
│  💶 Strompreis & Ladeplan (48h) - Plotly            │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│  🔋 Batterie-Übersicht (24h) - Plotly               │
│     - SOC + Leistung kombiniert                     │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│  📋 DETAILLIERTER PLAN (ausklappbar)                │
│  ┌──────────┬──────────┬──────────┐                │
│  │ Xh Dauer │ X kWh    │ X ct Ø   │ (Bubble Cards) │
│  └──────────┴──────────┴──────────┘                │
│     Liste der Ladestunden (Markdown)                │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│  ⚙️ EINSTELLUNGEN (ausklappbar)                     │
└─────────────────────────────────────────────────────┘
```

**Verwendete Cards:** Stack-in-Card, Bubble Cards, Plotly  
**Beste für:** Tablet, ausgewogene Darstellung  
**Scroll-Bedarf:** Mittel (3-4 Bildschirme)

---

### 3️⃣ MINIMAL-VERSION (6KB)

```
┌──────────────┬──────────────┬──────────────┐
│ 🔋 Batterie  │ 💶 Preis     │ ☀️ PV        │
│   XX%        │   XX ct/kWh  │   XXXX W     │
└──────────────┴──────────────┴──────────────┘
┌──────────────────────┬──────────────────────┐
│ 🤖 Auto              │ ✋ Manuell           │
│   [Toggle]           │   [Toggle]           │
└──────────────────────┴──────────────────────┘
┌─────────────────────────────────────────────┐
│  🔋 Power Flow Card Plus                    │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│  📅 GEPLANTE LADUNGEN                       │
│                                             │
│  🟢 JETZT 23:00 Uhr                         │
│     5000W bei 12.5ct/kWh                    │
│     Niedriger Preis                         │
│                                             │
│  ⏰ 00:00 Uhr                               │
│     5000W bei 11.8ct/kWh                    │
│     Günstigste Stunde                       │
│                                             │
│  ⏰ 01:00 Uhr                               │
│     5000W bei 13.2ct/kWh                    │
│     Unter Schwellwert                       │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│  💶 Strompreis 48h (Mini-Graph)             │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│  🔋 Batterie SOC 24h (Mini-Graph)           │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│  ⚙️ Schnelleinstellungen (nur wenn Auto=ON) │
│     - Min SOC, Max SOC, Ladeleistung        │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│  ℹ️ System (Mini)                            │
│     OpenEMS | Auto Plan | Auto Exec         │
└─────────────────────────────────────────────┘
```

**Verwendete Cards:** Bubble Cards (hauptsächlich), Plotly (minimal)  
**Beste für:** Smartphone, Quick-Check, Wall Panel  
**Scroll-Bedarf:** Niedrig (2 Bildschirme)

---

## 🎯 Entscheidungshilfe

### Wähle STANDARD wenn:
- ✅ Du hast einen großen Bildschirm (Desktop, Laptop)
- ✅ Du möchtest alle Details auf einen Blick
- ✅ Du machst häufig Detailanalysen
- ✅ Du hast mehrere Monitore
- ✅ Scroll-Bedarf ist kein Problem

### Wähle KOMPAKT wenn:
- ✅ Du nutzt hauptsächlich ein Tablet
- ✅ Du möchtest Balance zwischen Detail und Übersicht
- ✅ Du magst moderne Card-Designs (Bubble)
- ✅ Du möchtest Stack-in-Card nutzen
- ✅ Du brauchst alle Features, aber platzsparend

### Wähle MINIMAL wenn:
- ✅ Du nutzt hauptsächlich ein Smartphone
- ✅ Du brauchst nur Quick-Status-Checks
- ✅ Du möchtest wenig scrollen
- ✅ Du hast ein Wall Panel/Tablet an der Wand
- ✅ Fokus auf nächste Ladungen, nicht auf Historie

---

## 📱 Responsivität

| Gerät | Standard | Kompakt | Minimal |
|-------|----------|---------|---------|
| **Desktop** (>1920px) | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| **Laptop** (1366-1920px) | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| **Tablet** (768-1366px) | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| **Smartphone** (<768px) | ⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| **Wall Panel** (1024px) | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |

---

## 🔄 Mix & Match

Du kannst auch **mehrere Dashboards kombinieren**:

```yaml
# In configuration.yaml oder dashboards.yaml
lovelace:
  mode: yaml
  dashboards:
    # Für Desktop
    battery-detail:
      mode: yaml
      filename: dashboards/battery_optimizer_dashboard.yaml
      title: Batterie Detail
      icon: mdi:chart-line
      
    # Für Tablet/Mobile
    battery-overview:
      mode: yaml
      filename: dashboards/battery_optimizer_dashboard_compact.yaml
      title: Batterie
      icon: mdi:battery-charging
      show_in_sidebar: true
      
    # Für Quick-Check
    battery-quick:
      mode: yaml
      filename: dashboards/battery_optimizer_dashboard_minimal.yaml
      title: Batterie Quick
      icon: mdi:battery-lightning
```

Dann hast du alle Varianten verfügbar und kannst je nach Situation wechseln! 🎯