Feature: Range selectors

src/components/rangeselector/attributes.js

@@ -13,22 +13,26 @@ 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.'
+            'Determines whether or not this range selector is visible.',
+            'Note that range selectors are only available for x axes of',
+            '`type` set to *date*.'
         ].join(' ')
     },
 
-    buttons: {
-        role: 'object',
-        items: buttonAttrs,
-        description: [
-            'buttons!!!'
-        ].join(' ')
-    },
+    buttons: buttonAttrs,
 
     x: {
         valType: 'number',

src/components/rangeselector/button_attributes.js

@@ -25,7 +25,15 @@ module.exports = {
         values: ['backward', 'to date'],
         dflt: 'backward',
         description: [
-            ''
+            'Sets the range update mode.',
+            'If *backward*, the range update shifts the start of range',
+            'back *count* times *step* milliseconds.',
+            'If *to date*, 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: {
@@ -34,12 +42,13 @@ module.exports = {
         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: ''
+        description: 'Sets the text label to appear on the button.'
     }
 };

src/plot_api/plot_schema.js

@@ -131,9 +131,11 @@ function getLayoutAttributes() {
     mergeValTypeAndRole(layoutAttributes);
 
     // generate IS_LINKED_TO_ARRAY structure
-    layoutAttributes = handleLinkedToArray(layoutAttributes);
+    handleLinkedToArray(layoutAttributes);
 
     plotSchema.layout = { layoutAttributes: layoutAttributes };
+
+
 }
 
 function getDefs() {
@@ -304,19 +306,19 @@ function handleSubplotObjs(layoutAttributes) {
 }
 
 function handleLinkedToArray(layoutAttributes) {
-    Object.keys(layoutAttributes).forEach(function(k) {
-        var attr = extendDeep({}, layoutAttributes[k]);
 
+    function callback(attr, attrName, attrs) {
         if(attr[IS_LINKED_TO_ARRAY] !== true) return;
 
-        var itemName = k.substr(0, k.length-1);  // TODO more robust logic
+        // TODO more robust logic
+        var itemName = attrName.substr(0, attrName.length - 1);
 
         delete attr[IS_LINKED_TO_ARRAY];
 
-        layoutAttributes[k] = { items: {} };
-        layoutAttributes[k].items[itemName] = attr;
-        layoutAttributes[k].role = 'object';
-    });
+        attrs[attrName] = { items: {} };
+        attrs[attrName].items[itemName] = attr;
+        attrs[attrName].role = 'object';
+    }
 
-    return layoutAttributes;
+    PlotSchema.crawl(layoutAttributes, callback);
 }

src/plots/cartesian/layout_attributes.js

@@ -13,6 +13,8 @@ var fontAttrs = require('../font_attributes');
 var colorAttrs = require('../../components/color/attributes');
 var extendFlat = require('../../lib/extend').extendFlat;
 var rangeSliderAttrs = require('../../components/rangeslider/attributes');
+var rangeSelectorAttrs = require('../../components/rangeselector/attributes');
+
 
 module.exports = {
     title: {
@@ -82,7 +84,10 @@ module.exports = {
             'January 1st 1970 to November 4th, 2013, set the range from 0 to 1380844800000.0'
         ].join(' ')
     },
+
     rangeslider: rangeSliderAttrs,
+    rangeselector: rangeSelectorAttrs,
+
     fixedrange: {
         valType: 'boolean',
         dflt: false,

test/jasmine/tests/plotschema_test.js

@@ -1,6 +1,7 @@
 var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
 
+
 describe('plot schema', function() {
     'use strict';
 
@@ -112,17 +113,31 @@ describe('plot schema', function() {
         expect(list).toEqual(astrs);
     });
 
-    it('layout.annotations and layout.shapes should contain `items`', function() {
-        var astrs = ['annotations', 'shapes'];
+    it('should convert _isLinkedToArray attributes to items object', function() {
+        var astrs = [
+            'annotations', 'shapes',
+            'xaxis.rangeselector.buttons', 'yaxis.rangeselector.buttons'
+        ];
 
         astrs.forEach(function(astr) {
-            expect(
-                isPlainObject(
-                    Lib.nestedProperty(
-                        plotSchema.layout.layoutAttributes, astr
-                    ).get().items
-                )
-            ).toBe(true);
+            var np = Lib.nestedProperty(
+                plotSchema.layout.layoutAttributes, astr
+            );
+
+            var name = np.parts[np.parts.length - 1],
+                itemName = name.substr(0, name.length - 1);
+
+            var itemsObj = np.get().items,
+                itemObj = itemsObj[itemName];
+
+            expect(isPlainObject(itemsObj)).toBe(true);
+            expect(itemsObj.role).toBeUndefined();
+            expect(Object.keys(itemsObj).length).toEqual(1);
+            expect(isPlainObject(itemObj)).toBe(true);
+            expect(itemObj.role).toBe('object');
+
+            var role = np.get().role;
+            expect(role).toEqual('object');
         });
     });
 
@@ -158,4 +173,5 @@ describe('plot schema', function() {
             }
         );
     });
+
 });