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

[r0656865]

Hello,
This looks really nice! The only downside I noticed is that the buttons can be in in front of the graph. To fix this, I tried to make the max-value of the y-axis like 20% bigger. For example, if my graph shows data with a y-axis from 0 to 10, I would like to change that to 0 to 12 so that the buttons are not in the way of my graph.
Would this be possible?

I would imagine the sollution to look something like this:

  const range = getFromConfig("visible_range");
  const yMin = range[2];
  const yMax = range[3];
  const yOffset = (yMax - yMin) * 0.1; // Calculate 10% of current range

 // Extend the Y-axis range
  vars.yaxis = {
    range: [yMin, yMax + yOffset],
  };

But I have no idea if yMin and yMax are the third and fourth element of "getFromConfig"
Is there documentation what information we can get from getFromConfig?

Thank you in advance!

[dbuezas]

You can make the y of the buttons bigger than 1 and that should render them above the plotting area (make the plotting area go less high)

[dbuezas]

If you want to get the y extent of data you have to compute it yourself, but with the trick above that shouldn't be necessary

[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.