Zonneplan ONE custom component

That should be fine… works with apex; date/time is stored as UTC an HA will automatically show the applied time zone; same should be for template sensors.

I would need to check manual. But take below sensor. It compares with now().date(); Are you sure it then automatically takes 1 hour from the previous day and not just the 23 hours it can find for today?

- platform: template
  sensors:
    avg_energy_price:
      friendly_name: Average current energy price
      value_template: >
        {% set ns = namespace(sum = 0, count = 0) %}
        {% for item in state_attr('sensor.zonneplan_current_electricity_tariff', 'forcast') -%}
          {% if as_datetime(item.datetime).date() == now().date()  %}
            {% set ns.sum = ns.sum + item.price %}
            {% set ns.count = ns.count + 1 %}
          {% endif %}
        {%- endfor %}
        {{ (ns.sum/ns.count/100000) }}

If you change the data generator to below you can also get extremas in the graph:

            return entity.attributes.forcast.map((entry) => {
              return [new Date(entry.datetime).getTime(), entry.price /100000] ;
            });

For the colors in the graph: Instead of a static value to set the color threshold you can also adjust based on (in my case) average.

Example below

  - type: custom:config-template-card
    variables:
      MOVINGAVERAGE: states['sensor.avg_energy_price_cnt']
    entities:
      - ${MOVINGAVERAGE.entity_id}
    card:
      type: custom:apexcharts-card
      apex_config:
        chart:
          height: 200px
          fontFamily: Raleway,sans-serif
        xaxis:
          labels:
            format: HH
        legend:
          show: false
        stroke:
          width: 2
        plotOptions:
          bar:
            columnWidth: 100%
        grid:
          show: true
          borderColor: '#00000030'
          strokeDashArray: 4
          position: back
        dataLabels:
          offsetY: -8
          background:
            opacity: 0.01
            enabled: true
            foreColor: '#CF7524'
            padding: 2
            borderRadius: 4
            borderWidth: 0
          style:
            fontSize: 9px
            color: rgb(200,200,200)
      experimental:
        color_threshold: true
      graph_span: 30h
      span:
        start: day
        offset: +4h
      update_interval: +1h
      header:
        title: Zonneplan Forecast
        show: false
      now:
        show: true
        label: NOW
      series:
        - entity: sensor.zonneplan_current_electricity_tariff
          color_threshold:
            - value: ${MOVINGAVERAGE.state * .75}
              color: '#228B22'
            - value: ${MOVINGAVERAGE.state * 1}
              color: '#d35400'
            - value: ${MOVINGAVERAGE.state * 1.25}
              color: '#c0392b'
          show:
            extremas: true
          type: column
          float_precision: 2
          data_generator: |
            return entity.attributes.forcast.map((entry) => {
              return [new Date(entry.datetime).getTime(), entry.price /100000] ;
            });
      yaxis:
        - id: '1'
          decimals: 1
          min: 0.1
          apex_config:
            tickAmount: 4

This one has an attribute with the last date_time of update:

- platform: template
  sensors:
    zonneplan_gas_prijs:
      friendly_name: "Zonneplan Gasprijs"
      unit_of_measurement: €/m³
      device_class: monetary
      value_template: >-
        {% for i in states.sensor.enever_gasprijs.attributes.data %}
        {{ i.prijsZP }}
        {% endfor %}
      attribute_templates:
        datum: >-
          {% for i in states.sensor.enever_gasprijs.attributes.data %}
          {{ i.datum }}
          {% endfor %}

@Tyfoon Cool graph. I have it working.
How did you make the circles with the pricing and the prediction of the cheapest?

The sensors on top are using ‘mushroom’ custom lovelace templates. Below is the full code.

The sensors are template sensors. Most of that code can be found in this post

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.avg_energy_price
        secondary: >
          {{ states('sensor.lowest_price') | round(1) }}/{{
          states('sensor.highest_price') | round(1) }} 
        primary: |
          {{ states('sensor.avg_energy_price_CNT') | round(2) }} € 
        icon: mdi:power-plug
        icon_color: orange
        tap_action:
          action: more-info
      - type: custom:mushroom-template-card
        entity: sensor.hours_low_coming
        secondary: |
          {{ states('sensor.hours_low_coming_short') | round(0) }} urgent
        primary: >
          {{ states('sensor.hours_low_coming') | round(0) }}/{{
          states('sensor.hours_low_coming_far') | round(0) }} H
        icon: mdi:clock-check
        icon_color: orange
        tap_action:
          action: more-info
      - type: custom:mushroom-template-card
        entity: sensor.zonneplan_current_gas_tarriff_fixed
        secondary: |
          Gas
        primary: >
          {{ states('sensor.zonneplan_current_gas_tarriff_fixed') | round(2) }}
          € 
        icon: mdi:gas-burner
        icon_color: orange
        tap_action:
          action: more-info
  - type: custom:config-template-card
    variables:
      MOVINGAVERAGE: states['sensor.avg_energy_price_cnt']
    entities:
      - ${MOVINGAVERAGE.entity_id}
    card:
      type: custom:apexcharts-card
      apex_config:
        chart:
          height: 200px
          fontFamily: Raleway,sans-serif
        xaxis:
          labels:
            format: HH
        legend:
          show: false
        stroke:
          width: 2
        plotOptions:
          bar:
            columnWidth: 100%
        grid:
          show: true
          borderColor: '#00000030'
          strokeDashArray: 4
          position: back
        dataLabels:
          offsetY: -8
          background:
            opacity: 0.01
            enabled: true
            foreColor: '#CF7524'
            padding: 2
            borderRadius: 4
            borderWidth: 0
          style:
            fontSize: 9px
            color: rgb(200,200,200)
      experimental:
        color_threshold: true
      graph_span: 30h
      span:
        start: day
        offset: +4h
      update_interval: +1h
      header:
        title: Zonneplan Forecast
        show: false
      now:
        show: true
        label: NOW
      series:
        - entity: sensor.zonneplan_current_electricity_tariff
          color_threshold:
            - value: ${MOVINGAVERAGE.state * .75}
              color: '#228B22'
            - value: ${MOVINGAVERAGE.state * 1}
              color: '#d35400'
            - value: ${MOVINGAVERAGE.state * 1.25}
              color: '#c0392b'
          show:
            extremas: true
          type: column
          float_precision: 2
          data_generator: |
            return entity.attributes.forcast.map((entry) => {
              return [new Date(entry.datetime).getTime(), entry.price /100000] ;
            });
      yaxis:
        - id: '1'
          decimals: 1
          min: 10
          apex_config:
            tickAmount: 4

I cant seem to get this working.
The state of sensor.avg_energy_price = ‘Unavailable’ and i think due to this option i cant get the card to work!

Any clue what I need to fix / change?

Do you have sensor.lowest_price and sensor.highest_price created?

like @Hmmbob suggests; Did you create the sensors? Below is what I use. Also please note that the dev of this integration recently changed something. There was a spelling mistake in the sensor attributes and it was changed from “forcast” to “forecast”.

The yaml for the 2 sensors I use below:

- platform: template
  sensors:
    avg_energy_price_cnt:
      friendly_name: Average current energy price cent
      unique_id: avg_energy_price_cnt
      value_template: >
        {% set ns = namespace(sum = 0, count = 0) %}
        {% for item in state_attr('sensor.zonneplan_current_electricity_tariff', 'forecast') -%}
          {% if as_datetime(item.datetime).date() == now().date()  %}
            {% set ns.sum = ns.sum + item.price %}
            {% set ns.count = ns.count + 1 %}
          {% endif %}
        {%- endfor %}
        {{ (ns.sum/ns.count/100000) }}

- platform: template
  sensors:
    avg_energy_price:
      friendly_name: Average current energy price
      unique_id: avg_energy_price
      device_class: monetary
      value_template: >
        {% set ns = namespace(sum = 0, count = 0) %}
        {% for item in state_attr('sensor.zonneplan_current_electricity_tariff', 'forecast') -%}
          {% if as_datetime(item.datetime).date() == now().date()  %}
            {% set ns.sum = ns.sum + item.price %}
            {% set ns.count = ns.count + 1 %}
          {% endif %}
        {%- endfor %}
        {{ (ns.sum/ns.count/10000000) }}

Thank you! The issue was ‘Forcast’ instead of Forecast…
I didn’t know this was changed, thanks!

After the latest zonneplan.one update, this code is not working anymore.

template:

  - sensor:

    - name: zonneplan_cheapest_hour

      state: >

        {% set cheapest_hour_next_ten_hours = state_attr('sensor.zonneplan_current_electricity_tariff', 'forcast')

                    | selectattr('datetime', '>', utcnow().isoformat())

                    | selectattr('datetime', '<', (utcnow() + timedelta(hours = 13)).isoformat())

                    | sort(attribute='price')  

                    | first %}

        {{ (cheapest_hour_next_ten_hours.price /10000000)|round(2) }}

        {{ as_local(as_datetime(cheapest_hour_next_ten_hours.datetime)).strftime('%d-%m - %H:%M') }}

change forcast to forecast :+1:

Thanks man! This is great! Well done.

1 Like

Hi All,

Has somebody a solution for the montly costs, based on the zonneplan tariff as sensor data? I would like to show them on my dashboard.

Thanks :slight_smile:

Use the energy dashboard and set cost to variable/using sensor. If you use the zonneplan price sensor then the energy dashboard will calculate it for you and store the values in long term statistics.

Hi Ronald,

Thanks for your reply. I have the data in the energy dashboard and also to total cost and now I want to display these on the lovelace. I have no clue how, coming from homey where I first pushed these values using mqtt to the lovelace. But my homey died so going all the way into HA :slight_smile:

Thanks, John

Hi John, you can use the statics card:

type: statistic
entity: sensor.gas_consumption_cost
period:
  calendar:
    period: month
stat_type: change

That picks up the cost change from the LT statistics database. You may need to change the sensor as this is mine. Hope this is helpful.

Ronald

1 Like

And with the statistics card you can make a Graph as well:

chart_type: bar
period: month
days_to_show: 1000
type: statistics-graph
entities:
  - sensor.gas_consumption_cost
stat_types:
  - change
1 Like

Yeah, found it, using the ‘dev tools’ and then the tab ‘statics’ for the correct entities and displaying it with your yaml.

Thanks a lot! :+1:t2:

Created a new zonneplan chart using plotly-graph from HACS. Uses same colors as in the zonneplan app, and shows all from forecast scrollable over time. Time window and pricing shown on mouse over. Reset button to reset to default setting after scrolling. See image and cde attached.

plotly

Edit: updated the api change of may 10 (see below)

type: custom:plotly-graph
title: Zonneplan electricity forecast
hours_to_show: 18
time_offset: 14h
fn: |
  $fn ({ hass, vars }) => {
    vars.x = []; vars.y = []; vars.color = []; vars.hover = []
    vars.min = {p: 999,t: null}; vars.max = {p:-999,t:null}
    vars.ymin = 999; vars.ymax = -999
    vars.unit_of_measurement = hass.states['sensor.zonneplan_current_electricity_tariff'].attributes.unit_of_measurement
    hass.states['sensor.zonneplan_current_electricity_tariff']?.attributes?.forecast?.map(e => {
      var t = new Date(e.datetime).getTime()+1800000 
      var p = e.electricity_price/10000000
      var c = e.tariff_group.replace("low", "#00a964").replace("normal", "#365651").replace("high","#ed5e18")
      if (t>=Date.now()-1800000) {
        if (p<vars.min.p) vars.min = {p,t,c}
        if (p>vars.max.p) vars.max = {p,t,c}
      }
      if (p<vars.ymin) vars.ymin = p
      if (p>vars.ymax) vars.ymax = p
      vars.x.push(t)
      vars.y.push(p)
      vars.color.push(c)
      vars.hover.push(String(new Date(t).getHours()).padStart(2,"0") + "-" + 
        String(new Date((new Date(t).getTime()+3600000)).getHours()).padStart(2,"0") + ": <b>" + 
        p.toFixed(3) + "</b> " + vars.unit_of_measurement)
    })
  }
layout:
  yaxis:
    fixedrange: true
    tickformat: .2f
    range: $fn ({vars}) => [ vars.ymin-0.02, vars.ymax+0.02 ]
  xaxis:
    tickformat: '%H:%M'
config:
  displayModeBar: false
entities:
  - entity: ''
    unit_of_measurement: $ex vars.unit_of_measurement
    name: Tariff
    showlegend: false
    x: $ex vars.x
    'y': $ex vars.y
    marker:
      color: $ex vars.color
    type: bar
    hovertemplate: $ex vars.hover
  - entity: ''
    mode: markers
    textposition: top
    showlegend: true
    name: >-
      $fn ({vars}) => vars.min.p.toFixed(3) + " " + vars.unit_of_measurement + "
      @ " + new Date(vars.min.t).getHours() + ":00"
    yaxis: y0
    marker:
      symbol: diamond
      color: $ex vars.min.c
      opacity: 0.7
    x:
      - $ex vars.min.t
    'y':
      - $ex vars.min.p
  - entity: ''
    mode: markers
    textposition: top
    showlegend: true
    name: >-
      $fn ({vars}) => vars.max.p.toFixed(3) + " " + vars.unit_of_measurement + "
      @ " +  new Date(vars.max.t).getHours() + ":00"
    yaxis: y0
    marker:
      symbol: diamond
      color: $ex vars.max.c
      opacity: 0.7
    x:
      - $ex vars.max.t
    'y':
      - $ex vars.max.p
  - entity: ''
    name: Now
    yaxis: y9
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    x: $ex [Date.now(), Date.now()]
    'y':
      - 0
      - 1
3 Likes