Tibber - Schedul prices upcoming 24 hours prices!

rak · March 29, 2024, 4:36pm

For me it still works.

ingo.niehues · April 4, 2024, 3:31pm

Tibber Bills Card

This Card display the consumption, the values from the bills and the cents per kwh for each monthly bill for tibber-customers.

Needed components

Apex-Charts-Card (HACS)

RESTful-Sensor in Configuration.yaml:

sensor:
  # Tibber Monthly Consumption Sensor
  - platform: rest
    unique_id: tibber_monthly_consumption
    name: Tibber Monthly Consumption
    resource: https://api.tibber.com/v1-beta/gql
    method: POST
    payload: '{ "query": "{ viewer { homes { consumption(resolution: MONTHLY, last: 12) { nodes { consumption cost unitPrice unitPriceVAT from to } } } } }" }'
    json_attributes_path: "$.data.viewer.homes[0].consumption"
    json_attributes:
      - nodes
    value_template: "{{ value_json.data.viewer.homes[0].consumption.nodes[0].consumption | float }}"
    scan_interval: 30
    headers:
      Authorization: !secret tibber_token
      Content-Type: application/json
    unit_of_measurement: kWh
    state_class: total

  # Tibber Monthly Cost Sensor
  - platform: rest
    unique_id: tibber_monthly_cost
    name: Tibber Monthly Cost
    resource: https://api.tibber.com/v1-beta/gql
    method: POST
    payload: '{ "query": "{ viewer { homes { consumption(resolution: MONTHLY, last: 12) { nodes { consumption cost unitPrice unitPriceVAT from to } } } } }" }'
    json_attributes_path: "$.data.viewer.homes[0].consumption"
    json_attributes:
      - nodes
    value_template: "{{ value_json.data.viewer.homes[0].consumption.nodes[0].cost | float }}"
    scan_interval: 30
    headers:
      Authorization: !secret tibber_token
      Content-Type: application/json
    unit_of_measurement: EUR
    state_class: total

YAML-Code for the Card

type: vertical-stack
cards:
  - type: custom:apexcharts-card
    card_mod:
      style: |
        ha-card {
          padding: 0px !important;
          border: none;
          box-shadow: none;
          margin-bottom: -3rem;
        }      
    yaxis:
      - min: 0
        id: Verbrauch
        apex_config:
          tickAmount: 5
          forceNiceScale: true
          decimalsInFloat: 0
          title:
            text: kWh
            rotate: -90
            style:
              color: var(--energy-grid-consumption-color)
          labels:
            style:
              colors: var(--energy-grid-consumption-color)
      - min: 0
        id: Kosten
        opposite: false
        apex_config:
          tickAmount: 5
          forceNiceScale: true
          decimalsInFloat: 0
          title:
            text: €
            rotate: 0
            style:
              color: var(--google-red)
          labels:
            style:
              colors: var(--google-red)
    apex_config:
      grid:
        show: true
        borderColor: '#E0E0E0'
      chart:
        height: 300px
        offsetY: -20
      tooltip:
        enabled: true
        followCursor: true
        x:
          show: true
        fixed:
          enabled: false
    header:
      show: true
      show_states: true
      colorize_states: true
      standard_format: false
    graph_span: 1y
    span:
      end: month
    series:
      - entity: sensor.tibber_monthly_consumption
        type: column
        color: var(--energy-grid-consumption-color)
        yaxis_id: Verbrauch
        data_generator: |
          return entity.attributes.nodes.map((start, index) => {
            return [new Date(start["from"]).getTime(), entity.attributes.nodes[index]["consumption"]];
          });             
  - type: custom:apexcharts-card
    card_mod:
      style: |
        ha-card {
          padding: 0px !important;
          border: none;
          box-shadow: none;
          margin-bottom: -3rem;
        }      
    yaxis:
      - min: 0
        id: KostenKWH
        opposite: true
        apex_config:
          tickAmount: 5
          forceNiceScale: true
          decimalsInFloat: 0
          title:
            text: C
            rotate: 0
            style:
              color: var(--google-yellow)
          labels:
            style:
              colors: var(--google-yellow)
      - min: 0
        id: Kosten
        opposite: false
        apex_config:
          tickAmount: 5
          forceNiceScale: true
          decimalsInFloat: 0
          offsetX: -20
          title:
            text: €
            rotate: 0
            style:
              color: var(--google-red)
          labels:
            style:
              colors: var(--google-red)
    apex_config:
      xaxis:
        tickAmount: 12
        labels:
          show: true
          rotate: 90
          position: top
      grid:
        show: true
        borderColor: '#E0E0E0'
      chart:
        height: 300px
        offsetY: -20
      tooltip:
        enabled: true
        shared: true
        followCursor: true
        x:
          show: true
    header:
      show: true
      show_states: true
      colorize_states: true
      standard_format: false
    graph_span: 1y
    span:
      end: month
    series:
      - entity: sensor.tibber_monthly_cost
        type: column
        color: var(--google-red)
        yaxis_id: Kosten
        float_precision: 2
        data_generator: |
          const tibber_gp = 5.03
          const tibber_nng = 0.1967
          const tibber_msg = 0.0459
          const tibber_mwst = 0.19
          return entity.attributes.nodes.map((start, index) => {
            return [new Date(start["from"]).getTime(), (((start["unitPrice"]-start["unitPriceVAT"])*start["consumption"])+tibber_gp+(((new Date(start["to"]).getTime() - new Date(start["from"]).getTime()) / (1000 * 60 * 60 * 24))*(tibber_nng+tibber_msg)))*(1+tibber_mwst) ];
          });             
      - entity: sensor.tibber_monthly_cost
        type: column
        color: var(--google-yellow)
        yaxis_id: KostenKWH
        float_precision: 2
        name: Kosten / kWh
        unit: C
        data_generator: |
          const tibber_gp = 5.03
          const tibber_nng = 0.1967
          const tibber_msg = 0.0459
          const tibber_mwst = 0.19
          return entity.attributes.nodes.map((start, index) => {
            return [new Date(start["from"]).getTime(), ((((start["unitPrice"]-start["unitPriceVAT"])*start["consumption"])+tibber_gp+(((new Date(start["to"]).getTime() - new Date(start["from"]).getTime()) / (1000 * 60 * 60 * 24))*(tibber_nng+tibber_msg)))*(1+tibber_mwst))/start["consumption"]*100 ];
          });

thecem · April 4, 2024, 6:12pm

Love it too, what is for a sensor ? May i missed it, but i couldn´t find a description for:

sensor.electricity_price_wester_esch_26b

mager · April 4, 2024, 9:31pm

unfortunaltely, your street address is encoded in the sensor name, like:
sensor.electricity_price_STREET_NUMBER
so you have to manually adjust all example code!

ingo.niehues · April 4, 2024, 9:56pm

Thats my Sensor from the tibber Integration

thecem · April 5, 2024, 6:42am

Thanks for your help! I got this finally working. How do you align the cards ? What happen if you click on tibber (chips on mushroom card) do you link back to source card, or did you link the tibber card from an other entity (like details price forecast)?

sensor.tibber_strompreisentwicklung_fazit is in my case unknown, following config:

- unique_id: tibber_strompreisentwicklung_fazit
        name: tibber_strompreisentwicklung_fazit
        select: "#app-root > div.jsx-850a60188453b536.app-container > div > section > div > div:nth-child(2) > div > div > div > div.Blocks.py-xl > div > div > div > p:nth-child(6)"

why is the fazit unknown?

Thanks for this cool card!

ingo.niehues · April 5, 2024, 1:11pm

Your Sensors shows “unknown” becase “name:” and “select:” must be on same level as “unique_id:”.

like so:

- unique_id: tibber_strompreisentwicklung_fazit
  name: tibber_strompreisentwicklung_fazit
  select: "#app-root > div.jsx-850a60188453b536.app-container > div > section > div > div:nth-child(2) > div > div > div > div.Blocks.py-xl > div > div > div > p:nth-child(6)"

The Tibber-Chip has no click-action. I use a sub-view-Tab in Home Assistant. This has its own “back-Button”.

This is the full code of my current version of these cards:

Tibber-Card

Download YAML-Code

Tibber Price Preview Card

Download YAML-Code

thecem · April 5, 2024, 2:34pm

The problem
Is that the sensor could only hold 255 characters an the text is 298 long.

Is there a possibility to split the txt?

thecem · April 5, 2024, 3:07pm


## {{ states("sensor.tibber_strompreisentwicklung_kw") }}
<ha-alert alert-type="info">{{ states("sensor.tibber_strompreisentwicklung_short") }}</ha-alert>
### {{ states("sensor.tibber_strompreisentwicklung_preise") }}
### {{ state_attr("sensor.tibber_strompreisentwicklung_preise","text_eins") }}

{{ state_attr("sensor.tibber_strompreisentwicklung_preise","text_zwei") }}

{{ state_attr("sensor.tibber_strompreisentwicklung_preise","text_drei") }}

{{ state_attr("sensor.tibber_strompreisentwicklung_preise","text_vier") }}
### {{ state_attr("sensor.tibber_strompreisentwicklung_preise","fazit") }}
[Quelle](https://tibber.com/de/strompreisentwicklung)

This is my solution, an additional attribute in the price sensor.

thecem · April 5, 2024, 3:33pm

Could you share your configs here without auth, since there are behind an auth on google drive?
THX a lot!!

ingo.niehues · April 5, 2024, 6:27pm

Sorry, i updated the links. They should now work.

Bieber83 · April 5, 2024, 7:50pm

Hallo Ingo,
wie hast du den denn Sensor Wöchentlicher Verbrauch ersteht?
Und die für die Rechnung mwst etc.

thecem · April 6, 2024, 4:57am

chapeau Ingo!! Nice Nice Nice!

how do you set the values for the input numbers? Only manualy or is there a place in tibber api where we could get this infomation?

                      const tibber_gp =
                      parseFloat(hass.states['input_number.tibber_grundpreis_je_monat'].state);

                      const tibber_nng =
                      parseFloat(hass.states['input_number.tibber_netznutzungsgebuhr_je_tag'].state);

                      const tibber_msg =
                      parseFloat(hass.states['input_number.tibber_messtellengebuhr_je_tag'].state);

                      const tibber_mwst =
                      parseFloat(hass.states['input_number.tibber_mehrwertsteuersatz'].state);

thecem · April 6, 2024, 5:02am

Du must die Sensoren noch selbst erstellen:

daily, weekly, monthly and yearly costs per kwh (replace “daily” with “weekly”, “monthly” or “yearly”)

ingo.niehues · April 6, 2024, 6:54am

Thank you! Only manual. I took the values from my last tibber bill. Don´t know if there is a place to get this values. Interesting idea.

Alexander-Wehner · April 7, 2024, 1:59pm

Hallo Ingo, ich habe die Code im meiner configuration.yaml eigetragen, leider zeigen die Sensoren mir “Unbekannt” an. Woran könnte das liegen?

ingo.niehues · April 8, 2024, 12:08pm

Dazu hab ich 2 Anmerkungen:

Hast du “sensor:” über dem “- platform: rest”? Ich vermute ja
Hast du deinen Tibber Token unter “secrets” angelegt? Mein Code geht davon aus dass du in der secrets.yaml einen Eintrag “tibber_token: <Token_von_tibber>” hast.

Schau mal unter Tibber Developer