Skip to content

Commit 513491e

Browse files
archmojarchmoj
authored
Merge pull request #4356 from plotly/fix4354-contour-legends-with-colorscale
Apply reversed colorscale setting and coloraxis in contour and histogramcontour legends
2 parents 8951847 + f988a64 commit 513491e

25 files changed

+473
-58
lines changed

‎src/components/legend/style.js‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ var Registry = require('../../registry');
1414
var Lib = require('../../lib');
1515
var Drawing = require('../drawing');
1616
var Color = require('../color');
17+
var extractOpts = require('../colorscale/helpers').extractOpts;
1718

1819
var subTypes = require('../../traces/scatter/subtypes');
1920
var stylePie = require('../../traces/pie/style_one');
@@ -30,7 +31,7 @@ module.exports = function style(s, gd) {
3031
var legend = fullLayout.legend;
3132
var constantItemSizing = legend.itemsizing === 'constant';
3233

33-
function boundLineWidth(mlw, cont, max, cst) {
34+
var boundLineWidth = function(mlw, cont, max, cst) {
3435
var v;
3536
if(mlw + 1) {
3637
v = mlw;
@@ -40,7 +41,7 @@ module.exports = function style(s, gd) {
4041
return 0;
4142
}
4243
return constantItemSizing ? cst : Math.min(v, max);
43-
}
44+
};
4445

4546
s.each(function(d) {
4647
var traceGroup = d3.select(this);
@@ -104,6 +105,29 @@ module.exports = function style(s, gd) {
104105
var showGradientFill = false;
105106
var dMod, tMod;
106107

108+
var cOpts = extractOpts(trace);
109+
var colorscale = cOpts.colorscale;
110+
var reversescale = cOpts.reversescale;
111+
112+
var fillGradient = function(s) {
113+
if(s.size()) {
114+
var gradientID = 'legendfill-' + trace.uid;
115+
Drawing.gradient(s, gd, gradientID,
116+
getGradientDirection(reversescale),
117+
colorscale, 'fill');
118+
}
119+
};
120+
121+
var lineGradient = function(s) {
122+
if(s.size()) {
123+
var gradientID = 'legendline-' + trace.uid;
124+
Drawing.lineGroupStyle(s);
125+
Drawing.gradient(s, gd, gradientID,
126+
getGradientDirection(reversescale),
127+
colorscale, 'stroke');
128+
}
129+
};
130+
107131
if(contours) {
108132
var coloring = contours.coloring;
109133

@@ -158,23 +182,6 @@ module.exports = function style(s, gd) {
158182
// This issue (and workaround) exist across (Mac) Chrome, FF, and Safari
159183
line.attr('d', pathStart + (showGradientLine ? 'l30,0.0001' : 'h30'))
160184
.call(showLine ? Drawing.lineGroupStyle : lineGradient);
161-
162-
function fillGradient(s) {
163-
if(s.size()) {
164-
var gradientID = 'legendfill-' + trace.uid;
165-
Drawing.gradient(s, gd, gradientID, 'horizontalreversed',
166-
trace.colorscale, 'fill');
167-
}
168-
}
169-
170-
function lineGradient(s) {
171-
if(s.size()) {
172-
var gradientID = 'legendline-' + trace.uid;
173-
Drawing.lineGroupStyle(s);
174-
Drawing.gradient(s, gd, gradientID, 'horizontalreversed',
175-
trace.colorscale, 'stroke');
176-
}
177-
}
178185
}
179186

180187
function stylePoints(d) {
@@ -278,7 +285,7 @@ module.exports = function style(s, gd) {
278285
var trace = d[0].trace;
279286

280287
var ptsData = [];
281-
if(trace.type === 'waterfall' && trace.visible) {
288+
if(trace.visible && trace.type === 'waterfall') {
282289
ptsData = d[0].hasTotals ?
283290
[['increasing', 'M-6,-6V6H0Z'], ['totals', 'M6,6H0L-6,-6H-0Z'], ['decreasing', 'M6,6V-6H0Z']] :
284291
[['increasing', 'M-6,-6V6H6Z'], ['decreasing', 'M6,6V-6H-6Z']];
@@ -321,7 +328,7 @@ module.exports = function style(s, gd) {
321328
var markerLine = marker.line || {};
322329

323330
var isVisible = (!desiredType) ? Registry.traceIs(trace, 'bar') :
324-
(trace.type === desiredType && trace.visible);
331+
(trace.visible && trace.type === desiredType);
325332

326333
var barpath = d3.select(lThis).select('g.legendpoints')
327334
.selectAll('path.legend' + desiredType)
@@ -348,7 +355,7 @@ module.exports = function style(s, gd) {
348355

349356
var pts = d3.select(this).select('g.legendpoints')
350357
.selectAll('path.legendbox')
351-
.data(Registry.traceIs(trace, 'box-violin') && trace.visible ? [d] : []);
358+
.data(trace.visible && Registry.traceIs(trace, 'box-violin') ? [d] : []);
352359
pts.enter().append('path').classed('legendbox', true)
353360
// if we want the median bar, prepend M6,0H-6
354361
.attr('d', 'M6,6H-6V-6H6Z')
@@ -386,7 +393,7 @@ module.exports = function style(s, gd) {
386393

387394
var pts = d3.select(this).select('g.legendpoints')
388395
.selectAll('path.legendcandle')
389-
.data(trace.type === 'candlestick' && trace.visible ? [d, d] : []);
396+
.data(trace.visible && trace.type === 'candlestick' ? [d, d] : []);
390397
pts.enter().append('path').classed('legendcandle', true)
391398
.attr('d', function(_, i) {
392399
if(i) return 'M-15,0H-8M-8,6V-6H8Z'; // increasing
@@ -413,7 +420,7 @@ module.exports = function style(s, gd) {
413420

414421
var pts = d3.select(this).select('g.legendpoints')
415422
.selectAll('path.legendohlc')
416-
.data(trace.type === 'ohlc' && trace.visible ? [d, d] : []);
423+
.data(trace.visible && trace.type === 'ohlc' ? [d, d] : []);
417424
pts.enter().append('path').classed('legendohlc', true)
418425
.attr('d', function(_, i) {
419426
if(i) return 'M-15,0H0M-8,-6V0'; // increasing
@@ -448,7 +455,7 @@ module.exports = function style(s, gd) {
448455
var trace = d0.trace;
449456

450457
var isVisible = (!desiredType) ? Registry.traceIs(trace, desiredType) :
451-
(trace.type === desiredType && trace.visible);
458+
(trace.visible && trace.type === desiredType);
452459

453460
var pts = d3.select(lThis).select('g.legendpoints')
454461
.selectAll('path.legend' + desiredType)
@@ -472,3 +479,7 @@ module.exports = function style(s, gd) {
472479
}
473480
}
474481
};
482+
483+
function getGradientDirection(reversescale) {
484+
return reversescale ? 'horizontal' : 'horizontalreversed';
485+
}

‎src/traces/choropleth/attributes.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
1212
var scatterGeoAttrs = require('../scattergeo/attributes');
1313
var colorScaleAttrs = require('../../components/colorscale/attributes');
14-
var plotAttrs = require('../../plots/attributes');
14+
var baseAttrs = require('../../plots/attributes');
1515
var defaultLine = require('../../components/color/attributes').defaultLine;
1616

1717
var extendFlat = require('../../lib/extend').extendFlat;
@@ -73,11 +73,11 @@ module.exports = extendFlat({
7373
editType: 'plot'
7474
},
7575

76-
hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
76+
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
7777
editType: 'calc',
7878
flags: ['location', 'z', 'text', 'name']
7979
}),
80-
hovertemplate: hovertemplateAttrs(),
80+
hovertemplate: hovertemplateAttrs()
8181
},
8282

8383
colorScaleAttrs('', {

‎src/traces/densitymapbox/attributes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
var colorScaleAttrs = require('../../components/colorscale/attributes');
1212
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
13-
var plotAttrs = require('../../plots/attributes');
13+
var baseAttrs = require('../../plots/attributes');
1414
var scatterMapboxAttrs = require('../scattermapbox/attributes');
1515

1616
var extendFlat = require('../../lib/extend').extendFlat;
@@ -81,7 +81,7 @@ module.exports = extendFlat({
8181
text: scatterMapboxAttrs.text,
8282
hovertext: scatterMapboxAttrs.hovertext,
8383

84-
hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
84+
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
8585
flags: ['lon', 'lat', 'z', 'text', 'name']
8686
}),
8787
hovertemplate: hovertemplateAttrs()

‎src/traces/funnel/attributes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
var barAttrs = require('../bar/attributes');
1212
var lineAttrs = require('../scatter/attributes').line;
13-
var plotAttrs = require('../../plots/attributes');
13+
var baseAttrs = require('../../plots/attributes');
1414
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
1515
var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
1616
var constants = require('./constants');
@@ -30,7 +30,7 @@ module.exports = {
3030
keys: constants.eventDataKeys
3131
}),
3232

33-
hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
33+
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
3434
flags: ['name', 'x', 'y', 'text', 'percent initial', 'percent previous', 'percent total']
3535
}),
3636

‎src/traces/funnelarea/attributes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
'use strict';
1010

1111
var pieAttrs = require('../pie/attributes');
12-
var plotAttrs = require('../../plots/attributes');
12+
var baseAttrs = require('../../plots/attributes');
1313
var domainAttrs = require('../../plots/domain').attributes;
1414
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
1515
var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
@@ -58,7 +58,7 @@ module.exports = {
5858
keys: ['label', 'color', 'value', 'text', 'percent']
5959
}),
6060

61-
hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
61+
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
6262
flags: ['label', 'text', 'value', 'percent', 'name']
6363
}),
6464

‎src/traces/image/attributes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
'use strict';
1010

11-
var plotAttrs = require('../../plots/attributes');
11+
var baseAttrs = require('../../plots/attributes');
1212
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
1313
var extendFlat = require('../../lib/extend').extendFlat;
1414
var colormodel = require('./constants').colormodel;
@@ -108,7 +108,7 @@ module.exports = extendFlat({
108108
editType: 'plot',
109109
description: 'Same as `text`.'
110110
},
111-
hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
111+
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
112112
flags: ['x', 'y', 'z', 'color', 'name', 'text'],
113113
dflt: 'x+y+z+text+name'
114114
}),

‎src/traces/parcats/attributes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
'use strict';
1010

1111
var extendFlat = require('../../lib/extend').extendFlat;
12-
var plotAttrs = require('../../plots/attributes');
12+
var baseAttrs = require('../../plots/attributes');
1313
var fontAttrs = require('../../plots/font_attributes');
1414
var colorScaleAttrs = require('../../components/colorscale/attributes');
1515
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
@@ -47,7 +47,7 @@ var line = extendFlat(
4747
module.exports = {
4848
domain: domainAttrs({name: 'parcats', trace: true, editType: 'calc'}),
4949

50-
hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
50+
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
5151
flags: ['count', 'probability'],
5252
editType: 'plot',
5353
arrayOk: false

‎src/traces/pie/attributes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
'use strict';
1010

11-
var plotAttrs = require('../../plots/attributes');
11+
var baseAttrs = require('../../plots/attributes');
1212
var domainAttrs = require('../../plots/domain').attributes;
1313
var fontAttrs = require('../../plots/font_attributes');
1414
var colorAttrs = require('../../components/color/attributes');
@@ -158,7 +158,7 @@ module.exports = {
158158
'Determines which trace information appear on the graph.'
159159
].join(' ')
160160
},
161-
hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
161+
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
162162
flags: ['label', 'text', 'value', 'percent', 'name']
163163
}),
164164
hovertemplate: hovertemplateAttrs({}, {

‎src/traces/sankey/attributes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
'use strict';
1010

1111
var fontAttrs = require('../../plots/font_attributes');
12-
var plotAttrs = require('../../plots/attributes');
12+
var baseAttrs = require('../../plots/attributes');
1313
var colorAttrs = require('../../components/color/attributes');
1414
var fxAttrs = require('../../components/fx/attributes');
1515
var domainAttrs = require('../../plots/domain').attributes;
@@ -23,7 +23,7 @@ var overrideAll = require('../../plot_api/edit_types').overrideAll;
2323
var FORMAT_LINK = require('../../constants/docs').FORMAT_LINK;
2424

2525
var attrs = module.exports = overrideAll({
26-
hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
26+
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
2727
flags: [],
2828
arrayOk: false,
2929
description: [

‎src/traces/scattercarpet/attributes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
'use strict';
1010

1111
var scatterAttrs = require('../scatter/attributes');
12-
var plotAttrs = require('../../plots/attributes');
12+
var baseAttrs = require('../../plots/attributes');
1313
var hovertemplateAttrs = require('../../plots/template_attributes').hovertemplateAttrs;
1414
var texttemplateAttrs = require('../../plots/template_attributes').texttemplateAttrs;
1515
var colorScaleAttrs = require('../../components/colorscale/attributes');
@@ -118,7 +118,7 @@ module.exports = {
118118
selected: scatterAttrs.selected,
119119
unselected: scatterAttrs.unselected,
120120

121-
hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
121+
hoverinfo: extendFlat({}, baseAttrs.hoverinfo, {
122122
flags: ['a', 'b', 'text', 'name']
123123
}),
124124
hoveron: scatterAttrs.hoveron,

0 commit comments

Comments
 (0)