Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6cf9f32

Browse files
archmojarchmoj
authored
Merge pull request plotly#5315 from plotly/fix5314-reduce-minfinalheight
Adjust minfinalheight in automargin routine to allow narrow subplots e.g. gauge
2 parents fa781ed + 6126654 commit 6cf9f32

File tree

6 files changed

+115
-24
lines changed

6 files changed

+115
-24
lines changed

‎src/plots/plots.js

Lines changed: 61 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1866,8 +1866,13 @@ function initMargins(fullLayout) {
18661866
if(!fullLayout._pushmarginIds) fullLayout._pushmarginIds = {};
18671867
}
18681868

1869-
var minFinalWidth = 64; // could possibly be exposed as layout.margin.minfinalwidth
1870-
var minFinalHeight = 64; // could possibly be exposed as layout.margin.minfinalheight
1869+
// non-negotiable - this is the smallest height we will allow users to specify via explicit margins
1870+
var MIN_SPECIFIED_WIDTH = 2;
1871+
var MIN_SPECIFIED_HEIGHT = 2;
1872+
1873+
// could be exposed as an option - the smallest we will allow automargin to shrink a larger plot
1874+
var MIN_REDUCED_WIDTH = 64;
1875+
var MIN_REDUCED_HEIGHT = 64;
18711876

18721877
/**
18731878
* autoMargin: called by components that may need to expand the margins to
@@ -1888,36 +1893,53 @@ plots.autoMargin = function(gd, id, o) {
18881893
var fullLayout = gd._fullLayout;
18891894
var width = fullLayout.width;
18901895
var height = fullLayout.height;
1896+
var margin = fullLayout.margin;
1897+
1898+
var minFinalWidth = Lib.constrain(
1899+
width - margin.l - margin.r,
1900+
MIN_SPECIFIED_WIDTH,
1901+
MIN_REDUCED_WIDTH
1902+
);
1903+
1904+
var minFinalHeight = Lib.constrain(
1905+
height - margin.t - margin.b,
1906+
MIN_SPECIFIED_HEIGHT,
1907+
MIN_REDUCED_HEIGHT
1908+
);
1909+
18911910
var maxSpaceW = Math.max(0, width - minFinalWidth);
18921911
var maxSpaceH = Math.max(0, height - minFinalHeight);
18931912

18941913
var pushMargin = fullLayout._pushmargin;
18951914
var pushMarginIds = fullLayout._pushmarginIds;
18961915

1897-
if(fullLayout.margin.autoexpand !== false) {
1916+
if(margin.autoexpand !== false) {
18981917
if(!o) {
18991918
delete pushMargin[id];
19001919
delete pushMarginIds[id];
19011920
} else {
19021921
var pad = o.pad;
19031922
if(pad === undefined) {
1904-
var margin = fullLayout.margin;
19051923
// if no explicit pad is given, use 12px unless there's a
19061924
// specified margin that's smaller than that
19071925
pad = Math.min(12, margin.l, margin.r, margin.t, margin.b);
19081926
}
19091927

19101928
// if the item is too big, just give it enough automargin to
19111929
// make sure you can still grab it and bring it back
1912-
var rW = (o.l + o.r) / maxSpaceW;
1913-
if(rW > 1) {
1914-
o.l /= rW;
1915-
o.r /= rW;
1930+
if(maxSpaceW) {
1931+
var rW = (o.l + o.r) / maxSpaceW;
1932+
if(rW > 1) {
1933+
o.l /= rW;
1934+
o.r /= rW;
1935+
}
19161936
}
1917-
var rH = (o.t + o.b) / maxSpaceH;
1918-
if(rH > 1) {
1919-
o.t /= rH;
1920-
o.b /= rH;
1937+
if(maxSpaceH) {
1938+
var rH = (o.t + o.b) / maxSpaceH;
1939+
if(rH > 1) {
1940+
o.t /= rH;
1941+
o.b /= rH;
1942+
}
19211943
}
19221944

19231945
var xl = o.xl !== undefined ? o.xl : o.x;
@@ -1944,8 +1966,6 @@ plots.doAutoMargin = function(gd) {
19441966
var fullLayout = gd._fullLayout;
19451967
var width = fullLayout.width;
19461968
var height = fullLayout.height;
1947-
var maxSpaceW = Math.max(0, width - minFinalWidth);
1948-
var maxSpaceH = Math.max(0, height - minFinalHeight);
19491969

19501970
if(!fullLayout._size) fullLayout._size = {};
19511971
initMargins(fullLayout);
@@ -2018,16 +2038,35 @@ plots.doAutoMargin = function(gd) {
20182038
}
20192039
}
20202040

2021-
var rW = (ml + mr) / maxSpaceW;
2022-
if(rW > 1) {
2023-
ml /= rW;
2024-
mr /= rW;
2041+
var minFinalWidth = Lib.constrain(
2042+
width - margin.l - margin.r,
2043+
MIN_SPECIFIED_WIDTH,
2044+
MIN_REDUCED_WIDTH
2045+
);
2046+
2047+
var minFinalHeight = Lib.constrain(
2048+
height - margin.t - margin.b,
2049+
MIN_SPECIFIED_HEIGHT,
2050+
MIN_REDUCED_HEIGHT
2051+
);
2052+
2053+
var maxSpaceW = Math.max(0, width - minFinalWidth);
2054+
var maxSpaceH = Math.max(0, height - minFinalHeight);
2055+
2056+
if(maxSpaceW) {
2057+
var rW = (ml + mr) / maxSpaceW;
2058+
if(rW > 1) {
2059+
ml /= rW;
2060+
mr /= rW;
2061+
}
20252062
}
20262063

2027-
var rH = (mb + mt) / maxSpaceH;
2028-
if(rH > 1) {
2029-
mb /= rH;
2030-
mt /= rH;
2064+
if(maxSpaceH) {
2065+
var rH = (mb + mt) / maxSpaceH;
2066+
if(rH > 1) {
2067+
mb /= rH;
2068+
mt /= rH;
2069+
}
20312070
}
20322071

20332072
gs.l = Math.round(ml);

‎test/image/baselines/automargin-narrow-indicator.png

4.99 KB
Loading

‎test/image/mocks/automargin-narrow-indicator.json

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"config": {
3+
"displayModeBar": false
4+
},
5+
"data": [
6+
{
7+
"type": "indicator",
8+
"mode": "number+gauge",
9+
"gauge": {
10+
"shape": "bullet",
11+
"axis": {
12+
"range": [
13+
0,
14+
1
15+
],
16+
"tickfont": {
17+
"size": 12
18+
}
19+
}
20+
},
21+
"value": 0.5,
22+
"number": {
23+
"font": {
24+
"size": 48
25+
}
26+
}
27+
}
28+
],
29+
"layout": {
30+
"width": 300,
31+
"height": 60,
32+
"margin": {
33+
"l": 10,
34+
"r": 10,
35+
"t": 25,
36+
"b": 25
37+
},
38+
"title": {
39+
"text": "Automargin indicator",
40+
"xanchor": "left",
41+
"x": 0,
42+
"yanchor": "top",
43+
"y": 1,
44+
"pad": {
45+
"t": 5,
46+
"l": 10
47+
}
48+
}
49+
}
50+
}

‎test/jasmine/tests/indicator_test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ describe('Indicator plot', function() {
170170
return Plotly.relayout(gd, {width: 200, height: 200});
171171
})
172172
.then(function() {
173-
checkNumbersScale(0.4794007490636704, 'should scale down');
173+
checkNumbersScale(0.2, 'should scale down');
174174
return Plotly.relayout(gd, {width: 400, height: 400});
175175
})
176176
.then(function() {

‎test/jasmine/tests/legend_scroll_test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -403,7 +403,7 @@ describe('The legend', function() {
403403
expect(countLegendClipPaths(gd)).toBe(1);
404404

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

409409
done();

‎test/jasmine/tests/mock_test.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ var list = [
4242
'automargin-large-margins',
4343
'automargin-large-margins-both-sides',
4444
'automargin-large-margins-horizontal',
45+
'automargin-narrow-indicator',
4546
'automargin-mirror-all',
4647
'automargin-mirror-allticks',
4748
'automargin-multiline-titles',
@@ -1126,6 +1127,7 @@ figs['arrow-markers'] = require('@mocks/arrow-markers');
11261127
figs['automargin-large-margins'] = require('@mocks/automargin-large-margins');
11271128
figs['automargin-large-margins-both-sides'] = require('@mocks/automargin-large-margins-both-sides');
11281129
figs['automargin-large-margins-horizontal'] = require('@mocks/automargin-large-margins-horizontal');
1130+
figs['automargin-narrow-indicator'] = require('@mocks/automargin-narrow-indicator');
11291131
figs['automargin-mirror-all'] = require('@mocks/automargin-mirror-all');
11301132
figs['automargin-mirror-allticks'] = require('@mocks/automargin-mirror-allticks');
11311133
figs['automargin-multiline-titles'] = require('@mocks/automargin-multiline-titles');

0 commit comments

Comments
 (0)