Skip to content

Commit 0ebcde3

Browse files
archmojarchmoj
committed
fix 4354 flip contour legends when colorscale is reversed - prep address 4355
1 parent f78f3cd commit 0ebcde3

File tree

5 files changed

+370
-25
lines changed

5 files changed

+370
-25
lines changed

‎src/components/legend/style.js‎

Lines changed: 44 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = function style(s, gd) {
3030
var legend = fullLayout.legend;
3131
var constantItemSizing = legend.itemsizing === 'constant';
3232

33-
function boundLineWidth(mlw, cont, max, cst) {
33+
var boundLineWidth = function(mlw, cont, max, cst) {
3434
var v;
3535
if(mlw + 1) {
3636
v = mlw;
@@ -40,7 +40,17 @@ module.exports = function style(s, gd) {
4040
return 0;
4141
}
4242
return constantItemSizing ? cst : Math.min(v, max);
43-
}
43+
};
44+
45+
var getColorscale = function(trace) {
46+
var coloraxis = trace.coloraxis;
47+
return (coloraxis ? fullLayout[coloraxis] : trace).colorscale;
48+
};
49+
50+
var getReversescale = function(trace) {
51+
var coloraxis = trace.coloraxis;
52+
return (coloraxis ? fullLayout[coloraxis] : trace).reversescale;
53+
};
4454

4555
s.each(function(d) {
4656
var traceGroup = d3.select(this);
@@ -104,6 +114,28 @@ module.exports = function style(s, gd) {
104114
var showGradientFill = false;
105115
var dMod, tMod;
106116

117+
var colorscale = getColorscale(trace);
118+
var reversescale = getReversescale(trace);
119+
120+
var fillGradient = function(s) {
121+
if(s.size()) {
122+
var gradientID = 'legendfill-' + trace.uid;
123+
Drawing.gradient(s, gd, gradientID,
124+
getGradientDirection(reversescale),
125+
colorscale, 'fill');
126+
}
127+
};
128+
129+
var lineGradient = function(s) {
130+
if(s.size()) {
131+
var gradientID = 'legendline-' + trace.uid;
132+
Drawing.lineGroupStyle(s);
133+
Drawing.gradient(s, gd, gradientID,
134+
getGradientDirection(reversescale),
135+
colorscale, 'stroke');
136+
}
137+
};
138+
107139
if(contours) {
108140
var coloring = contours.coloring;
109141

@@ -158,23 +190,6 @@ module.exports = function style(s, gd) {
158190
// This issue (and workaround) exist across (Mac) Chrome, FF, and Safari
159191
line.attr('d', pathStart + (showGradientLine ? 'l30,0.0001' : 'h30'))
160192
.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-
}
178193
}
179194

180195
function stylePoints(d) {
@@ -278,7 +293,7 @@ module.exports = function style(s, gd) {
278293
var trace = d[0].trace;
279294

280295
var ptsData = [];
281-
if(trace.type === 'waterfall' && trace.visible) {
296+
if(trace.visible && trace.type === 'waterfall') {
282297
ptsData = d[0].hasTotals ?
283298
[['increasing', 'M-6,-6V6H0Z'], ['totals', 'M6,6H0L-6,-6H-0Z'], ['decreasing', 'M6,6V-6H0Z']] :
284299
[['increasing', 'M-6,-6V6H6Z'], ['decreasing', 'M6,6V-6H-6Z']];
@@ -321,7 +336,7 @@ module.exports = function style(s, gd) {
321336
var markerLine = marker.line || {};
322337

323338
var isVisible = (!desiredType) ? Registry.traceIs(trace, 'bar') :
324-
(trace.type === desiredType && trace.visible);
339+
(trace.visible && trace.type === desiredType);
325340

326341
var barpath = d3.select(lThis).select('g.legendpoints')
327342
.selectAll('path.legend' + desiredType)
@@ -348,7 +363,7 @@ module.exports = function style(s, gd) {
348363

349364
var pts = d3.select(this).select('g.legendpoints')
350365
.selectAll('path.legendbox')
351-
.data(Registry.traceIs(trace, 'box-violin') && trace.visible ? [d] : []);
366+
.data(trace.visible && Registry.traceIs(trace, 'box-violin') ? [d] : []);
352367
pts.enter().append('path').classed('legendbox', true)
353368
// if we want the median bar, prepend M6,0H-6
354369
.attr('d', 'M6,6H-6V-6H6Z')
@@ -386,7 +401,7 @@ module.exports = function style(s, gd) {
386401

387402
var pts = d3.select(this).select('g.legendpoints')
388403
.selectAll('path.legendcandle')
389-
.data(trace.type === 'candlestick' && trace.visible ? [d, d] : []);
404+
.data(trace.visible && trace.type === 'candlestick' ? [d, d] : []);
390405
pts.enter().append('path').classed('legendcandle', true)
391406
.attr('d', function(_, i) {
392407
if(i) return 'M-15,0H-8M-8,6V-6H8Z'; // increasing
@@ -413,7 +428,7 @@ module.exports = function style(s, gd) {
413428

414429
var pts = d3.select(this).select('g.legendpoints')
415430
.selectAll('path.legendohlc')
416-
.data(trace.type === 'ohlc' && trace.visible ? [d, d] : []);
431+
.data(trace.visible && trace.type === 'ohlc' ? [d, d] : []);
417432
pts.enter().append('path').classed('legendohlc', true)
418433
.attr('d', function(_, i) {
419434
if(i) return 'M-15,0H0M-8,-6V0'; // increasing
@@ -448,7 +463,7 @@ module.exports = function style(s, gd) {
448463
var trace = d0.trace;
449464

450465
var isVisible = (!desiredType) ? Registry.traceIs(trace, desiredType) :
451-
(trace.type === desiredType && trace.visible);
466+
(trace.visible && trace.type === desiredType);
452467

453468
var pts = d3.select(lThis).select('g.legendpoints')
454469
.selectAll('path.legend' + desiredType)
@@ -472,3 +487,7 @@ module.exports = function style(s, gd) {
472487
}
473488
}
474489
};
490+
491+
function getGradientDirection(reversescale) {
492+
return reversescale ? 'horizontal' : 'horizontalreversed';
493+
}

‎test/image/baselines/contour_legend-colorscale.png‎

158 KB
Loading

‎test/image/baselines/histogram2d_legend-colorscale.png‎

120 KB
Loading

‎test/image/mocks/contour_legend-colorscale.json‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
{
2+
"data": [
3+
{
4+
"showlegend": true,
5+
"showscale": false,
6+
"colorscale": [[0, "blue"], [1, "red"]],
7+
"x": [0, 10, 12],
8+
"y": [10, 12, 0],
9+
"z": [1, 2, 3],
10+
"contours": {"coloring": "heatmap"},
11+
"line": {"color": "#fff"},
12+
"type": "contour",
13+
"name": "blue-red"
14+
},
15+
{
16+
"xaxis": "x2",
17+
"yaxis": "y2",
18+
"showlegend": true,
19+
"showscale": false,
20+
"reversescale": true,
21+
"colorscale": [[0, "blue"], [1, "red"]],
22+
"x": [0, 10, 12],
23+
"y": [10, 12, 0],
24+
"z": [1, 2, 3],
25+
"contours": {"coloring": "heatmap"},
26+
"line": {"color": "#fff"},
27+
"type": "contour",
28+
"name": "reversed blue-red"
29+
},
30+
{
31+
"xaxis": "x3",
32+
"yaxis": "y3",
33+
"showlegend": true,
34+
"showscale": false,
35+
"colorscale": [[0, "red"], [1, "blue"]],
36+
"x": [0, 10, 12],
37+
"y": [10, 12, 0],
38+
"z": [1, 2, 3],
39+
"contours": {"coloring": "heatmap"},
40+
"line": {"color": "#fff"},
41+
"type": "contour",
42+
"name": "red-blue"
43+
},
44+
{
45+
"xaxis": "x4",
46+
"yaxis": "y4",
47+
"showlegend": true,
48+
"showscale": false,
49+
"reversescale": true,
50+
"colorscale": [[0, "red"], [1, "blue"]],
51+
"x": [0, 10, 12],
52+
"y": [10, 12, 0],
53+
"z": [1, 2, 3],
54+
"contours": {"coloring": "heatmap"},
55+
"line": {"color": "#fff"},
56+
"type": "contour",
57+
"name": "reversed blue-red"
58+
}
59+
],
60+
"layout": {
61+
"title": "<b>contour legends with heatmap coloring</b><br>red-blue should be equal to reversed blue-red.<br>i.e. display identical legends for identical graphs",
62+
"margin": {
63+
"t": 125,
64+
"b": 25
65+
},
66+
"width": 800,
67+
"height": 600,
68+
"xaxis": {
69+
"domain": [
70+
0,
71+
0.45
72+
]
73+
},
74+
"xaxis2": {
75+
"anchor": "y2",
76+
"domain": [
77+
0.55,
78+
1
79+
]
80+
},
81+
"xaxis3": {
82+
"anchor": "y3",
83+
"domain": [
84+
0,
85+
0.45
86+
]
87+
},
88+
"xaxis4": {
89+
"anchor": "y4",
90+
"domain": [
91+
0.55,
92+
1
93+
]
94+
},
95+
"yaxis": {
96+
"domain": [
97+
0,
98+
0.45
99+
]
100+
},
101+
"yaxis2": {
102+
"anchor": "x2",
103+
"domain": [
104+
0.55,
105+
1
106+
]
107+
},
108+
"yaxis3": {
109+
"anchor": "x3",
110+
"domain": [
111+
0.55,
112+
1
113+
]
114+
},
115+
"yaxis4": {
116+
"anchor": "x4",
117+
"domain": [
118+
0,
119+
0.45
120+
]
121+
}
122+
}
123+
}

0 commit comments

Comments
 (0)