Feature: Range selectors

src/components/legend/draw.js

@@ -402,12 +402,12 @@ function repositionLegend(gd, traces) {
         else {
             // approximation to height offset to center the font
             // to avoid getBoundingClientRect
-            textY = tHeight * (0.3 + (1-tLines) / 2);
-            text.attr('y',textY);
-            tspans.attr('y',textY);
+            textY = tHeight * (0.3 + (1 - tLines) / 2);
+            text.attr('y', textY);
+            tspans.attr('y', textY);
         }
 
-        tHeightFull = Math.max(tHeight*tLines, 16) + 3;
+        tHeightFull = Math.max(tHeight * tLines, 16) + 3;
 
         g.attr('transform',
             'translate(' + borderwidth + ',' +

src/components/rangeselector/attributes.js

@@ -0,0 +1,97 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var fontAttrs = require('../../plots/font_attributes');
+var colorAttrs = require('../color/attributes');
+var extendFlat = require('../../lib/extend').extendFlat;
+var buttonAttrs = require('./button_attributes');
+
+buttonAttrs = extendFlat(buttonAttrs, {
+    _isLinkedToArray: true,
+    description: [
+        'Sets the specifications for each buttons.',
+        'By default, a range selector comes with no buttons.'
+    ].join(' ')
+});
+
+module.exports = {
+    visible: {
+        valType: 'boolean',
+        role: 'info',
+        description: [
+            'Determines whether or not this range selector is visible.',
+            'Note that range selectors are only available for x axes of',
+            '`type` set to or auto-typed to *date*.'
+        ].join(' ')
+    },
+
+    buttons: buttonAttrs,
+
+    x: {
+        valType: 'number',
+        min: -2,
+        max: 3,
+        role: 'style',
+        description: 'Sets the x position (in normalized coordinates) of the range selector.'
+    },
+    xanchor: {
+        valType: 'enumerated',
+        values: ['auto', 'left', 'center', 'right'],
+        dflt: 'left',
+        role: 'info',
+        description: [
+            'Sets the range selector\'s horizontal position anchor.',
+            'This anchor binds the `x` position to the *left*, *center*',
+            'or *right* of the range selector.'
+        ].join(' ')
+    },
+    y: {
+        valType: 'number',
+        min: -2,
+        max: 3,
+        role: 'style',
+        description: 'Sets the y position (in normalized coordinates) of the range selector.'
+    },
+    yanchor: {
+        valType: 'enumerated',
+        values: ['auto', 'top', 'middle', 'bottom'],
+        dflt: 'bottom',
+        role: 'info',
+        description: [
+            'Sets the range selector\'s vertical position anchor',
+            'This anchor binds the `y` position to the *top*, *middle*',
+            'or *bottom* of the range selector.'
+        ].join(' ')
+    },
+
+    font: extendFlat({}, fontAttrs, {
+        description: 'Sets the font of the range selector button text.'
+    }),
+
+    bgcolor: {
+        valType: 'color',
+        dflt: colorAttrs.lightLine,
+        role: 'style',
+        description: 'Sets the background color of the range selector buttons.'
+    },
+    bordercolor: {
+        valType: 'color',
+        dflt: colorAttrs.defaultLine,
+        role: 'style',
+        description: 'Sets the color of the border enclosing the range selector.'
+    },
+    borderwidth: {
+        valType: 'number',
+        min: 0,
+        dflt: 0,
+        role: 'style',
+        description: 'Sets the width (in px) of the border enclosing the range selector.'
+    }
+};

src/components/rangeselector/button_attributes.js

@@ -0,0 +1,54 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+
+module.exports = {
+    step: {
+        valType: 'enumerated',
+        role: 'info',
+        values: ['month', 'year', 'day', 'hour', 'minute', 'second', 'all'],
+        dflt: 'month',
+        description: [
+            'The unit of measurement that the `count` value will set the range by.'
+        ].join(' ')
+    },
+    stepmode: {
+        valType: 'enumerated',
+        role: 'info',
+        values: ['backward', 'todate'],
+        dflt: 'backward',
+        description: [
+            'Sets the range update mode.',
+            'If *backward*, the range update shifts the start of range',
+            'back *count* times *step* milliseconds.',
+            'If *todate*, the range update shifts the start of range',
+            'back to the first timestamp from *count* times',
+            '*step* milliseconds back.',
+            'For example, with `step` set to *year* and `count` set to *1*',
+            'the range update shifts the start of the range back to',
+            'January 01 of the current year.'
+        ].join(' ')
+    },
+    count: {
+        valType: 'number',
+        role: 'info',
+        min: 0,
+        dflt: 1,
+        description: [
+            'Sets the number of steps to take to update the range.',
+            'Use with `step` to specify the update interval.'
+        ].join(' ')
+    },
+    label: {
+        valType: 'string',
+        role: 'info',
+        description: 'Sets the text label to appear on the button.'
+    }
+};

src/components/rangeselector/constants.js

@@ -0,0 +1,26 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+
+module.exports = {
+
+    // 'y' position pad above counter axis domain
+    yPad: 0.02,
+
+    // minimum button width (regardless of text size)
+    minButtonWidth: 30,
+
+    // buttons rect radii
+    rx: 3,
+    ry: 3,
+
+    // color given to active and hovered buttons
+    activeColor: '#d3d3d3'
+};

src/components/rangeselector/defaults.js

@@ -0,0 +1,85 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var Lib = require('../../lib');
+
+var attributes = require('./attributes');
+var buttonAttrs = require('./button_attributes');
+var constants = require('./constants');
+
+
+module.exports = function rangeSelectorDefaults(containerIn, containerOut, layout, counterAxes) {
+    var selectorIn = containerIn.rangeselector || {},
+        selectorOut = containerOut.rangeselector = {};
+
+    function coerce(attr, dflt) {
+        return Lib.coerce(selectorIn, selectorOut, attributes, attr, dflt);
+    }
+
+    var buttons = buttonsDefaults(selectorIn, selectorOut);
+
+    var visible = coerce('visible', buttons.length > 0);
+    if(!visible) return;
+
+    var posDflt = getPosDflt(containerOut, layout, counterAxes);
+    coerce('x', posDflt[0]);
+    coerce('y', posDflt[1]);
+    Lib.noneOrAll(containerIn, containerOut, ['x', 'y']);
+
+    coerce('xanchor');
+    coerce('yanchor');
+
+    Lib.coerceFont(coerce, 'font', layout.font);
+
+    coerce('bgcolor');
+    coerce('bordercolor');
+    coerce('borderwidth');
+};
+
+function buttonsDefaults(containerIn, containerOut) {
+    var buttonsIn = containerIn.buttons || [],
+        buttonsOut = containerOut.buttons = [];
+
+    var buttonIn, buttonOut;
+
+    function coerce(attr, dflt) {
+        return Lib.coerce(buttonIn, buttonOut, buttonAttrs, attr, dflt);
+    }
+
+    for(var i = 0; i < buttonsIn.length; i++) {
+        buttonIn = buttonsIn[i];
+        buttonOut = {};
+
+        var step = coerce('step');
+        if(step !== 'all') {
+            coerce('stepmode');
+            coerce('count');
+        }
+
+        coerce('label');
+
+        buttonsOut.push(buttonOut);
+    }
+
+    return buttonsOut;
+}
+
+function getPosDflt(containerOut, layout, counterAxes) {
+    var anchoredList = counterAxes.filter(function(ax) {
+        return layout[ax].anchor === containerOut._id;
+    });
+
+    var posY = 0;
+    for(var i = 0; i < anchoredList.length; i++) {
+        posY = Math.max(layout[anchoredList[i]].domain[1], posY);
+    }
+
+    return [containerOut.domain[0], posY + constants.yPad];
+}