Load out of display range data points for accurate resample at start edge of graph.

[RareKiwi]

Hi there!
First of all, this card is amazing and is already going to change how we interpret our data. So this is just mostly just a visual wish fix.
We have our farms water systems added home assistant which helps notify of leaks, stuck ballcocks and overall water usage.

I've set up a plot with a 15 minute resample and derivate of our water total counter sensor, to provide an average flow readout, rather than guessing from the flow rate when our pump repressure is active.

I was wondering if it's possible to load data points from a separate slightly wider range (15 minutes earlier in my case) than what is shown so that the resample has a more accurate plot at the start of the graph, without having to scroll over and load it first.

type: custom:plotly-graph
title: 1hr Water flow rate
refresh_interval: 4s
hours_to_show: 1.25
entities:
  - entity: sensor.water_flow_rate
    fill: tozeroy
    line:
      width: 2
    texttemplate: <b>%{y:.1f}</b>LPM<br>
  - entity: sensor.total_water_used
    name: 15 Minute Average
    showlegend: true
    line:
      width: 1
      shape: spline
    show_value: false
    texttemplate: <b>%{y:.01f}</b>LPM<br>
    filters:
      - resample: 15m
      - derivate: m
    mode: lines+markers+text
    textfont:
      color: darkorange
      size: 8
    textposition: left
    marker:
      size: 6
    yaxis:
      - visible: false
defaults:
  entity:
    show_value: true
  yaxes:
    griddash: dot
    range:
      - 0
      - 26
    fixedrange: true
    side: left

Also here's a 24 hour plot with both sensors shown.

[dbuezas]

Very cool! Thanks for the kind words, I'm always happy to hear about the interesting things others do with the card :)

To fetch more data than what is visible, this trick may work:

• Add a second entry of the same entity
• Put a time_offset: in that entry of your 15m. This will force the card to fetch more than the visible x range.
• Visually check that everything works and the offset is in the right direction, and the data is used by your first entry
• finally, mark it as internal: true so it is not visible

[RareKiwi]

Hmm, no luck. I tried with the offset entry defined before or after the visible entry (also tried a bit more than just 15 minutes offset).
Maybe I'd have to have two internal graphs, a normal fetch and and an offset one, store the values, then in a 3rd visible entity, trim the overlapping time out of the offset, undo the offset, then combine the two sets together before doing the resample.

[dbuezas]

I see, you are right.
Your idea does work:

type: custom:plotly-graph
hours_to_show: 2
title: Fetch more than visible example
entities:
  - entity: sensor.teich_temperature
    name: past
    time_offset: 15m
    opacity: .5
    line:
      width: 5
    filters:
      - map_x: x - 1000*60*15 # 15 minutes
      - store_var: past
  - entity: sensor.teich_temperature
    name: present
    opacity: .5
    line:
      width: 5
    filters:
      - filter: x > vars.past.xs.at(-1)
      - store_var: present
  - entity: sensor.teich_temperature
    name: result
    filters:
      - fn: |
          ({ vars }) => ({
            xs: vars.past.xs.concat(vars.present.xs),
            ys: vars.past.ys.concat(vars.present.ys)
          })       
      - sliding_window_moving_average: # best for smoothing
          window_size: 30
          extended: true # when true, smaller window sizes are used on the extremes.

[RareKiwi]

Awesome! I'll give this a try tomorrow and mark as solved if I have no more questions.

[RareKiwi]

Working beautifully. That would have taken me forever to work out, much appreciated!

type: custom:plotly-graph
hours_to_show: 1
refresh_interval: 5
title: 1hr Water flow rate
entities:
  - entity: sensor.water_flow_rate
    fill: tozeroy
    line:
      width: 2
    texttemplate: <b>%{y:.1f}</b>LPM<br> # Remove some decimal places
    show_value: true
  - entity: sensor.total_water_used
    name: past_internal
    time_offset: 30m
    filters:
      - map_x: x - 1000*60*30 # 30 minutes. Good if zoomed out.
      - store_var: past
    internal: true
  - entity: sensor.total_water_used
    name: present_internal
    filters:
      - filter: x > vars.past.xs.at(-1)
      - store_var: present
    internal: true
  - entity: sensor.total_water_used
    name: 15 Minute Average
    show_value: false
    texttemplate: <b>%{y:.01f}</b> <br> # Remove some decimal places
    filters:
      - fn: |
          ({ vars }) => ({
            xs: vars.past.xs.concat(vars.present.xs),
            ys: vars.past.ys.concat(vars.present.ys)
          }) 
      - filter: y !== null # Joins line if missing sensor data
      - resample: 15m
      - derivate: m
    mode: lines+markers+text
    line:
      width: 3
      shape: spline
      color: darkorange
    textfont:
      color: darkorange
      size: 12
    textposition: top
    marker:
      size: 8
    yaxis:
      - visible: false
defaults:
  yaxes:
    griddash: dot
    range:
      - 0
      - 25.2 # Add a bit extra to have top border
    fixedrange: true
    side: left
layout:
  font:
    family: Roboto,Noto,sans-serif
    color: $fn ({css_vars}) => css_vars['primary-text-color']

[dbuezas]

🎉
This could ve a feature. Something like "overfetch: 25%"

[dbuezas]

I just realized you could use $ex (+get("visible_range")[1] - get("visible_range")[0]) * 0.25 so the overfetch depends on zoom level