xAxis range help

[simenopsahl]

TL;DR I need help with this part:

layout:
  xaxis:
    range: |
      $ex range = [new Date( datetime object of sensor state or first 'time' entry in list ),
                   new Date( last 'time' entry in list + set_interval hours or simply first 'time' entry +48 hours ))]

I have a sensor with a list attribute I am trying to get to display right. The span is always 48 hours but I can tweak the number of entries in the list to have a datapoint for every hour, every 2nd hour, every 6th hour etc
This is my sensor

sensor.pollen_forecast
  state: datetime object of when the data was updated (equal to the first 'time' entry in the attributes list)
  attributes:
    set_interval: 3 (or some factor of 48)
    every_chosen_interval: list I am using with dynamic number of entries <-
    every_3rd: list with always 16 entries

This is how the list looks with data for every 3rd hour

[
  {
    "time": "2024-05-12T18:00:00+02:00",
    "grass": 28,
    "tree": 122,
    "weed": 3
  },
  {
    "time": "2024-05-12T21:00:00+02:00",
    "grass": 23,
    "tree": 109,
    "weed": 12
  },
  {
    "time": "2024-05-13T00:00:00+02:00",
    "grass": 17,
    "tree": 88,
    "weed": 6
  },
  {
    "time": "2024-05-13T03:00:00+02:00",
    "grass": 26,
    "tree": 124,
    "weed": 5
  },
  {
    "time": "2024-05-13T06:00:00+02:00",
    "grass": 25,
    "tree": 122,
    "weed": 13
  },
  {
    "time": "2024-05-13T09:00:00+02:00",
    "grass": 34,
    "tree": 164,
    "weed": 6
  },
  {
    "time": "2024-05-13T12:00:00+02:00",
    "grass": 31,
    "tree": 184,
    "weed": 15
  },
  {
    "time": "2024-05-13T15:00:00+02:00",
    "grass": 29,
    "tree": 168,
    "weed": 1
  },
  {
    "time": "2024-05-13T18:00:00+02:00",
    "grass": 25,
    "tree": 119,
    "weed": 8
  },
  {
    "time": "2024-05-13T21:00:00+02:00",
    "grass": 36,
    "tree": 180,
    "weed": 18
  },
  {
    "time": "2024-05-14T00:00:00+02:00",
    "grass": 34,
    "tree": 170,
    "weed": 4
  },
  {
    "time": "2024-05-14T03:00:00+02:00",
    "grass": 59,
    "tree": 258,
    "weed": 10
  },
  {
    "time": "2024-05-14T06:00:00+02:00",
    "grass": 16,
    "tree": 90,
    "weed": 8
  },
  {
    "time": "2024-05-14T09:00:00+02:00",
    "grass": 22,
    "tree": 121,
    "weed": 3
  },
  {
    "time": "2024-05-14T12:00:00+02:00",
    "grass": 19,
    "tree": 91,
    "weed": 10
  },
  {
    "time": "2024-05-14T15:00:00+02:00",
    "grass": 24,
    "tree": 103,
    "weed": 4
  }
]

notice that the last entry is 3 hours shy of going the full 48 hours, so ideally I would like to add that number of hours to the last range of the graph. I would like to use the attribute of the chosen interval for this.

type: custom:plotly-graph
hours_to_show: 48
entities:
  - entity: sensor.tadata_pollen_forecast
    name: Grass
    unit_of_measurement: p/m³
    line:
      shape: spline
      color: green
      width: 0
    opacity: 0.5
    filters:
      - fn: |
          ({ meta }) => ({
            xs: meta.every_chosen_interval.map(({ time }) => new Date(time)),
            ys: meta.every_chosen_interval.map(({ grass }) => grass)
          })
  - entity: sensor.tadata_pollen_forecast
    name: Tree
    unit_of_measurement: p/m³
    line:
      shape: spline
      color: brown
      width: 0
    opacity: 0.5
    filters:
      - fn: |
          ({ meta }) => ({
            xs: meta.every_chosen_interval.map(({ time }) => new Date(time)),
            ys: meta.every_chosen_interval.map(({ tree }) => tree)
          })
  - entity: sensor.tadata_pollen_forecast
    name: Weed
    unit_of_measurement: p/m³
    line:
      shape: spline
      color: blue
      width: 0
    filters:
      - fn: |
          ({ meta }) => ({
            xs: meta.every_chosen_interval.map(({ time }) => new Date(time)),
            ys: meta.every_chosen_interval.map(({ weed }) => weed)
          })
    fill: tozeroy

I am unsure how to achieve what I want, because the start and end range depends on when the data of the sensor was updated or more specifically the data in the sensor. Not necessarily the current time of day.
I think I could put something like this in the 'layout' options

layout:
  xaxis:
    range: |
      $ex range = [new Date( datetime object of sensor state or first 'time' entry in list ),
                   new Date( last 'time' entry in list + set_interval hours or simply first 'time' entry +48 hours ))]

[simenopsahl]

I solved it
I added:

fn: >-
  $fn ({xs, vars}) => {vars.start = xs[0];vars.end = xs[xs.length-1];}

to one of my entities to store the start and end as variables.
Then I added

range: |
  $ex range = [new Date(vars.start),new Date(vars.end)]

to layout->xaxis

[simenopsahl]

Here's a screenshot and the code for the plotly graph. I am not sure why the 'Now' marker is not showing though
V2

V1

type: custom:plotly-graph
card_mod:
  style: |
    div#title {
      display: none !important;
    }
entities:
  - entity: sensor.tadata_pollen_forecast
    name: Ugress
    unit_of_measurement: p/m³
    mode: markers+lines
    line:
      shape: spline
      color: rgb(130, 170, 255)
      width: 3
    fillcolor: rgba(130, 170, 255, .15)
    fill: tozeroy
    yaxis: y1
    filters:
      - fn: |
          ({ meta }) => ({
            xs: meta.every_chosen_interval.map(({ time }) => new Date(time)),
            ys: meta.every_chosen_interval.map(({ weed }) => weed)
          })
    fn: $fn ({xs, vars}) => {vars.start = xs[0];vars.end = xs[xs.length-1];}
  - entity: sensor.tadata_pollen_forecast
    name: Gress
    unit_of_measurement: p/m³
    mode: markers+lines
    line:
      shape: spline
      color: rgb(139, 214, 73)
      width: 3
    fillcolor: rgba(139, 214, 73, .15)
    fill: tozeroy
    yaxis: y1
    filters:
      - fn: |
          ({ meta }) => ({
            xs: meta.every_chosen_interval.map(({ time }) => new Date(time)),
            ys: meta.every_chosen_interval.map(({ grass }) => grass)
          })
  - entity: sensor.tadata_pollen_forecast
    name: Trær
    unit_of_measurement: p/m³
    mode: markers+lines
    line:
      shape: spline
      color: rgb(87, 86, 86)
      width: 3
    fillcolor: rgba(87, 86, 86, .15)
    fill: tozeroy
    yaxis: y1
    filters:
      - fn: |
          ({ meta }) => ({
            xs: meta.every_chosen_interval.map(({ time }) => new Date(time)),
            ys: meta.every_chosen_interval.map(({ tree }) => tree)
          })
    fn: |
      $ex {
        let max = {y: -Infinity};
        for (let i = 0; i < ys.length; i++){
          const x = xs[i];
          const y = parseFloat(ys[i]);
          if (y > max.y) max = {x, y};
        }
        vars.max = max
      }
  - entity: ''
    name: Nå
    yaxis: y9
    showlegend: false
    line:
      width: 3
      dash: dot
      color: red
    X: $ex [Date.now(), Date.now()]
    'y':
      - 0
      - 1
config:
  scrollZoom: false
  disable_pinch_to_zoom: true
  displayModeBar: false
  staticPlot: true
layout:
  height: 180
  margin:
    l: 0
    r: 0
    t: 0
    b: 0
  showlegend: false
  hovermode: x
  annotations:
    - x: $ex vars.max.x
      'y': $ex vars.max.y
      text: $ex 'Maks ' + vars.max.y.toFixed(0)
      ax: 30
      ay: -40
  yaxis:
    visible: false
  yaxis9:
    visible: false
    fixedrange: true
  xaxis:
    visible: false
    range: |
      $ex range = [new Date(vars.start),new Date(vars.end)]