Merge pull request #422 from plotly/colorscale-opacity

Colorscale opacity maintenance

Author: mdtusz

src/components/colorbar/draw.js

@@ -10,6 +10,7 @@
 'use strict';
 
 var d3 = require('d3');
+var tinycolor = require('tinycolor2');
 
 var Plotly = require('../../plotly');
 var Plots = require('../../plots/plots');
@@ -356,13 +357,22 @@ module.exports = function draw(gd, id) {
                 if(i!==filllevels.length-1) {
                     z[1] += (z[1]>z[0]) ? 1 : -1;
                 }
+
+
+                // Tinycolor can't handle exponents and
+                // at this scale, removing it makes no difference.
+                var colorString = fillcolormap(d).replace('e-', ''),
+                    opaqueColor = tinycolor(colorString).toHexString();
+
+                // Colorbar cannot currently support opacities so we
+                // use an opaque fill even when alpha channels present
                 d3.select(this).attr({
                     x: xLeft,
                     width: Math.max(thickPx,2),
                     y: d3.min(z),
-                    height: Math.max(d3.max(z)-d3.min(z),2)
-                })
-                .style('fill',fillcolormap(d));
+                    height: Math.max(d3.max(z)-d3.min(z),2),
+                    fill: opaqueColor
+                });
             });
 
             var lines = container.select('.cblines')

src/components/colorscale/make_scale_function.js

@@ -26,18 +26,20 @@ module.exports = function makeScaleFunction(scl, cmin, cmax) {
     for(var i = 0; i < N; i++) {
         si = scl[i];
         domain[i] = cmin + si[0] * (cmax - cmin);
-        range[i] = si[1];
+        range[i] = tinycolor(si[1]).toRgb();
     }
 
     var sclFunc = d3.scale.linear()
         .domain(domain)
-        .interpolate(d3.interpolateRgb)
+        .interpolate(d3.interpolateObject)
         .range(range);
 
     return function(v) {
         if(isNumeric(v)) {
-            var sclVal = Lib.constrain(v, cmin, cmax);
-            return sclFunc(sclVal);
+            var sclVal = Lib.constrain(v, cmin, cmax),
+                colorObj = sclFunc(sclVal);
+
+            return tinycolor(colorObj).toRgbString();
         }
         else if(tinycolor(v).isValid()) return v;
         else return Color.defaultLine;

test/image/baselines/colorscale_opacity.png

@@ -0,0 +1,56 @@
+{
+    "data": [
+        {
+            "y": [
+                5,
+                5,
+                5,
+                5
+            ],
+            "mode": "markers",
+            "marker": {
+                "size": 40,
+                "colorscale": [
+                    [
+                        0,
+                        "rgb(255,0.0,0.0)"
+                    ],
+                    [
+                        1,
+                        "rgba(0.0,0.0,255,0.5)"
+                    ]
+                ],
+                "color": [
+                    0,
+                    1,
+                    2,
+                    3
+                ],
+                "cmin": 0,
+                "cmax": 3
+            },
+            "uid": "07bab4"
+        }
+    ],
+    "layout": {
+        "title": "Scatter Plot with a Color Dimension",
+        "xaxis": {
+            "range": [
+                -0.271356783919598,
+                3.271356783919598
+            ],
+            "autorange": true
+        },
+        "yaxis": {
+            "type": "linear",
+            "range": [
+                4,
+                6
+            ],
+            "autorange": true
+        },
+        "height": 450,
+        "width": 1100,
+        "autosize": true
+    }
+}

test/image/mocks/colorscale_opacity.json

@@ -389,9 +389,9 @@ describe('Test colorscale:', function() {
                 color4 = scaleFunction(4);
 
             expect(color1).toEqual(color2);
-            expect(color1).toEqual('#050aac');
+            expect(color1).toEqual('rgb(5, 10, 172)');
             expect(color3).toEqual(color4);
-            expect(color4).toEqual('#b20a1c');
+            expect(color4).toEqual('rgb(178, 10, 28)');
         });
     });
 });