diff --git a/draftlogs/7417_fix.md b/draftlogs/7417_fix.md new file mode 100644 index 00000000000..62aef9598f7 --- /dev/null +++ b/draftlogs/7417_fix.md @@ -0,0 +1 @@ +- Fix hidden ticklabels taking up plot space [[#7417](https://github.com/plotly/plotly.js/pull/7417)] diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js index a5cf18162df..fc45da617dc 100644 --- a/src/plots/cartesian/axes.js +++ b/src/plots/cartesian/axes.js @@ -2972,11 +2972,13 @@ function calcLabelLevelBbox(ax, cls, mainLinePositionShift) { // (like in fixLabelOverlaps) instead and use Axes.getPxPosition // together with the makeLabelFns outputs and `tickangle` // to compute one bbox per (tick value x tick style) - var bb = Drawing.bBox(thisLabel.node().parentNode); - top = Math.min(top, bb.top); - bottom = Math.max(bottom, bb.bottom); - left = Math.min(left, bb.left); - right = Math.max(right, bb.right); + if (thisLabel.node().style.display !== 'none') { + var bb = Drawing.bBox(thisLabel.node().parentNode); + top = Math.min(top, bb.top); + bottom = Math.max(bottom, bb.bottom); + left = Math.min(left, bb.left); + right = Math.max(right, bb.right); + } }); } else { var dummyCalc = axes.makeLabelFns(ax, mainLinePositionShift); @@ -3669,7 +3671,7 @@ axes.drawLabels = function(gd, ax, opts) { 'text-anchor': anchor }); - thisText.style('opacity', 1); // visible + thisText.style('display', null); // visible if(ax._adjustTickLabelsOverflow) { ax._adjustTickLabelsOverflow(); @@ -3727,9 +3729,9 @@ axes.drawLabels = function(gd, ax, opts) { var t = thisLabel.select('text'); if(adjust) { - if(hideOverflow) t.style('opacity', 0); // hidden - } else { - t.style('opacity', 1); // visible + if(hideOverflow) t.style('display', 'none'); // hidden + } else if(t.node().style.display !== 'none'){ + t.style('display', null); if(side === 'bottom' || side === 'right') { visibleLabelMin = Math.min(visibleLabelMin, isX ? bb.top : bb.left); @@ -3806,7 +3808,7 @@ axes.drawLabels = function(gd, ax, opts) { q > ax['_visibleLabelMin_' + anchorAx._id] ) { t.style('display', 'none'); // hidden - } else if(e.K === 'tick' && !idx) { + } else if(e.K === 'tick' && !idx && t.node().style.display !== 'none') { t.style('display', null); // visible } }); diff --git a/test/image/baselines/container-colorbar-vertical-w-margin.png b/test/image/baselines/container-colorbar-vertical-w-margin.png index 44cb49a9789..96027fc5e9d 100644 Binary files a/test/image/baselines/container-colorbar-vertical-w-margin.png and b/test/image/baselines/container-colorbar-vertical-w-margin.png differ diff --git a/test/image/baselines/container-colorbar-vertical.png b/test/image/baselines/container-colorbar-vertical.png index 449a3be64e1..1202a228663 100644 Binary files a/test/image/baselines/container-colorbar-vertical.png and b/test/image/baselines/container-colorbar-vertical.png differ diff --git a/test/image/baselines/ticklabelposition-5.png b/test/image/baselines/ticklabelposition-5.png index bdd338c6cc6..07cea800fa6 100644 Binary files a/test/image/baselines/ticklabelposition-5.png and b/test/image/baselines/ticklabelposition-5.png differ diff --git a/test/image/baselines/ticklabelposition-a.png b/test/image/baselines/ticklabelposition-a.png index 692c709d6ac..24bbd590503 100644 Binary files a/test/image/baselines/ticklabelposition-a.png and b/test/image/baselines/ticklabelposition-a.png differ diff --git a/test/image/baselines/ticklabelposition-b.png b/test/image/baselines/ticklabelposition-b.png index 3aba857098e..c0b1353f292 100644 Binary files a/test/image/baselines/ticklabelposition-b.png and b/test/image/baselines/ticklabelposition-b.png differ diff --git a/test/image/baselines/ticklabelposition-c.png b/test/image/baselines/ticklabelposition-c.png index 0972c754ae9..5349e28e0d5 100644 Binary files a/test/image/baselines/ticklabelposition-c.png and b/test/image/baselines/ticklabelposition-c.png differ diff --git a/test/image/baselines/zz-label-spacing.png b/test/image/baselines/zz-label-spacing.png new file mode 100644 index 00000000000..1d561dd408b Binary files /dev/null and b/test/image/baselines/zz-label-spacing.png differ diff --git a/test/image/baselines/zz-tickson_boundaries_ticklabelposition.png b/test/image/baselines/zz-tickson_boundaries_ticklabelposition.png index 5acf8e33d08..c06152c112d 100644 Binary files a/test/image/baselines/zz-tickson_boundaries_ticklabelposition.png and b/test/image/baselines/zz-tickson_boundaries_ticklabelposition.png differ diff --git a/test/image/mocks/zz-label-spacing.json b/test/image/mocks/zz-label-spacing.json new file mode 100644 index 00000000000..310dea817b9 --- /dev/null +++ b/test/image/mocks/zz-label-spacing.json @@ -0,0 +1,44 @@ +{ + "data": [ + { + "x": ["A", "B", "C"], + "y": [0, 40, 80], + "type": "scatter" + }, + { + "x": ["A", "B", "C"], + "y": [0, 40, 80], + "type": "scatter", + "xaxis": "x2", + "yaxis": "y2" + } + ], + "layout": { + "title": { + "text": "The vertical grid lines in the subplots should be aligned." + }, + "width": 600, + "xaxis": { + "anchor": "y" + }, + "xaxis2": { + "anchor": "y2" + }, + "yaxis": { + "range": [0, 80], + "dtick": 20, + "side": "right", + "ticklabelposition": "inside", + "anchor": "x", + "domain": [0, 0.45] + }, + "yaxis2": { + "range": [0, 100], + "dtick": 20, + "side": "right", + "ticklabelposition": "inside", + "anchor": "x2", + "domain": [0.55, 1] + } + } +} diff --git a/test/jasmine/tests/axes_test.js b/test/jasmine/tests/axes_test.js index e42cf4a60df..6314d97a1b0 100644 --- a/test/jasmine/tests/axes_test.js +++ b/test/jasmine/tests/axes_test.js @@ -1696,6 +1696,7 @@ describe('Test axes', function() { return Plotly.relayout(gd, 'xaxis.autorange', true); }).then(function() { + expect(gd._fullLayout.xaxis.range).toBeCloseToArray([0.37, 3.22], 1); }) .then(done, done.fail); @@ -6901,6 +6902,18 @@ describe('Test axes', function() { expect(positions).toEqual(expPositions); } + function _assertClose(expPositions) { + var ax = gd._fullLayout.xaxis; + + // minor positions + var positions = + ax._vals + .filter(function(d) { return d.minor; }) + .map(function(d) { return d.x; }); + + expect(positions).toBeCloseToArray(expPositions, 3); + } + it('minor tickvals', function(done) { Plotly.newPlot(gd, { data: [{ @@ -7127,7 +7140,7 @@ describe('Test axes', function() { } }) .then(function() { - _assert([ -0.22184874961635648, -0.1549019599857433, -0.09691001300805657, -0.04575749056067513, 0.4771212547196623, 0.6020599913279623, 0.7781512503836435, 0.8450980400142567, 0.9030899869919434, 0.9542425094393249, 1.4771212547196624, 1.6020599913279623, 1.7781512503836434, 1.8450980400142567, 1.9030899869919433, 1.9542425094393248, 2.477121254719662, 2.6020599913279625, 2.7781512503836434, 2.845098040014257, 2.9030899869919433, 2.9542425094393248, 3.477121254719662, 3.6020599913279625, 3.7781512503836434, 3.845098040014257, 3.9030899869919433, 3.9542425094393248 ]); + _assertClose([ -0.22184874961635648, -0.1549019599857433, -0.09691001300805657, -0.04575749056067513, 0.4771212547196623, 0.6020599913279623, 0.7781512503836435, 0.8450980400142567, 0.9030899869919434, 0.9542425094393249, 1.4771212547196624, 1.6020599913279623, 1.7781512503836434, 1.8450980400142567, 1.9030899869919433, 1.9542425094393248, 2.477121254719662, 2.6020599913279625, 2.7781512503836434, 2.845098040014257, 2.9030899869919433, 2.9542425094393248, 3.477121254719662, 3.6020599913279625, 3.7781512503836434, 3.845098040014257, 3.9030899869919433, 3.9542425094393248 ]); }) .then(done, done.fail); }); @@ -7169,7 +7182,7 @@ describe('Test axes', function() { } }) .then(function() { - _assert([ -0.017728766960431602, -0.00877392430750515, 0.008600171761917567, 0.017033339298780367, 0.025305865264770258, 0.03342375548694973, 0.049218022670181646, 0.056904851336472634, 0.06445798922691853, 0.07188200730612543, 0.08635983067474828, 0.09342168516223513, 0.10037054511756296, 0.10720996964786844, 0.12057393120584996, 0.1271047983648077, 0.13353890837021762, 0.13987908640123659, 0.15228834438305658, 0.15836249209524975, 0.1643528557844372, 0.17026171539495752, 0.18184358794477265, 0.18752072083646318, 0.1931245983544617, 0.1986570869544227, 0.20951501454263102, 0.21484384804769796, 0.22010808804005513, 0.22530928172586287, 0.23552844690754896, 0.24054924828259974, 0.24551266781414988, 0.250420002308894, 0.2600713879850748, 0.2648178230095364, 0.26951294421791616, 0.2741578492636797, 0.28330122870354935, 0.2878017299302258, 0.29225607135647574, 0.29666519026153076, 0.30535136944662333, 0.3096301674258983, 0.31386722036915293, 0.31806333496276107 ]); + _assertClose([ -0.017728766960431602, -0.00877392430750515, 0.008600171761917567, 0.017033339298780367, 0.025305865264770258, 0.03342375548694973, 0.049218022670181646, 0.056904851336472634, 0.06445798922691853, 0.07188200730612543, 0.08635983067474828, 0.09342168516223513, 0.10037054511756296, 0.10720996964786844, 0.12057393120584996, 0.1271047983648077, 0.13353890837021762, 0.13987908640123659, 0.15228834438305658, 0.15836249209524975, 0.1643528557844372, 0.17026171539495752, 0.18184358794477265, 0.18752072083646318, 0.1931245983544617, 0.1986570869544227, 0.20951501454263102, 0.21484384804769796, 0.22010808804005513, 0.22530928172586287, 0.23552844690754896, 0.24054924828259974, 0.24551266781414988, 0.250420002308894, 0.2600713879850748, 0.2648178230095364, 0.26951294421791616, 0.2741578492636797, 0.28330122870354935, 0.2878017299302258, 0.29225607135647574, 0.29666519026153076, 0.30535136944662333, 0.3096301674258983, 0.31386722036915293, 0.31806333496276107 ]); }) .then(done, done.fail); }); @@ -7191,7 +7204,7 @@ describe('Test axes', function() { } }) .then(function() { - _assert([ -0.30102999566398125, 0.30102999566398114, 0.6989700043360187, 1.3010299956639813, 1.6989700043360187, 2.3010299956639813, 2.6989700043360187, 3.3010299956639813, 3.6989700043360187, 4.301029995663981, 4.698970004336019, 5.301029995663981, 5.698970004336019, 6.301029995663981, 6.698970004336019, 7.301029995663981 ]); + _assertClose([ -0.30102999566398125, 0.30102999566398114, 0.6989700043360187, 1.3010299956639813, 1.6989700043360187, 2.3010299956639813, 2.6989700043360187, 3.3010299956639813, 3.6989700043360187, 4.301029995663981, 4.698970004336019, 5.301029995663981, 5.698970004336019, 6.301029995663981, 6.698970004336019, 7.301029995663981 ]); }) .then(done, done.fail); }); @@ -7213,7 +7226,7 @@ describe('Test axes', function() { } }) .then(function() { - _assert([ 0.17609125905568124, 0.3979400086720376, 0.5440680443502756, 0.6532125137753436, 0.7403626894942437, 0.8129133566428552, 0.8750612633916998, 0.9294189257142923, 0.9777236052888472, 1.0211892990699374, 1.0413926851582243, 1.0606978403536107 ]); + _assertClose([ 0.17609125905568124, 0.3979400086720376, 0.5440680443502756, 0.6532125137753436, 0.7403626894942437, 0.8129133566428552, 0.8750612633916998, 0.9294189257142923, 0.9777236052888472, 1.0211892990699374, 1.0413926851582243, 1.0606978403536107 ]); }) .then(done, done.fail); }); pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy