Zonneplan ONE custom component

Btw, also figured out how to get the “now” value as well!

image

      - type: custom:plotly-graph
        title: Electriciteitsprijs
        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.p_now = parseFloat(hass.states['sensor.zonneplan_current_electricity_tariff'].state)
            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", "#227153").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") + ":00-" + 
                String(new Date((new Date(t).getTime()+3600000)).getHours()).padStart(2,"0") + ":00 : <b>" + 
                p.toFixed(3) + "</b> " + vars.unit_of_measurement)
            })
            console.log(vars)
          }
        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
            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
            x:
              - $ex vars.max.t
            "y":
              - $ex vars.max.p
          - entity: ""
            name: Now
            yaxis: y0
            showlegend: false
            line:
              width: 2
              dash: dot
              color: deepskyblue
            x: $ex [Date.now(), Date.now()]
            "y":
              - 0
              - 1
          - entity: ""
            yaxis: y0
            mode: markers
            textposition: top
            showlegend: true
            name: >-
              $fn ({vars}) => "Nu: " + vars.p_now.toFixed(3) + " " + vars.unit_of_measurement
            marker:
              symbol: diamond
              color: deepskyblue
            x: $ex [Date.now(), Date.now()]
            "y":
              - $ex vars.p_now
2 Likes