Help with energi data service plot

[wormiedk]

I am trying to create a plot from energi data service in which I get the price forecast in a color coded fashion depending on the forecast price. I am pretty close to getting where I want but right now there is a gap when crossing a date. I have also tried something similar with type: bar plots but that shifts the data each time I add a bar which has a map_y statement.

So a few questions:

1. How do I avoid the gap?
2. Can it be coded in a smarter way?
3. Is there some way of forcing the range select buttons to always start at current time -1 h?

Thanks :)

The code for the card is here:

type: custom:plotly-graph
autorange_after_scroll: true
entities:
  - entity: sensor.energi_data_service
    line:
      width: 0
    fill: tozeroy
    fillcolor: rgba(0, 255, 0, 0.8)
    name: El pris
    legendgroup: group1
    filters:
      - fn: |
          ({meta}) => ({
             xs: meta.raw_today.map(({ hour }) => new Date(hour)),
             ys: meta.raw_today.map(({ price }) => price),
          })      
      - map_y: "y <= 2 ? y : 0 "
  - entity: sensor.energi_data_service
    line:
      width: 0
    fill: tozeroy
    fillcolor: rgba(255, 215, 0, 0.8)
    name: El pris 2
    legendgroup: group1
    showlegend: false
    filters:
      - fn: |
          ({meta}) => ({
             xs: meta.raw_today.map(({ hour }) => new Date(hour)),
             ys: meta.raw_today.map(({ price }) => price),
          })      
      - map_y: "y > 2 ? y : 0  "
      - map_y: "y <= 3.5 ? y : 0  "
  - entity: sensor.energi_data_service
    line:
      width: 0
    fill: tozeroy
    fillcolor: rgba(255, 0, 0, 0.8)
    name: El pris 3
    legendgroup: group1
    showlegend: false
    filters:
      - fn: |
          ({meta}) => ({
             xs: meta.raw_today.map(({ hour }) => new Date(hour)),
             ys: meta.raw_today.map(({ price }) => price),
          })      
      - map_y: "y > 3.5 ? y : 0  "
  - entity: sensor.energi_data_service
    line:
      width: 0
    fill: tozeroy
    fillcolor: rgba(0, 255, 0, 0.8)
    name: El pris
    legendgroup: group1
    showlegend: false
    filters:
      - fn: |
          ({meta}) => ({
             xs: meta.raw_tomorrow.map(({ hour }) => new Date(hour)),
             ys: meta.raw_tomorrow.map(({ price }) => price),
          })      
      - map_y: "y <= 2 ? y : 0 "
  - entity: sensor.energi_data_service
    line:
      width: 0
    fill: tozeroy
    fillcolor: rgba(255, 215, 0, 0.8)
    name: El pris 2
    legendgroup: group1
    showlegend: false
    filters:
      - fn: |
          ({meta}) => ({
             xs: meta.raw_tomorrow.map(({ hour }) => new Date(hour)),
             ys: meta.raw_tomorrow.map(({ price }) => price),
          })      
      - map_y: "y > 2 ? y : 0  "
      - map_y: "y <= 3.5 ? y : 0  "
  - entity: sensor.energi_data_service
    line:
      width: 0
    fill: tozeroy
    fillcolor: rgba(255, 0, 0, 0.8)
    name: El pris 3
    legendgroup: group1
    showlegend: false
    filters:
      - fn: |
          ({meta}) => ({
             xs: meta.raw_tomorrow.map(({ hour }) => new Date(hour)),
             ys: meta.raw_tomorrow.map(({ price }) => price),
          })
      - map_y: "y > 3.5 ? y : 0  "
  - entity: sensor.energi_data_service
    name: Prognose
    fill: tozeroy
    fillcolor: rgba(255, 165, 0,.1)
    line:
      color: rgba(255, 165, 0, 1)
      width: 1
      dash: dot
    filters:
      - fn: |
          ({meta}) => ({
             xs: meta.forecast.map(({ hour }) => new Date(hour)),
             ys: meta.forecast.map(({ price }) => price),
          })      
      - exponential_moving_average:
          alpha: 1
  - entity: ""
    name: Now
    yaxis: y9
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    x: $ex [Date.now(), Date.now()]
    "y":
      - 0
      - 1
hours_to_show: 12h
time_offset: 11h
layout:
  dragmode: pan
  xaxis:
    rangeselector:
      "y": 1.2
      buttons:
        - count: 1
          step: day
          stepmode: forward
        - count: 2
          step: day
          stepmode: forward

[dbuezas]

Hi there,
very interesting use case!

1. To avoid gaps and have less entities you could concatenate the data:

filters:
      - fn: |
          ({meta}) => ({
             xs: [...meta.raw_today, ...meta.raw_tomorrow].map(({ hour }) => new Date(hour)),
             ys: [...meta.raw_today, ...meta.raw_tomorrow].map(({ price }) => price),
          })

2. For a "smart" trick you can then put them in a var for reuse:

filters:
      - fn: |
          ...
      - store_var: forecast

Then in the subsequent ones you can use load_var: forecast instead of the fn

3. For finer control on range buttons you can use fully cistom buttons: Buttons to scroll in the x axis #231 (comment)

Regarding using vars instead, I don't know what a map_y would do that, but a filled scatter trace is probably better anyway.

Let me know how it goes!

Btw, you'll stilll get a gap with the dotted line, to avoid that you could either use offset or add an extra data point at the start with the last x value of the last future price.

[wormiedk]

Thanks a lot! I now use concatenation for all prices instead. Getting close :)

1. Is there a way of using "ifs" in the function? I only want to concatenate "tomorrow" if data is available.
2. Is it possible to force ticks e.g. every 2 hours but in a dynamic fashion. I tried adding with hour / date but I cannot replicate the default where date is only shown when it changes and not for each tick.

current function looks like this

type: custom:plotly-graph
autorange_after_scroll: true
entities:
  - entity: sensor.energi_data_service
    internal: true
    filters:
      - fn: |
          ({meta}) => ({
             xs: [...meta.raw_today, ...meta.raw_tomorrow, ...meta.forecast].map(({ hour }) => new Date(hour)),
             ys: [...meta.raw_today, ...meta.raw_tomorrow, ...meta.forecast].map(({ price }) => price),
          }) 
      - store_var: price
  - entity: sensor.energi_data_service
    line:
      width: 1
      color: black
    fill: tozeroy
    fillcolor: rgba(0, 255, 0, 0.6)
    name: El pris
    legendgroup: group1
    showlegend: false
    filters:
      - load_var: price
      - map_y: "y <= 2 ? y : 0 "
  - entity: sensor.energi_data_service
    line:
      width: 1
      color: black
    fill: tozeroy
    fillcolor: rgba(255, 215, 0, 0.6)
    name: El pris 2
    legendgroup: group1
    showlegend: false
    filters:
      - load_var: price
      - map_y: "y > 2 ? y : 0  "
      - map_y: "y <= 3.5 ? y : 0  "
  - entity: sensor.energi_data_service
    line:
      width: 1
      color: black
    fill: tozeroy
    fillcolor: rgba(255, 0, 0, 0.6)
    name: El pris 3
    legendgroup: group1
    showlegend: false
    filters:
      - load_var: price
      - map_y: "y > 3.5 ? y : 0  "
  - entity: ""
    name: Now
    yaxis: y9
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    x: $ex [Date.now(), Date.now()]
    "y":
      - 0
      - 1
hours_to_show: 12h
time_offset: 11h
fn: |
  $fn({getFromConfig, vars})=> {
    const range = getFromConfig("visible_range");
    const width = range[1] - range[0];
    vars.scroll = (label, p) => ({
      args: [
        {
          layout: {
            "xaxis.range": [range[0] + width*p, range[1] + width*p],
          }
        }, {
          transition: {
            duration: 150,
          }
        }
      ],
      label,
      method: "animate",
    })
    vars.zoom = (label, h) => ({
      args: [
        {
          layout: {
            "xaxis.range": [Date.now()-1000*60*60, Date.now()+1000*60*60*h],
          }
        }
      ],
      label,
      method: "animate",
    })
  }
layout:
  yaxis:
    gridcolor: black
  xaxis:
    gridcolor: black
  updatemenus:
    - buttons:
        - $fn({vars}) => vars.scroll( '<', -.5)
        - $fn({vars}) => vars.scroll( '>', .5)
      direction: right
      active: -1
      pad:
        r: 5
        t: 0
      type: buttons
      x: 1
      xanchor: right
      "y": 1
      yanchor: top
    - buttons:
        - $fn({vars}) => vars.zoom( '8h', 8)
        - $fn({vars}) => vars.zoom( '1d', 24)
        - $fn({vars}) => vars.zoom( '2d', 24*2)
        - $fn({vars}) => vars.zoom( '7d', 24*7)
      direction: right
      active: -1
      pad:
        r: 10
        t: 0
      type: buttons
      x: 0
      xanchor: left
      "y": 1
      yanchor: top

[wormiedk]

It looks like this in current state

[dbuezas]

for (1), yes, you can do whatever you want, it is raw javascript. Are you getting any errors? if so you can do meta.raw_tomorrow ?? [] so it falls back to an empty array and you don't need an explicit if.

for (2), not sure I know what you mean, I suggest you google how to do it in plotlyjs