add unselected.line.opacity & use color.a directly

Author: archmoj

draftlogs/6216_add.md

@@ -1 +1 @@
- - Add `unselected.line.color` option to `parcoords` trace [[#6216](https://github.com/plotly/plotly.js/pull/6216)]
+ - 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

@@ -141,10 +141,15 @@ module.exports = {
                 valType: 'color',
                 dflt: '#777',
                 editType: 'plot',
-                description: [
-                    'Sets the color of lines in the background',
-                    'i.e. unselected lines.'
-                ].join(' ')
+                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'
         },

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');
@@ -108,5 +112,6 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('labelangle');
     coerce('labelside');
 
-    coerce('unselected.line.color');
+    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(trace.unselected.line.color)};
+    var deselectedLines = {
+        color: rgba(trace.unselected.line.color),
+        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/plot-schema.json

@@ -40359,12 +40359,20 @@
      "editType": "plot",
      "line": {
       "color": {
-       "description": "Sets the color of lines in the background i.e. unselected lines.",
+       "description": "Sets the color of unselected lines.",
        "dflt": "#777",
        "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"