rangeselector: add 'activecolor' attribute

- making the color of the active / hovered button configurable
- by default, the 'activecolor' is set using Color.constrast
- fix test cases accordingly

Author: etpinard

src/components/rangeselector/attributes.js

@@ -81,6 +81,11 @@ module.exports = {
         role: 'style',
         description: 'Sets the background color of the range selector buttons.'
     },
+    activecolor: {
+        valType: 'color',
+        role: 'style',
+        description: 'Sets the background color of the active range selector button.'
+    },
     bordercolor: {
         valType: 'color',
         dflt: colorAttrs.defaultLine,

src/components/rangeselector/constants.js

@@ -21,6 +21,7 @@ module.exports = {
     rx: 3,
     ry: 3,
 
-    // color given to active and hovered buttons
-    activeColor: '#d3d3d3'
+    // light fraction used to compute the 'activecolor' default
+    lightAmount: 25,
+    darkAmount: 10
 };

src/components/rangeselector/defaults.js

@@ -9,6 +9,7 @@
 'use strict';
 
 var Lib = require('../../lib');
+var Color = require('../color');
 
 var attributes = require('./attributes');
 var buttonAttrs = require('./button_attributes');
@@ -38,7 +39,8 @@ module.exports = function rangeSelectorDefaults(containerIn, containerOut, layou
 
     Lib.coerceFont(coerce, 'font', layout.font);
 
-    coerce('bgcolor');
+    var bgColor = coerce('bgcolor');
+    coerce('activecolor', Color.contrast(bgColor, constants.lightAmount, constants.darkAmount));
     coerce('bordercolor');
     coerce('borderwidth');
 };

src/components/rangeselector/draw.js

@@ -142,7 +142,7 @@ function drawButtonRect(button, selectorLayout, d) {
 
 function getFillColor(selectorLayout, d) {
     return (d.isActive || d.isHovered) ?
-        constants.activeColor :
+        selectorLayout.activecolor :
         selectorLayout.bgcolor;
 }
 

test/image/mocks/range_selector_style.json

@@ -1025,6 +1025,7 @@
                 "y": 0.2,
                 "yanchor": "bottom",
                 "bgcolor": "#d3d3d3",
+                "activecolor": "#d3d3d3",
                 "borderwidth": 2,
                 "bordercolor": "#ff7f0e"
             },

test/jasmine/tests/range_selector_test.js

@@ -1,6 +1,5 @@
 var RangeSelector = require('@src/components/rangeselector');
 var getUpdateObject = require('@src/components/rangeselector/get_update_object');
-var constants = require('@src/components/rangeselector/constants');
 
 var d3 = require('d3');
 var Plotly = require('@lib');
@@ -482,7 +481,7 @@ describe('range selector interactions:', function() {
         var pos = getRectCenter(button.node());
 
         var fillColor = Color.rgb(gd._fullLayout.xaxis.rangeselector.bgcolor);
-        var activeColor = Color.rgb(constants.activeColor);
+        var activeColor = 'rgb(212, 212, 212)';
 
         expect(button.style('fill')).toEqual(fillColor);