add unselected.line.color and unselected.line.opacity options to parcoords trace

draftlogs/6216_add.md

@@ -0,0 +1 @@
+ - Add `unselected.line.color` and `unselected.line.opacity` options to `parcoords` trace [[#6216](https://github.com/plotly/plotly.js/pull/6216)]

src/traces/parcoords/attributes.js

@@ -133,5 +133,26 @@ module.exports = {
             autoColorDflt: false,
             editTypeOverride: 'calc'
         })
-    )
+    ),
+
+    unselected: {
+        line: {
+            color: {
+                valType: 'color',
+                dflt: '',
+                editType: 'plot',
+                description: 'Sets the color of unselected lines.'
+            },
+            opacity: {
+                valType: 'number',
+                min: 0,
+                max: 1,
+                dflt: 'auto',
+                editType: 'plot',
+                description: 'Sets the opacity of unselected lines.'
+            },
+            editType: 'plot'
+        },
+        editType: 'plot'
+    }
 };

src/traces/parcoords/constants.js

@@ -11,7 +11,6 @@ module.exports = {
     layers: ['contextLineLayer', 'focusLineLayer', 'pickLineLayer'],
     axisTitleOffset: 28,
     axisExtentOffset: 10,
-    deselectedLineColor: '#777',
     bar: {
         width: 4, // Visible width of the filter bar
         captureWidth: 10, // Mouse-sensitive width for interaction (Fitts law)

src/traces/parcoords/defaults.js

@@ -71,6 +71,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
     }
 
+    function coerce2(attr, dflt) {
+        return Lib.coerce2(traceIn, traceOut, attributes, attr, dflt);
+    }
+
     var dimensionsIn = traceIn.dimensions;
     if(Array.isArray(dimensionsIn) && dimensionsIn.length > maxDimensionCount) {
         Lib.log('parcoords traces support up to ' + maxDimensionCount + ' dimensions at the moment');
@@ -107,4 +111,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     coerce('labelangle');
     coerce('labelside');
+
+    var unselectedLineColor = coerce2('unselected.line.color');
+    coerce('unselected.line.opacity', unselectedLineColor ? 1 : 'auto');
 };

src/traces/parcoords/lines.js

@@ -183,6 +183,7 @@ function makeItem(
     var layoutWidth = model.layoutWidth * plotGlPixelRatio;
 
     var deselectedLinesColor = model.deselectedLines.color;
+    var deselectedLinesOpacity = model.deselectedLines.opacity;
 
     var itemModel = Lib.extendFlat({
         key: crossfilterDimensionIndex,
@@ -206,8 +207,8 @@ function makeItem(
             deselectedLinesColor[0] / 255,
             deselectedLinesColor[1] / 255,
             deselectedLinesColor[2] / 255,
-            deselectedLinesColor[3] < 1 ?
-                deselectedLinesColor[3] :
+            deselectedLinesOpacity !== 'auto' ?
+                deselectedLinesColor[3] * deselectedLinesOpacity :
                 Math.max(1 / 255, Math.pow(1 / model.lines.color.length, 1 / 3))
         ],
 

src/traces/parcoords/parcoords.js

@@ -149,7 +149,10 @@ function model(layout, d, i) {
     var trace = cd0.trace;
     var lineColor = helpers.convertTypedArray(cd0.lineColor);
     var line = trace.line;
-    var deselectedLines = {color: rgba(c.deselectedLineColor)};
+    var deselectedLines = {
+        color: rgba(trace.unselected.line.color || '#777'),
+        opacity: trace.unselected.line.opacity
+    };
     var cOpts = Colorscale.extractOpts(line);
     var cscale = cOpts.reversescale ? Colorscale.flipScale(cd0.cscale) : cd0.cscale;
     var domain = trace.domain;

test/image/mocks/gl2d_parcoords_constraints.json

@@ -24,6 +24,12 @@
       ]
     },
 
+    "unselected": {
+      "line": {
+        "color": "white"
+      }
+    },
+
     "dimensions": [
       {
         "label": "±1.1",

test/image/mocks/gl2d_parcoords_dark_background.json

@@ -20,6 +20,12 @@
       "color": [-41, -1317, -164, -1856, -79, -931, -191, -2983, -341, -3846, -278, -3019, -523, -2357, -985, -3447, -211, -2842, -458, -4388, -784, -2563, -935, -2253, -313, -3667, -1479, -1030, -632, -623, -1945, -1324, -1221, -878, -947, -1615, -697, -575, -482, -905, -869, -433, -484, -349, -667, -248, -1135, -888, -1019, -223, -2067, -729, -579, -659, -334, -340, -554, -455, -377, -375, -453, -834, -934, -334, -369, -290, -354, -497, -490, -329, -729, -1794, -151, -1162, -3935, -1013, -509, -825, -997, -320, -680, -422, -785, -542, -563, -489, -1283, -680, -78, -450, -514, -449, -548, -661, -641, -503, -570, -257, -394, -450]
     },
 
+    "unselected": {
+      "line": {
+        "opacity": 0.5
+      }
+    },
+
     "dimensions": [
       {
         "constraintrange": [100000, 150000],

test/jasmine/tests/parcoords_test.js

@@ -892,6 +892,128 @@ describe('parcoords Lifecycle methods', function() {
         })
         .then(done, done.fail);
     });
+
+    it('@gl unselected.line.color `Plotly.restyle` should change context layer line.color', function(done) {
+        var testLayer = '.gl-canvas-context';
+
+        var list1 = [];
+        var list2 = [];
+        for(var i = 0; i <= 100; i++) {
+            list1[i] = i;
+            list2[i] = 100 - i;
+        }
+
+        Plotly.newPlot(gd, [{
+            type: 'parcoords',
+            dimensions: [{
+                constraintrange: [1, 10],
+                values: list1
+            }, {
+                values: list2
+            }],
+            line: {color: '#0F0'},
+            unselected: {line: {color: '#F00'}}
+        }], {
+            margin: {
+                t: 0,
+                b: 0,
+                l: 0,
+                r: 0
+            },
+            width: 300,
+            height: 200
+        })
+        .then(function() {
+            var rgb = getAvgPixelByChannel(testLayer);
+            expect(rgb[0]).not.toBe(0, 'red');
+            expect(rgb[1]).toBe(0, 'no green');
+            expect(rgb[2]).toBe(0, 'no blue');
+
+            return Plotly.restyle(gd, 'unselected.line.color', '#00F');
+        })
+        .then(function() {
+            var rgb = getAvgPixelByChannel(testLayer);
+            expect(rgb[0]).toBe(0, 'no red');
+            expect(rgb[1]).toBe(0, 'no green');
+            expect(rgb[2]).not.toBe(0, 'blue');
+
+            return Plotly.restyle(gd, 'unselected.line.color', 'rgba(0,0,0,0)');
+        })
+        .then(function() {
+            var rgb = getAvgPixelByChannel(testLayer);
+            expect(rgb[0]).toBe(0, 'no red');
+            expect(rgb[1]).toBe(0, 'no green');
+            expect(rgb[2]).toBe(0, 'no blue');
+        })
+        .then(done, done.fail);
+    });
+
+    it('@gl unselected.line.color `Plotly.react` should change line.color and unselected.line.color', function(done) {
+        var unselectedLayer = '.gl-canvas-context';
+        var selectedLayer = '.gl-canvas-focus';
+
+        var list1 = [];
+        var list2 = [];
+        for(var i = 0; i <= 100; i++) {
+            list1[i] = i;
+            list2[i] = 100 - i;
+        }
+
+        var fig = {
+            data: [{
+                type: 'parcoords',
+                dimensions: [{
+                    constraintrange: [1, 10],
+                    values: list1
+                }, {
+                    values: list2
+                }],
+                line: {color: '#0F0'},
+                unselected: {line: {color: '#F00'}}
+            }],
+            layout: {
+                margin: {
+                    t: 0,
+                    b: 0,
+                    l: 0,
+                    r: 0
+                },
+                width: 300,
+                height: 200
+            }
+        };
+
+        var rgb;
+
+        Plotly.newPlot(gd, fig)
+        .then(function() {
+            rgb = getAvgPixelByChannel(unselectedLayer);
+            expect(rgb[0]).not.toBe(0, 'red');
+            expect(rgb[1]).toBe(0, 'no green');
+            expect(rgb[2]).toBe(0, 'no blue');
+
+            rgb = getAvgPixelByChannel(selectedLayer);
+            expect(rgb[0]).toBe(0, 'no red');
+            expect(rgb[1]).not.toBe(0, 'green');
+            expect(rgb[2]).toBe(0, 'no blue');
+
+            fig.data[0].line.color = '#FF0';
+            fig.data[0].unselected.line.color = '#00F';
+            return Plotly.react(gd, fig);
+        })
+        .then(function() {
+            rgb = getAvgPixelByChannel(selectedLayer);
+            expect(rgb[0]).not.toBe(0, 'red');
+            expect(rgb[1]).not.toBe(0, 'green');
+            expect(rgb[2]).toBe(0, 'no blue');
+
+            rgb = getAvgPixelByChannel(unselectedLayer);
+            expect(rgb[0]).toBe(0, 'no red');
+            expect(rgb[1]).toBe(0, 'no green');
+            expect(rgb[2]).not.toBe(0, 'blue');
+        })
+        .then(done, done.fail);
+    });
 });
 
 describe('parcoords hover', function() {

test/plot-schema.json

@@ -40355,6 +40355,28 @@
      "editType": "none",
      "valType": "any"
     },
+    "unselected": {
+     "editType": "plot",
+     "line": {
+      "color": {
+       "description": "Sets the color of unselected lines.",
+       "dflt": "",
+       "editType": "plot",
+       "valType": "color"
+      },
+      "editType": "plot",
+      "opacity": {
+       "description": "Sets the opacity of unselected lines.",
+       "dflt": "auto",
+       "editType": "plot",
+       "max": 1,
+       "min": 0,
+       "valType": "number"
+      },
+      "role": "object"
+     },
+     "role": "object"
+    },
     "visible": {
      "description": "Determines whether or not this trace is visible. If *legendonly*, the trace is not drawn, but can appear as a legend item (provided that the legend itself is visible).",
      "dflt": true,