Plotly interactive Graph Card

[marcelhoogantink]

Hi, discovered this great Plotly extension, and created this power-energy history-graph using some example-code from some examples.
I added a function to add the the ‘live’ state info of the entity to this graph. As you can see when using this, the last column is continuously growing. (No energy-export here, due to sun-set )

type: custom:plotly-graph
title: Plotly
hours_to_show: current_week
time_offset: 8h
stack: false
defaults:
  entity:
    unit_of_measurement: kWh
    texttemplate: '%{y}'
    type: bar
    statistic: state
    period:
      0s: 5minute
      2h: hour
      6d: day
      360d: month
entities:
  - entity: sensor.p1_meter_totale_energie_import
    filters:
      - delta
      - fn: |
          ({xs,ys,hass,statistics}) =>   {
            let statLast = statistics.length-1;
            let lastStatisticsDateTime = new Date(statistics[statLast].end);   
            let lastStateDateTime = new Date(hass.states["sensor.p1_meter_totale_energie_import"].last_changed);   
            let stateLastStatic = statistics[statLast].state; 
            let stateLastState = hass.states["sensor.p1_meter_totale_energie_import"].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 }) 
          }
      - store_var: import
      - fn: console.log
      - fn: |
          ({hass}) => {
            console.log(hass.states["sensor.p1_meter_totale_energie_export"])
          }
  - entity: sensor.p1_meter_totale_energie_export
    filters:
      - delta
      - fn: |
          ({xs,ys,hass,statistics}) =>   {
            let statLast = statistics.length-1;
            let lastStatisticsDateTime = new Date(statistics[statLast].end);   
            let lastStateDateTime = new Date(hass.states["sensor.p1_meter_totale_energie_export"].last_changed);   
            let stateLastStatic = statistics[statLast].state; 
            let stateLastState = hass.states["sensor.p1_meter_totale_energie_export"].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 }) 
          }
      - store_var: export
      - fn: console.log
      - fn: |
          ({hass}) => {
            console.log(hass.states["sensor.p1_meter_totale_energie_export"])
          }
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

So far so good.

Now I have two questions, maybe some one can help, as I do not find a solution to the questions:

1. As you can see I copied the code for the ‘live’ data for the last bar (the fn: code within the entity sections), and changed to entity-name in the hass.states[ ]. I did so, because I need the name of the entity to get the current state of the entity. My question here is:
   Is this name accessible as a variable, so I can make this one central code?

2. See these two graphs, both showing the same page.

The upper one is opened at 18:52 hours, and the lower one is opened at 18:56 hours.
As you can see the upper one is continuing to increase in the 18:50 column, while the lower one has a new 18:55 column and is increased there.
I assume that the statistics are not updated while viewing the page. Is there a option to update the statistics within the view-time of this page?