Merge pull request #4635 from plotly/res3939-parcoords-context-line-c…

…olor

expose parcoords context line color

src/traces/parcoords/attributes.js

@@ -141,6 +141,23 @@ module.exports = {
  description: 'The dimensions (variables) of the parallel coordinates chart. 2..60 dimensions are supported.'
  }),
 
+ unselected: {
+ line: {
+ color: {
+ valType: 'color',
+ dflt: '#777',
+ role: 'style',
+ editType: 'plot',
+ description: [
+ 'Sets the color of lines in the background',
+ 'i.e. unselected lines.'
+ ].join(' ')
+ },
+ editType: 'plot'
+ },
+ editType: 'plot'
+ },
+
  line: extendFlat({editType: 'calc'},
  colorScaleAttrs('line', {
  // the default autocolorscale isn't quite usable for parcoords due to context ambiguity around 0 (grey, off-white)

src/traces/parcoords/constants.js

@@ -19,7 +19,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

@@ -115,4 +115,5 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
  coerce('labelangle');
  coerce('labelside');
+ coerce('unselected.line.color');
 };

src/traces/parcoords/parcoords.js

@@ -154,7 +154,7 @@ 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)};
  var cOpts = Colorscale.extractOpts(line);
  var cscale = cOpts.reversescale ? Colorscale.flipScale(cd0.cscale) : cd0.cscale;
  var domain = trace.domain;

test/jasmine/tests/parcoords_test.js

@@ -856,6 +856,12 @@ describe('parcoords Lifecycle methods', function() {
  }],
  line: {color: 'blue'}
  }], {
+ margin: {
+ t: 0,
+ b: 0,
+ l: 0,
+ r: 0
+ },
  width: 300,
  height: 200
  })
@@ -888,6 +894,12 @@ describe('parcoords Lifecycle methods', function() {
  }],
  line: {color: 'blue'}
  }], {
+ margin: {
+ t: 0,
+ b: 0,
+ l: 0,
+ r: 0
+ },
  width: 300,
  height: 200
  })
@@ -910,6 +922,130 @@ describe('parcoords Lifecycle methods', function() {
  .catch(failTest)
  .then(done);
  });
+
+ 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.plot(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');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
+ 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');
+ })
+ .catch(failTest)
+ .then(done);
+ });
 });
 
 describe('parcoords basic use', function() {