Zonneplan ONE custom component

Share your Projects!
109

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
5 Likes