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 84ebe5b3bb1..14963988be1 100644 --- a/src/plots/cartesian/axes.js +++ b/src/plots/cartesian/axes.js @@ -3648,7 +3648,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(); @@ -3706,9 +3706,9 @@ axes.drawLabels = function(gd, ax, opts) { var t = thisLabel.select('text'); if(adjust) { - if(hideOverflow) t.style('opacity', 0); // hidden + if(hideOverflow) t.style('display', 'none'); // hidden } else { - t.style('opacity', 1); // visible + t.style('display', null); // visible if(side === 'bottom' || side === 'right') { visibleLabelMin = Math.min(visibleLabelMin, isX ? bb.top : bb.left); @@ -3783,7 +3783,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/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); });