Merge pull request plotly#3917 from plotly/fix3820-parcoords-rgba-colorscale

archmoj · web-flow · commit 2d42a667f964 · 2019-05-27T22:57:57.000-04:00
treating rgba colors similar to rgb on parallel coordinates
diff --git a/src/traces/parcoords/parcoords.js b/src/traces/parcoords/parcoords.js
@@ -9,6 +9,7 @@
 'use strict';
 
 var d3 = require('d3');
+var rgba = require('color-rgba');
 
 var Lib = require('../../lib');
 var Drawing = require('../../components/drawing');
@@ -102,7 +103,10 @@ function ordinalScale(dimension) {
 
 function unitToColorScale(cscale) {
     var colorStops = cscale.map(function(d) { return d[0]; });
-    var colorTuples = cscale.map(function(d) { return d3.rgb(d[1]); });
+    var colorTuples = cscale.map(function(d) {
+        var RGBA = rgba(d[1]);
+        return d3.rgb('rgb(' + RGBA[0] + ',' + RGBA[1] + ',' + RGBA[2] + ')');
+    });
     var prop = function(n) { return function(o) { return o[n]; }; };
 
     // We can't use d3 color interpolation as we may have non-uniform color palette raster
diff --git a/test/image/baselines/gl2d_parcoords_rgba_colorscale.png b/test/image/baselines/gl2d_parcoords_rgba_colorscale.png
diff --git a/test/image/mocks/gl2d_parcoords_rgba_colorscale.json b/test/image/mocks/gl2d_parcoords_rgba_colorscale.json
@@ -0,0 +1,47 @@
+{
+    "data": [
+        {
+            "dimensions": [
+                {
+                    "values": [
+                        0,
+                        1
+                    ]
+                },
+                {
+                    "values": [
+                        1,
+                        0
+                    ]
+                }
+            ],
+            "line": {
+                "cmax": 1,
+                "cmin": 0,
+                "color": [
+                    0,
+                    1
+                ],
+                "colorscale": [
+                    [
+                        0,
+                        "rgba(255,0,0,1)"
+                    ],
+                    [
+                        1,
+                        "rgba(0,0,255,1)"
+                    ]
+                ],
+                "showscale": true
+            },
+            "type": "parcoords"
+        }
+    ],
+    "layout": {
+        "width": 400,
+        "height": 400,
+        "title": {
+            "text": "should work with rgba colorscale"
+        }
+    }
+}
