Merge pull request #401 from plotly/colorscale-bug

Colorscale bugfix

Author: mdtusz

src/components/colorscale/make_scale_function.js

@@ -13,6 +13,7 @@ var d3 = require('d3');
 var tinycolor = require('tinycolor2');
 var isNumeric = require('fast-isnumeric');
 
+var Lib = require('../../lib');
 var Color = require('../color');
 
 
@@ -34,7 +35,10 @@ module.exports = function makeScaleFunction(scl, cmin, cmax) {
         .range(range);
 
     return function(v) {
-        if(isNumeric(v)) return sclFunc(v);
+        if(isNumeric(v)) {
+            var sclVal = Lib.constrain(v, cmin, cmax);
+            return sclFunc(sclVal);
+        }
         else if(tinycolor(v).isValid()) return v;
         else return Color.defaultLine;
     };

test/image/baselines/colorscale_constraint.png

@@ -0,0 +1,24 @@
+{
+  "data": [{
+    "x": [1,2,3,4,5],
+    "y": [1,2,3,4],
+    "marker": {
+      "color": [1,2,3,4],
+      "cmin": 2,
+      "cmax": 3,
+      "showscale": true
+    }
+  }, {
+    "x": [1,2,3,4,5],
+    "y": [4,3,2,1],
+    "marker": {
+      "color": [1,2,3,4],
+      "cmin": 1,
+      "cmax": 4,
+      "showscale": false
+    }
+  }],
+  "layout": {
+    "showlegend": false
+  }
+}

test/image/mocks/colorscale_constraint.json

@@ -370,4 +370,28 @@ describe('Test colorscale:', function() {
         });
 
     });
+
+    describe('makeScaleFunction', function() {
+        var scale = [
+                [0,'rgb(5,10,172)'],
+                [0.35,'rgb(106,137,247)'],
+                [0.5,'rgb(190,190,190)'],
+                [0.6,'rgb(220,170,132)'],
+                [0.7,'rgb(230,145,90)'],
+                [1,'rgb(178,10,28)']
+            ],
+            scaleFunction = Colorscale.makeScaleFunction(scale, 2, 3);
+
+        it('should constrain color array values between cmin and cmax', function() {
+            var color1 = scaleFunction(1),
+                color2 = scaleFunction(2),
+                color3 = scaleFunction(3),
+                color4 = scaleFunction(4);
+
+            expect(color1).toEqual(color2);
+            expect(color1).toEqual('#050aac');
+            expect(color3).toEqual(color4);
+            expect(color4).toEqual('#b20a1c');
+        });
+    });
 });