Buttons to scroll in the x axis

[dbuezas]

This was requested in 2021 by @xalex75 in the Home Assistant Forum and tracked by issue #9
Since v3 it is possible with $fn 🎉

type: custom:plotly-graph
hours_to_show: 6h
entities:
  - entity: sensor.openweathermap_temperature
layout:
  updatemenus:
    - buttons:
        - args:
            - xaxis.range
            - $fn({getFromConfig}) => getFromConfig("visible_range").map(t => t - 1000*60*60)
          label: <
          method: relayout
        - args:
            - xaxis.range
            - $fn({getFromConfig}) => getFromConfig("visible_range").map(t => t + 1000*60*60)
          label: '>'
          method: relayout
      direction: right
      active: -1
      pad:
        r: 10
        t: 10
      type: buttons
      x: 1
      xanchor: right
      'y': 1
      yanchor: top

[dbuezas]

This can be combined with autorange_after_scroll: true too

[dbuezas]

This more complex example uses animations and implements custom range buttons.

type: custom:plotly-graph
hours_to_show: 6h
entities:
  - entity: sensor.openweathermap_temperature
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:
  updatemenus:
    - buttons:
        - $fn({vars}) => vars.scroll( '<', -.5)
        - $fn({vars}) => vars.scroll( '>', .5)
      direction: right
      active: -1
      pad:
        r: 10
        t: 10
      type: buttons
      x: 1
      xanchor: right
      'y': 1
      yanchor: top
    - buttons:
        - $fn({vars}) => vars.zoom( '1y', 24*365)
        - $fn({vars}) => vars.zoom( '1m', 24*30)
        - $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: 10
        t: 10
      type: buttons
      x: 0
      xanchor: left
      'y': 1
      yanchor: top

[Rvh91]

Hi, this looks pretty nice. Is there any documentation available on what the 'active', and 'pad' properties do? I tried playing around with them a bit but to be honest haven't noticed any changes in the plots.

[dbuezas]

Yes, see here:

• https://plotly.com/javascript/reference/layout/updatemenus/
• https://plotly.com/javascript/custom-buttons/

[andrzej-r]

I tried this code but it complains about vars.zoom not being a function. I am not familiar with JS enough to figure out why.

I like this solution not just because of animations (although they are nice, ideally they would have been enabled by default) but also because of control over the xaxis range - I would like to snap the range (both start and end) to full days/months/years. With xaxis.rangeselector I can only control the start date (via stepmode: todate), not the end date, which is always the current time.

[dbuezas]

Oh I see. The $fn and $ex are executed top to bottom. Glad to hear you succeeded!

[andrzej-r]

This is what I have now. I've been trying to set the initial xrange by calling vars.xrange(null) from layout.xaxis.xrange but this has proven to be unreliable (the code is being called all the time and occasionally it disagrees with user inputs). Any better ideas for handling the initial xrange? Regardless of that, I am very happy with how Plotly Graph Card works. Thank you.

type: custom:plotly-graph
hours_to_show: 6h
entities:
  - entity: sensor.openweathermap_temperature
fn: |
  $fn({getFromConfig, vars}) => {
    const range = getFromConfig("visible_range");
    const width = range[1] - range[0];
    vars.xrange = (h) => {
      if (h === null) h = width/1000/60/60;
      let start = new Date((range[0] + range[1])/2.0);
      start.setHours(0, 0, 0, 0);
      if (h >= 24*7) start.setFullYear(start.getFullYear(), start.getMonth(), start.getDate()-start.getDay());
      if (h >= 24*30) start.setDate(1);
      if (h >= 24*365) start.setMonth(0);
      return [start.getTime(), start.getTime() + 1000*60*60*h];
    }
    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": vars.xrange(h),
          }
        }
      ],
      label,
      method: "animate",
    })
  }
layout:
  xaxis:
    range: $fn({vars}) => vars.xrange(null)
  updatemenus:
    - buttons:
        - $fn({vars}) => vars.scroll( '<', -1.0)
        - $fn({vars}) => vars.scroll( '>', 1.0)
      direction: right
      active: -1
      pad:
        r: 10
        t: 10
      type: buttons
      x: 1
      xanchor: right
      'y': 1
      yanchor: top
    - buttons:
        - $fn({vars}) => vars.zoom( '1y', 24*365)
        - $fn({vars}) => vars.zoom( '1m', 24*31)
        - $fn({vars}) => vars.zoom( '1w', 24*7)
        - $fn({vars}) => vars.zoom( '1d', 24)
      direction: right
      active: -1
      pad:
        r: 10
        t: 10
      type: buttons
      x: 0
      xanchor: left
      'y': 1
      yanchor: top

[dbuezas]

I think that will never work well. Whenever the plot updates, everything is reevaluated and setting xrange overrides the user scrolling.
Maybe this achieves what you need:
hours_to_show: current_month

See here: dynamic-relative-time

[dbuezas]

Feel free to describe what you are trying to achieve and I'll try to help. In words, not in code

[andrzej-r]

Oh, well, hours_to_show: current_day does pretty much exactly what I wanted - default to showing a full current day on page load and not interfere with zooming or buttons. Thank you.

Essentially, I wanted the default view and views selected by buttons to be aligned with full days, weeks, months or years but still allow the user to zoom in out freely.