Skip to content

Commit 96d7511

Browse files
archmojarchmoj
authored
Merge pull request #5237 from plotly/fix4459-labels-disappear
Provide room for large computed margins
2 parents ff0b32e + 565f942 commit 96d7511

12 files changed

+207
-16
lines changed

‎src/plots/plots.js

+34-12
Original file line numberDiff line numberDiff line change
@@ -1864,6 +1864,9 @@ function initMargins(fullLayout) {
18641864
if(!fullLayout._pushmarginIds) fullLayout._pushmarginIds = {};
18651865
}
18661866

1867+
var minFinalWidth = 64; // could possibly be exposed as layout.margin.minfinalwidth
1868+
var minFinalHeight = 64; // could possibly be exposed as layout.margin.minfinalheight
1869+
18671870
/**
18681871
* autoMargin: called by components that may need to expand the margins to
18691872
* be rendered on-plot.
@@ -1881,6 +1884,10 @@ function initMargins(fullLayout) {
18811884
*/
18821885
plots.autoMargin = function(gd, id, o) {
18831886
var fullLayout = gd._fullLayout;
1887+
var width = fullLayout.width;
1888+
var height = fullLayout.height;
1889+
var maxSpaceW = Math.max(0, width - minFinalWidth);
1890+
var maxSpaceH = Math.max(0, height - minFinalHeight);
18841891

18851892
var pushMargin = fullLayout._pushmargin;
18861893
var pushMarginIds = fullLayout._pushmarginIds;
@@ -1900,13 +1907,15 @@ plots.autoMargin = function(gd, id, o) {
19001907

19011908
// if the item is too big, just give it enough automargin to
19021909
// make sure you can still grab it and bring it back
1903-
if(o.l + o.r > fullLayout.width * 0.5) {
1904-
Lib.log('Margin push', id, 'is too big in x, dropping');
1905-
o.l = o.r = 0;
1910+
var rW = (o.l + o.r) / maxSpaceW;
1911+
if(rW > 1) {
1912+
o.l /= rW;
1913+
o.r /= rW;
19061914
}
1907-
if(o.b + o.t > fullLayout.height * 0.5) {
1908-
Lib.log('Margin push', id, 'is too big in y, dropping');
1909-
o.b = o.t = 0;
1915+
var rH = (o.t + o.b) / maxSpaceH;
1916+
if(rH > 1) {
1917+
o.t /= rH;
1918+
o.b /= rH;
19101919
}
19111920

19121921
var xl = o.xl !== undefined ? o.xl : o.x;
@@ -1931,6 +1940,11 @@ plots.autoMargin = function(gd, id, o) {
19311940

19321941
plots.doAutoMargin = function(gd) {
19331942
var fullLayout = gd._fullLayout;
1943+
var width = fullLayout.width;
1944+
var height = fullLayout.height;
1945+
var maxSpaceW = Math.max(0, width - minFinalWidth);
1946+
var maxSpaceH = Math.max(0, height - minFinalHeight);
1947+
19341948
if(!fullLayout._size) fullLayout._size = {};
19351949
initMargins(fullLayout);
19361950

@@ -1945,8 +1959,6 @@ plots.doAutoMargin = function(gd) {
19451959
var mr = margin.r;
19461960
var mt = margin.t;
19471961
var mb = margin.b;
1948-
var width = fullLayout.width;
1949-
var height = fullLayout.height;
19501962
var pushMargin = fullLayout._pushmargin;
19511963
var pushMarginIds = fullLayout._pushmarginIds;
19521964

@@ -1978,11 +1990,10 @@ plots.doAutoMargin = function(gd) {
19781990
if(isNumeric(pl) && pushMargin[k2].r) {
19791991
var fr = pushMargin[k2].r.val;
19801992
var pr = pushMargin[k2].r.size;
1981-
19821993
if(fr > fl) {
19831994
var newL = (pl * fr + (pr - width) * fl) / (fr - fl);
19841995
var newR = (pr * (1 - fl) + (pl - width) * (1 - fr)) / (fr - fl);
1985-
if(newL >= 0 && newR >= 0 && width - (newL + newR) > 0 && newL + newR > ml + mr) {
1996+
if(newL + newR > ml + mr) {
19861997
ml = newL;
19871998
mr = newR;
19881999
}
@@ -1992,11 +2003,10 @@ plots.doAutoMargin = function(gd) {
19922003
if(isNumeric(pb) && pushMargin[k2].t) {
19932004
var ft = pushMargin[k2].t.val;
19942005
var pt = pushMargin[k2].t.size;
1995-
19962006
if(ft > fb) {
19972007
var newB = (pb * ft + (pt - height) * fb) / (ft - fb);
19982008
var newT = (pt * (1 - fb) + (pb - height) * (1 - ft)) / (ft - fb);
1999-
if(newB >= 0 && newT >= 0 && height - (newT + newB) > 0 && newB + newT > mb + mt) {
2009+
if(newB + newT > mb + mt) {
20002010
mb = newB;
20012011
mt = newT;
20022012
}
@@ -2006,6 +2016,18 @@ plots.doAutoMargin = function(gd) {
20062016
}
20072017
}
20082018

2019+
var rW = (ml + mr) / maxSpaceW;
2020+
if(rW > 1) {
2021+
ml /= rW;
2022+
mr /= rW;
2023+
}
2024+
2025+
var rH = (mb + mt) / maxSpaceH;
2026+
if(rH > 1) {
2027+
mb /= rH;
2028+
mt /= rH;
2029+
}
2030+
20092031
gs.l = Math.round(ml);
20102032
gs.r = Math.round(mr);
20112033
gs.t = Math.round(mt);

‎test/image/baselines/automargin-large-margins-both-sides.png

11.7 KB
Loading

‎test/image/baselines/automargin-large-margins-horizontal.png

14.2 KB
Loading

‎test/image/baselines/automargin-large-margins.png

17.3 KB
Loading

‎test/image/baselines/legend_small_horizontal.png

670 Bytes
Loading

‎test/image/mocks/automargin-large-margins-both-sides.json

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"data": [{
3+
"name": "< D E A T H >",
4+
"marker": { "color": "red" },
5+
"y": [
6+
"Antonio Vivaldi",
7+
"Johann Sebastian Bach",
8+
"Wolfgang Amadeus Mozart",
9+
"Ludwig van Beethoven"
10+
],
11+
"x": [
12+
"1741",
13+
"1750",
14+
"1791",
15+
"1827"
16+
]
17+
},
18+
{
19+
"name": "< B I R T H >",
20+
"marker": { "color": "blue" },
21+
"y": [
22+
"Antonio Vivaldi",
23+
"Johann Sebastian Bach",
24+
"Wolfgang Amadeus Mozart",
25+
"Ludwig van Beethoven"
26+
],
27+
"x": [
28+
"1678",
29+
"1685",
30+
"1756",
31+
"1770"
32+
]
33+
}],
34+
"layout": {
35+
"title": {
36+
"text": "Longest and shortest<br>names and time periods"
37+
},
38+
"width": 200,
39+
"height": 200,
40+
"margin": {
41+
"t": 80,
42+
"b": 20,
43+
"l": 20,
44+
"r": 20
45+
},
46+
"xaxis": {
47+
"type": "date",
48+
"automargin": true
49+
},
50+
"yaxis": {
51+
"automargin": true
52+
}
53+
}
54+
}

‎test/image/mocks/automargin-large-margins-horizontal.json

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"data": [{
3+
"name": "< D E A T H >",
4+
"marker": { "color": "red" },
5+
"y": [
6+
"Antonio Vivaldi",
7+
"Johann Sebastian Bach",
8+
"Wolfgang Amadeus Mozart",
9+
"Ludwig van Beethoven"
10+
],
11+
"x": [
12+
"1741",
13+
"1750",
14+
"1791",
15+
"1827"
16+
]
17+
},
18+
{
19+
"name": "< B I R T H >",
20+
"marker": { "color": "blue" },
21+
"y": [
22+
"Antonio Vivaldi",
23+
"Johann Sebastian Bach",
24+
"Wolfgang Amadeus Mozart",
25+
"Ludwig van Beethoven"
26+
],
27+
"x": [
28+
"1678",
29+
"1685",
30+
"1756",
31+
"1770"
32+
]
33+
}],
34+
"layout": {
35+
"showlegend": false,
36+
"title": {
37+
"text": "Longest and shortest<br>names and time periods"
38+
},
39+
"width": 240,
40+
"height": 200,
41+
"margin": {
42+
"t": 80,
43+
"b": 20,
44+
"l": 20,
45+
"r": 20
46+
},
47+
"xaxis": {
48+
"type": "date",
49+
"automargin": true
50+
},
51+
"yaxis": {
52+
"automargin": true
53+
}
54+
}
55+
}

‎test/image/mocks/automargin-large-margins.json

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"data": [{
3+
"name": "< D E A T H >",
4+
"marker": { "color": "red" },
5+
"x": [
6+
"Antonio Vivaldi",
7+
"Johann Sebastian Bach",
8+
"Wolfgang Amadeus Mozart",
9+
"Ludwig van Beethoven"
10+
],
11+
"y": [
12+
"1741",
13+
"1750",
14+
"1791",
15+
"1827"
16+
]
17+
},
18+
{
19+
"name": "< B I R T H >",
20+
"marker": { "color": "blue" },
21+
"x": [
22+
"Antonio Vivaldi",
23+
"Johann Sebastian Bach",
24+
"Wolfgang Amadeus Mozart",
25+
"Ludwig van Beethoven"
26+
],
27+
"y": [
28+
"1678",
29+
"1685",
30+
"1756",
31+
"1770"
32+
]
33+
}],
34+
"layout": {
35+
"title": {
36+
"text": "Longest and shortest<br>names and time periods"
37+
},
38+
"width": 240,
39+
"height": 300,
40+
"margin": {
41+
"t": 80,
42+
"b": 20,
43+
"l": 20,
44+
"r": 20
45+
},
46+
"yaxis": {
47+
"type": "date",
48+
"automargin": true
49+
},
50+
"xaxis": {
51+
"automargin": true
52+
}
53+
}
54+
}

‎test/jasmine/tests/axes_test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3856,7 +3856,7 @@ describe('Test axes', function() {
38563856
.then(function() { return Plotly.relayout(gd, 'height', 100); })
38573857
.then(function() {
38583858
_assert('after relayout to *small* height', {
3859-
bottomLowerBound: 30,
3859+
bottomLowerBound: 15,
38603860
totalHeight: 100
38613861
});
38623862
})
@@ -3896,7 +3896,7 @@ describe('Test axes', function() {
38963896
.then(function() { return Plotly.relayout(gd, 'width', 100); })
38973897
.then(function() {
38983898
_assert('after relayout to *small* width', {
3899-
leftLowerBound: 30,
3899+
leftLowerBound: 15,
39003900
totalWidth: 100
39013901
});
39023902
})

‎test/jasmine/tests/indicator_test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ describe('Indicator plot', function() {
171171
return Plotly.relayout(gd, {width: 200, height: 200});
172172
})
173173
.then(function() {
174-
checkNumbersScale(0.2, 'should scale down');
174+
checkNumbersScale(0.4794007490636704, 'should scale down');
175175
return Plotly.relayout(gd, {width: 400, height: 400});
176176
})
177177
.then(function() {

‎test/jasmine/tests/legend_scroll_test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -405,7 +405,7 @@ describe('The legend', function() {
405405
expect(countLegendClipPaths(gd)).toBe(1);
406406

407407
// clippath resized to new height less than new plot height
408-
expect(+legendHeight).toBe(getPlotHeight(gd));
408+
expect(+legendHeight).toBeGreaterThan(getPlotHeight(gd));
409409
expect(+legendHeight).toBeLessThan(+origLegendHeight);
410410

411411
done();

‎test/jasmine/tests/mock_test.js

+6
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ var list = [
3939
'annotations',
4040
'annotations-autorange',
4141
'arrow-markers',
42+
'automargin-large-margins',
43+
'automargin-large-margins-both-sides',
44+
'automargin-large-margins-horizontal',
4245
'automargin-mirror-all',
4346
'automargin-mirror-allticks',
4447
'automargin-multiline-titles',
@@ -1104,6 +1107,9 @@ figs['animation_bar'] = require('@mocks/animation_bar');
11041107
// figs['annotations'] = require('@mocks/annotations');
11051108
// figs['annotations-autorange'] = require('@mocks/annotations-autorange');
11061109
figs['arrow-markers'] = require('@mocks/arrow-markers');
1110+
figs['automargin-large-margins'] = require('@mocks/automargin-large-margins');
1111+
figs['automargin-large-margins-both-sides'] = require('@mocks/automargin-large-margins-both-sides');
1112+
figs['automargin-large-margins-horizontal'] = require('@mocks/automargin-large-margins-horizontal');
11071113
figs['automargin-mirror-all'] = require('@mocks/automargin-mirror-all');
11081114
figs['automargin-mirror-allticks'] = require('@mocks/automargin-mirror-allticks');
11091115
figs['automargin-multiline-titles'] = require('@mocks/automargin-multiline-titles');

0 commit comments

Comments
 (0)