diff --git a/src/traces/parcoords/attributes.js b/src/traces/parcoords/attributes.js index bf1f7223410..b6eb03ded73 100644 --- a/src/traces/parcoords/attributes.js +++ b/src/traces/parcoords/attributes.js @@ -114,7 +114,7 @@ module.exports = { line: extendFlat({editType: 'calc'}, colorScaleAttrs('line', { // the default autocolorscale isn't quite usable for parcoords due to context ambiguity around 0 (grey, off-white) - // autocolorscale therefore defaults to false too, to avoid being overridden by the blue-white-red autocolor palette + // autocolorscale therefore defaults to false too, to avoid being overridden by the blue-white-red autocolor palette colorscaleDflt: 'Viridis', autoColorDflt: false, editTypeOverride: 'calc' diff --git a/src/traces/parcoords/calc.js b/src/traces/parcoords/calc.js index 8dbdb84d156..11078ac5d57 100644 --- a/src/traces/parcoords/calc.js +++ b/src/traces/parcoords/calc.js @@ -8,8 +8,7 @@ 'use strict'; -var hasColorscale = require('../../components/colorscale/helpers').hasColorscale; -var calcColorscale = require('../../components/colorscale/calc'); +var Colorscale = require('../../components/colorscale'); var Lib = require('../../lib'); var wrap = require('../../lib/gup').wrap; @@ -19,22 +18,24 @@ module.exports = function calc(gd, trace) { } trace.line.color = convertTypedArray(trace.line.color); - var cs = !!trace.line.colorscale && Array.isArray(trace.line.color); - var color = cs ? trace.line.color : constHalf(trace._length); - var cscale = cs ? trace.line.colorscale : [[0, trace.line.color], [1, trace.line.color]]; + var lineColor; + var cscale; - if(hasColorscale(trace, 'line')) { - calcColorscale(gd, trace, { - vals: color, + if(Colorscale.hasColorscale(trace, 'line') && Array.isArray(trace.line.color)) { + lineColor = trace.line.color; + cscale = Colorscale.extractOpts(trace.line).colorscale; + + Colorscale.calc(gd, trace, { + vals: lineColor, containerStr: 'line', cLetter: 'c' }); + } else { + lineColor = constHalf(trace._length); + cscale = [[0, trace.line.color], [1, trace.line.color]]; } - return wrap({ - lineColor: color, - cscale: cscale - }); + return wrap({lineColor: lineColor, cscale: cscale}); }; function constHalf(len) { @@ -46,5 +47,5 @@ function constHalf(len) { } function convertTypedArray(a) { - return (Lib.isTypedArray(a)) ? Array.prototype.slice.call(a) : a; + return Lib.isTypedArray(a) ? Array.prototype.slice.call(a) : a; } diff --git a/src/traces/parcoords/parcoords.js b/src/traces/parcoords/parcoords.js index cef0756d81e..02e4a55ea46 100644 --- a/src/traces/parcoords/parcoords.js +++ b/src/traces/parcoords/parcoords.js @@ -132,7 +132,8 @@ function model(layout, d, i) { var trace = cd0.trace; var lineColor = cd0.lineColor; var line = trace.line; - var cscale = line.reversescale ? Colorscale.flipScale(cd0.cscale) : cd0.cscale; + var cOpts = Colorscale.extractOpts(line); + var cscale = cOpts.reversescale ? Colorscale.flipScale(cd0.cscale) : cd0.cscale; var domain = trace.domain; var dimensions = trace.dimensions; var width = layout.width; @@ -143,7 +144,7 @@ function model(layout, d, i) { var lines = Lib.extendDeepNoArrays({}, line, { color: lineColor.map(d3.scale.linear().domain(dimensionExtent({ values: lineColor, - range: [line.cmin, line.cmax], + range: [cOpts.min, cOpts.max], _length: trace._length }))), blockLineCount: c.blockLineCount, diff --git a/test/image/baselines/gl2d_parcoords_coloraxis.png b/test/image/baselines/gl2d_parcoords_coloraxis.png new file mode 100644 index 00000000000..1029b7b6ee2 Binary files /dev/null and b/test/image/baselines/gl2d_parcoords_coloraxis.png differ diff --git a/test/image/mocks/gl2d_parcoords_coloraxis.json b/test/image/mocks/gl2d_parcoords_coloraxis.json new file mode 100644 index 00000000000..48432e59d75 --- /dev/null +++ b/test/image/mocks/gl2d_parcoords_coloraxis.json @@ -0,0 +1,984 @@ +{ + "data": [ + { + "dimensions": [ + { + "label": "Sepal Length", + "values": [ + 5.1, + 4.9, + 4.7, + 4.6, + 5, + 5.4, + 4.6, + 5, + 4.4, + 4.9, + 5.4, + 4.8, + 4.8, + 4.3, + 5.8, + 5.7, + 5.4, + 5.1, + 5.7, + 5.1, + 5.4, + 5.1, + 4.6, + 5.1, + 4.8, + 5, + 5, + 5.2, + 5.2, + 4.7, + 4.8, + 5.4, + 5.2, + 5.5, + 4.9, + 5, + 5.5, + 4.9, + 4.4, + 5.1, + 5, + 4.5, + 4.4, + 5, + 5.1, + 4.8, + 5.1, + 4.6, + 5.3, + 5, + 7, + 6.4, + 6.9, + 5.5, + 6.5, + 5.7, + 6.3, + 4.9, + 6.6, + 5.2, + 5, + 5.9, + 6, + 6.1, + 5.6, + 6.7, + 5.6, + 5.8, + 6.2, + 5.6, + 5.9, + 6.1, + 6.3, + 6.1, + 6.4, + 6.6, + 6.8, + 6.7, + 6, + 5.7, + 5.5, + 5.5, + 5.8, + 6, + 5.4, + 6, + 6.7, + 6.3, + 5.6, + 5.5, + 5.5, + 6.1, + 5.8, + 5, + 5.6, + 5.7, + 5.7, + 6.2, + 5.1, + 5.7, + 6.3, + 5.8, + 7.1, + 6.3, + 6.5, + 7.6, + 4.9, + 7.3, + 6.7, + 7.2, + 6.5, + 6.4, + 6.8, + 5.7, + 5.8, + 6.4, + 6.5, + 7.7, + 7.7, + 6, + 6.9, + 5.6, + 7.7, + 6.3, + 6.7, + 7.2, + 6.2, + 6.1, + 6.4, + 7.2, + 7.4, + 7.9, + 6.4, + 6.3, + 6.1, + 7.7, + 6.3, + 6.4, + 6, + 6.9, + 6.7, + 6.9, + 5.8, + 6.8, + 6.7, + 6.7, + 6.3, + 6.5, + 6.2, + 5.9 + ] + }, + { + "label": "Sepal Width", + "values": [ + 3.5, + 3, + 3.2, + 3.1, + 3.6, + 3.9, + 3.4, + 3.4, + 2.9, + 3.1, + 3.7, + 3.4, + 3, + 3, + 4, + 4.4, + 3.9, + 3.5, + 3.8, + 3.8, + 3.4, + 3.7, + 3.6, + 3.3, + 3.4, + 3, + 3.4, + 3.5, + 3.4, + 3.2, + 3.1, + 3.4, + 4.1, + 4.2, + 3.1, + 3.2, + 3.5, + 3.1, + 3, + 3.4, + 3.5, + 2.3, + 3.2, + 3.5, + 3.8, + 3, + 3.8, + 3.2, + 3.7, + 3.3, + 3.2, + 3.2, + 3.1, + 2.3, + 2.8, + 2.8, + 3.3, + 2.4, + 2.9, + 2.7, + 2, + 3, + 2.2, + 2.9, + 2.9, + 3.1, + 3, + 2.7, + 2.2, + 2.5, + 3.2, + 2.8, + 2.5, + 2.8, + 2.9, + 3, + 2.8, + 3, + 2.9, + 2.6, + 2.4, + 2.4, + 2.7, + 2.7, + 3, + 3.4, + 3.1, + 2.3, + 3, + 2.5, + 2.6, + 3, + 2.6, + 2.3, + 2.7, + 3, + 2.9, + 2.9, + 2.5, + 2.8, + 3.3, + 2.7, + 3, + 2.9, + 3, + 3, + 2.5, + 2.9, + 2.5, + 3.6, + 3.2, + 2.7, + 3, + 2.5, + 2.8, + 3.2, + 3, + 3.8, + 2.6, + 2.2, + 3.2, + 2.8, + 2.8, + 2.7, + 3.3, + 3.2, + 2.8, + 3, + 2.8, + 3, + 2.8, + 3.8, + 2.8, + 2.8, + 2.6, + 3, + 3.4, + 3.1, + 3, + 3.1, + 3.1, + 3.1, + 2.7, + 3.2, + 3.3, + 3, + 2.5, + 3, + 3.4, + 3 + ] + }, + { + "label": "Petal Length", + "values": [ + 1.4, + 1.4, + 1.3, + 1.5, + 1.4, + 1.7, + 1.4, + 1.5, + 1.4, + 1.5, + 1.5, + 1.6, + 1.4, + 1.1, + 1.2, + 1.5, + 1.3, + 1.4, + 1.7, + 1.5, + 1.7, + 1.5, + 1, + 1.7, + 1.9, + 1.6, + 1.6, + 1.5, + 1.4, + 1.6, + 1.6, + 1.5, + 1.5, + 1.4, + 1.5, + 1.2, + 1.3, + 1.5, + 1.3, + 1.5, + 1.3, + 1.3, + 1.3, + 1.6, + 1.9, + 1.4, + 1.6, + 1.4, + 1.5, + 1.4, + 4.7, + 4.5, + 4.9, + 4, + 4.6, + 4.5, + 4.7, + 3.3, + 4.6, + 3.9, + 3.5, + 4.2, + 4, + 4.7, + 3.6, + 4.4, + 4.5, + 4.1, + 4.5, + 3.9, + 4.8, + 4, + 4.9, + 4.7, + 4.3, + 4.4, + 4.8, + 5, + 4.5, + 3.5, + 3.8, + 3.7, + 3.9, + 5.1, + 4.5, + 4.5, + 4.7, + 4.4, + 4.1, + 4, + 4.4, + 4.6, + 4, + 3.3, + 4.2, + 4.2, + 4.2, + 4.3, + 3, + 4.1, + 6, + 5.1, + 5.9, + 5.6, + 5.8, + 6.6, + 4.5, + 6.3, + 5.8, + 6.1, + 5.1, + 5.3, + 5.5, + 5, + 5.1, + 5.3, + 5.5, + 6.7, + 6.9, + 5, + 5.7, + 4.9, + 6.7, + 4.9, + 5.7, + 6, + 4.8, + 4.9, + 5.6, + 5.8, + 6.1, + 6.4, + 5.6, + 5.1, + 5.6, + 6.1, + 5.6, + 5.5, + 4.8, + 5.4, + 5.6, + 5.1, + 5.1, + 5.9, + 5.7, + 5.2, + 5, + 5.2, + 5.4, + 5.1 + ] + }, + { + "label": "Petal Width", + "values": [ + 0.2, + 0.2, + 0.2, + 0.2, + 0.2, + 0.4, + 0.3, + 0.2, + 0.2, + 0.1, + 0.2, + 0.2, + 0.1, + 0.1, + 0.2, + 0.4, + 0.4, + 0.3, + 0.3, + 0.3, + 0.2, + 0.4, + 0.2, + 0.5, + 0.2, + 0.2, + 0.4, + 0.2, + 0.2, + 0.2, + 0.2, + 0.4, + 0.1, + 0.2, + 0.1, + 0.2, + 0.2, + 0.1, + 0.2, + 0.2, + 0.3, + 0.3, + 0.2, + 0.6, + 0.4, + 0.3, + 0.2, + 0.2, + 0.2, + 0.2, + 1.4, + 1.5, + 1.5, + 1.3, + 1.5, + 1.3, + 1.6, + 1, + 1.3, + 1.4, + 1, + 1.5, + 1, + 1.4, + 1.3, + 1.4, + 1.5, + 1, + 1.5, + 1.1, + 1.8, + 1.3, + 1.5, + 1.2, + 1.3, + 1.4, + 1.4, + 1.7, + 1.5, + 1, + 1.1, + 1, + 1.2, + 1.6, + 1.5, + 1.6, + 1.5, + 1.3, + 1.3, + 1.3, + 1.2, + 1.4, + 1.2, + 1, + 1.3, + 1.2, + 1.3, + 1.3, + 1.1, + 1.3, + 2.5, + 1.9, + 2.1, + 1.8, + 2.2, + 2.1, + 1.7, + 1.8, + 1.8, + 2.5, + 2, + 1.9, + 2.1, + 2, + 2.4, + 2.3, + 1.8, + 2.2, + 2.3, + 1.5, + 2.3, + 2, + 2, + 1.8, + 2.1, + 1.8, + 1.8, + 1.8, + 2.1, + 1.6, + 1.9, + 2, + 2.2, + 1.5, + 1.4, + 2.3, + 2.4, + 1.8, + 1.8, + 2.1, + 2.4, + 2.3, + 1.9, + 2.3, + 2.5, + 2.3, + 1.9, + 2, + 2.3, + 1.8 + ] + }, + { + "label": "Species", + "values": [ + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3 + ] + } + ], + "line": { + "color": [ + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3, + 3 + ], + "coloraxis": "coloraxis" + }, + "type": "parcoords" + } + ], + "layout": { + "coloraxis": { + "cmid": 2, + "colorbar": { + "title": { + "text": "Species" + } + }, + "colorscale": [ + [ + 0, + "rgb(0, 147, 146)" + ], + [ + 0.16666666666666666, + "rgb(114, 170, 161)" + ], + [ + 0.3333333333333333, + "rgb(177, 199, 179)" + ], + [ + 0.5, + "rgb(241, 234, 200)" + ], + [ + 0.6666666666666666, + "rgb(229, 185, 173)" + ], + [ + 0.8333333333333334, + "rgb(217, 137, 148)" + ], + [ + 1, + "rgb(208, 88, 126)" + ] + ] + }, + "height": 400, + "width": 600, + "margin": { + "t": 60 + } + } +}