Statistic data is not renewed within graphs's live time

[marcelhoogantink]

Describe the bug
Having a bar-graph of statistic data, the graph is not renewed with an extra new bar when the set period of the graph is crossed by time.
In this link in point (2) example it is discussed in more detail.

Screenshots
Here is a screenshot of twice the same graph. The upper one was opened before the set period was crossed, the lower one after:

Yaml

Here's the latest code of the above screen-shot:

type: custom:plotly-graph
title: Plotly
hours_to_show: current_week
stack: false
entities:
  - entity: sensor.p1_meter_totale_energie_export
  - entity: sensor.p1_meter_totale_energie_import
defaults:
  entity:
    texttemplate: '%{y}'
    type: bar
    statistic: state
    period:
      0s: 5minute
      2h: hour
      6d: day
      360d: month
    filters:
      - delta
      - store_var: test
      - fn: |
          ({xs,ys,hass,statistics,get,meta,path}) =>   {   
            let statLast = statistics.length-1;
            let entityNr = path.split('.')[1];  
            let entity = get('entities['+entityNr+'].entity');  
            let lastStatisticsDateTime = new Date(statistics[statLast].end);   
            let lastStateDateTime = new Date(hass.states[entity].last_changed);   
            let stateLastStatic = statistics[statLast].state; 
            let stateLastState = hass.states[entity].state;
            let state = stateLastState-stateLastStatic; 
            if (state>0){   
              if (lastStateDateTime.getTime()>lastStatisticsDateTime.getTime()){ 
                xs.push(lastStatisticsDateTime);
                ys.push(state);
              }else{
                ys[statLast]+=state; 
              }
            }
            debugger;
            return ({ xs,ys }) 
          }
      - fn: console.log
refresh_interval: auto
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*h, Date.now()],
          }
        }
      ],
      label,
      method: "animate",
    })
  }
layout:
  barcornerradius: 15
  bargap: 0.1
  bargroupgap: 0.1
  height: 50%
  xaxis:
    tickangle: -45
  updatemenus:
    - buttons:
        - $fn({vars}) => vars.scroll( '<', -.5)
        - $fn({vars}) => vars.scroll( '>', .5)
      direction: right
      active: -1
      pad:
        r: 10
        t: 0
      type: buttons
      x: -0.1
      xanchor: left
      'y': -0.2
      yanchor: top
    - buttons:
        - $fn({vars}) => vars.zoom( '1y', 24*366)
        - $fn({vars}) => vars.zoom( '1m', 24*31)
        - $fn({vars}) => vars.zoom( '1w', 24*7)
        - $fn({vars}) => vars.zoom( '1d', 24)
        - $fn({vars}) => vars.zoom( '1h', 1)
      direction: right
      active: -1
      pad:
        r: 100
        t: 0
      type: buttons
      x: 0.1
      xanchor: left
      'y': -0.2
      yanchor: top

Additional context
I think the statistics of the entities in the graph should be updated right after a period is crossed by time. So the 5_minute-period every 5 minutes, the hour-period every hour, and so on.

[dbuezas]

Thanks.
Note to self: statistics don't auto update. Likely because the cache indicates that it already has requested data for the past period and statistics add data retroactively