Home Assistant: Das ultimative Tibber-Dashboard – Interaktive Preis-Charts für Heute & Morgen

---

Wer einen dynamischen Stromtarif wie Tibber nutzt, möchte vor allem eines wissen: Wann ist der Strom am günstigsten?

Die Standard-Ansichten sind oft statisch oder unübersichtlich. Deshalb habe ich ein Dashboard für Home Assistant gebaut, das keine Wünsche offenlässt. Es bietet eine Tab-Ansicht (Reiter) für den heutigen und den morgigen Tag, ist touch-optimiert für die Bedienung am Handy und zoomt automatisch in den relevanten Preisbereich.

🚀 Features des Dashboards

• 📅 Heute & Morgen: Saubere Trennung der Tage durch Tabs.
• 👆 Punktgenau: Wenn du mit dem Finger über das Diagramm fährst, siehst du exakt den Preis zu jeder Uhrzeit (kein Springen!).
• 🔍 Auto-Zoom: Die Y-Achse passt sich dynamisch an. Niedrige Preisschwankungen werden groß dargestellt, damit man Peaks sofort erkennt.
• 📱 Live-Anzeige: Der aktuelle Live-Preis und der Batterie-Ladestand (SoC) werden direkt im Header angezeigt.
• ☁️ Smart Preview: Der Tab für „Morgen“ zeigt automatisch eine Info-Meldung, solange Tibber die neuen Preise noch nicht veröffentlicht hat (meist vor 13:00 Uhr).

---

🛠️ Installation & Voraussetzungen

Damit dieser Code funktioniert, benötigst du HACS (Home Assistant Community Store) und zwei Frontend-Integrationen. Installiere beide über HACS -> Frontend und lade den Browser danach neu:

1. ApexCharts Card: Die Engine für die schönen Diagramme.
2. Tabbed Card: Für die Reiter-Ansicht.

---

1. Wichtig: Der REST-Sensor

Damit wir die Preise für den ganzen Tag im Voraus plotten können, benötigen wir die Daten als Liste. Der Standard-Tibber-Sensor liefert das oft nicht im passenden Format.

Füge den folgenden Sensor in deine configuration.yaml ein (benötigt einen Tibber API Token):

YAML

# Tibber API QUARTER_HOURLY
sensor:
  - platform: rest
    name: "Electricity price Prognose 15Min"
    unique_id: sensor.euer_name
    unit_of_measurement: EUR/kWh
    resource: https://api.tibber.com/v1-beta/gql
    method: POST
    payload: '{ "query": "{ viewer { homes { currentSubscription { status priceInfo (resolution: QUARTER_HOURLY) { current { total } today { total } tomorrow { total } } } } } }" }'
    json_attributes_path: "$.data.viewer.homes[0].currentSubscription.priceInfo"
    json_attributes:
      - today
      - tomorrow
    value_template: "{{ value_json.data.viewer.homes[0].currentSubscription.priceInfo.current.total | float }}"
    scan_interval: 900
    headers:
      Authorization: !secret tibber_api_token
      Content-Type: application/json
      User-Agent: REST

Hinweis: Vergiss nicht, deine Konfiguration zu prüfen und Home Assistant neu zu starten, damit der Sensor verfügbar ist.

---

2. Der „Helfer“-Sensor (für die Vorschau)

Damit das Dashboard erkennt, ob schon Preise für morgen da sind, brauchen wir einen kleinen Helfer.

Gehe zu Einstellungen -> Geräte & Dienste -> Helfer -> Helfer erstellen -> Template -> Binärer Sensor.

• Name: tibber_preise_morgen_verfugbar
• Zustands-Template:(Achte darauf, den Sensornamen sensor.euer_name ggf. anzupassen)

Code-Snippet

{{ (state_attr('sensor.euer_name', 'tomorrow') or []) | count > 0 }}

---

3. Der Dashboard-Code (YAML)

Füge eine „Manuelle Karte“ in deinem Dashboard hinzu und kopiere diesen Code hinein.

Wichtig: Suche im Code nach sensor.euer_name, sensor.tibber_preis_live_echtzeit und sensor.battery_state_of_charge und ersetze diese durch die exakten Namen deiner Sensoren!

YAML

type: custom:tabbed-card
options:
  defaultTabIndex: 0
styles:
  "--mdc-tab-text-label-color-default": "#eeeeee"
  "--mdc-theme-primary": "#ffffff"
  "--mdc-tab-indicator-active-indicator-color": "#ffffff"
tabs:
  # --- TAB 1: HEUTE ---
  - attributes:
      label: Heute
      icon: mdi:calendar-today
    card:
      type: custom:apexcharts-card
      graph_span: 24h
      span:
        start: day
      header:
        show: true
        title: SmartPrice
        show_states: true
        colorize_states: true
      now:
        show: true
        label: JETZT
        color: red
      all_series_config:
        stroke_width: 2
      apex_config:
        chart:
          height: 400
          zoom: { enabled: false }
          toolbar: { show: false }
          animations: { enabled: false }
        tooltip:
          enabled: true
          shared: true
          intersect: false
          followCursor: true
          fixed:
            enabled: true
            position: topLeft
          y:
            formatter: |
              EVAL:function(value) { return value.toFixed(3) + " €"; }
        xaxis:
          tooltip: { enabled: false }
          crosshairs: { show: true, position: back }
        fill:
          type: solid
          opacity: 0.2
      series:
        # 1. PREIS (Blaue Fläche)
        - entity: sensor.REST_Sensor
          name: Preis
          type: area
          curve: stepline
          color: "#00B0FF"
          stroke_width: 2
          yaxis_id: first
          show:
            in_header: false
            legend_value: false
          data_generator: |
            var data = entity.attributes.today;
            if(!data) return [];
            var points = [];
            var start = new Date(); start.setHours(0,0,0,0);
            var startTime = start.getTime();
            // 1-Minuten Raster für perfekten Touch
            for(var i=0; i < 1440; i++) {
              var timestamp = startTime + (i * 60 * 1000);
              var index = Math.floor(i / 15);
              if(index < data.length) {
                 var entry = data[index];
                 var val = (entry && entry.total !== undefined) ? entry.total : entry;
                 points.push([timestamp, val]);
              }
            }
            return points;
        # 2. LIVE PREIS (Weiße Linie)
        - entity: sensor.tibber_preis_live_echtzeit
          name: Aktuell
          type: line
          curve: stepline
          color: "#FFFFFF"
          stroke_width: 3
          float_precision: 3
          yaxis_id: first
          group_by:
            func: avg
            duration: 5min
          show:
            in_header: true
            legend_value: true
            in_chart: true
        # 3. SOC (Grün - Nur im Header)
        - entity: sensor.battery_state_of_charge
          name: SoC
          type: line
          color: "#00E676"
          yaxis_id: soc
          group_by:
            func: last
            duration: 10min
          show:
            in_header: true
            legend_value: true
            in_chart: false # Linie im Chart versteckt
      yaxis:
        - id: first
          decimals: 3
          apex_config:
            tickAmount: 5
        - id: soc
          opposite: true
          decimals: 0
          max: 100
          apex_config:
            tickAmount: 5

  # --- TAB 2: MORGEN ---
  - attributes:
      label: Morgen
      icon: mdi:calendar-arrow-right
    card:
      type: vertical-stack
      cards:
        # Bedingung: Keine Daten -> Info Text
        - type: conditional
          conditions:
            - entity: binary_sensor.tibber_preise_morgen_verfugbar
              state: "off"
          card:
            type: markdown
            content: >
              ### 🕒 Keine Daten für Morgen
              Die Tibber-Strompreise werden meist **ab ca. 13:00 Uhr** veröffentlicht.
        # Bedingung: Daten da -> Chart anzeigen
        - type: conditional
          conditions:
            - entity: binary_sensor.tibber_preise_morgen_verfugbar
              state: "on"
          card:
            type: custom:apexcharts-card
            graph_span: 24h
            span:
              start: day
              offset: +1d
            header:
              show: true
              title: SmartPrice (Morgen)
              show_states: true
              colorize_states: true
            all_series_config:
              stroke_width: 2
            apex_config:
              chart:
                height: 400
                zoom: { enabled: false }
                toolbar: { show: false }
                animations: { enabled: false }
              tooltip:
                enabled: true
                shared: true
                intersect: false
                followCursor: true
                fixed:
                  enabled: true
                  position: topLeft
                y:
                  formatter: |
                    EVAL:function(value) { return value.toFixed(3) + " €"; }
              xaxis:
                tooltip: { enabled: false }
                crosshairs: { show: true, position: back }
              fill:
                type: solid
                opacity: 0.2
            series:
              - entity: sensor.REST.Sensor
                name: Preis
                type: area
                curve: stepline
                color: "#9c27b0"
                stroke_width: 2
                yaxis_id: first
                show:
                  in_header: true
                  legend_value: false
                data_generator: |
                  var data = entity.attributes.tomorrow;
                  if(!data) return [];
                  var points = [];
                  var start = new Date(); 
                  start.setDate(start.getDate() + 1);
                  start.setHours(0,0,0,0);
                  var startTime = start.getTime();
                  for(var i=0; i < 1440; i++) {
                    var timestamp = startTime + (i * 60 * 1000);
                    var index = Math.floor(i / 15);
                    if(index < data.length) {
                       var entry = data[index];
                       var val = (entry && entry.total !== undefined) ? entry.total : entry;
                       points.push([timestamp, val]);
                    }
                  }
                  return points;
            yaxis:
              - id: first
                decimals: 3
                apex_config:
                  tickAmount: 5

---

☕ Support

Hat dir der Code geholfen oder nutzt du das Dashboard täglich? Dann freue ich mich riesig über einen virtuellen Kaffee!