Rangeselector stepmode: forward

plotly.js
1

Does anyone have an implementation where they’ve used a rangeselector but had the buttons have a forward stepmode? Currently, when you click a button (6m, for instance), the plot will show you whatever the latest date in your current view us, minus 6 months. I’d like for the plot to show you the earliest date in your current view, plus 6 months. Any help would be appreciated. I’m more than willing to work through it, but I can’t even find the code that controls the stepmode behavior in the source code.

1 Like
2

Not at the moment, but this would be a cool feature.

3

I was able to throw together a solution. The getXRange function has the code for what happens for stepmode: backward and todate. I edited backward so it would have forward functionality instead (didn’t want to change the variable name because I wasn’t sure what I might break). I found the getXRange function in plotly.js and then minified it.

function getXRange(axisLayout, buttonLayout) {
var currentRange = axisLayout.range;
var base = new Date(axisLayout.r2l(currentRange[0]));

var step = buttonLayout.step,
    count = buttonLayout.count;

var range1;

switch(buttonLayout.stepmode) {
    case 'backward':
        range1 = axisLayout.l2r(+d3.time[step].utc.offset(base, count));
        break;

    case 'todate':
        var base2 = d3.time[step].utc.offset(base, -count);

        range1 = axisLayout.l2r(+d3.time[step].utc.ceil(base2));
        break;
}

var range0 = currentRange[0];

return [range0, range1];

}

4

I have exactly the same question, has anyone made some progress with this?

5

Here is solution:
in minified plotly.min.js
change this:

{var r,a=t.range,o=new Date(t.r2l(a[1])),s=e.step,l=n[“utc”+i(s)],u=e.count;switch(e.stepmode){case"backward":r=t.l2r(+l.offset(o,-u));break;case"todate":var c=l.offset(o,-u);r=t.l2r(+l.ceil(c))}return[r,a[1]]}

to this:

{var r1,r2,i=e.range,fullrange=e.rangeslider.range,o=new Date(e.r2l(i[1])),l=t.step,s=n[“utc”+a(l)],c=t.count;switch(t.stepmode){case"backward":r1=e.l2r(+s.offset(o,-c));r1 = r1 > fullrange[0] ? r1 : fullrange[0];r2=e.l2r(+s.offset(new Date(e.r2l(r1)),c));r2 = r2 < fullrange[1] ? r2 : fullrange[1];break;case"todate":var u=s.offset(o,-c);r1=e.l2r(+s.ceil(u));r2=i[1];}return[r1,r2]}

And add this to layout.xaxis:

rangeslider: {
autorange: false,
range: [‘2024-01-01’, ‘2024-02-01’)]
}