✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Rangeselector stepmode: forward

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.

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

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));

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

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

var range0 = currentRange[0];

return [range0, range1];