Merge pull request #5610 from plotly/fix5601

Take into account inside labels of the counter axis during autorange relayout
plotly · Apr 27, 2021 · a5a5de9 · a5a5de9
2 parents 32d4631 + b676bc6
commit a5a5de9
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/src/plots/cartesian/autorange.js b/src/plots/cartesian/autorange.js
@@ -1,10 +1,12 @@
 'use strict';
 
+var d3 = require('@plotly/d3');
 var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var FP_SAFE = require('../../constants/numerical').FP_SAFE;
 var Registry = require('../../registry');
+var Drawing = require('../../components/drawing');
 
 var axIds = require('./axis_ids');
 var getFromId = axIds.getFromId;
@@ -266,12 +268,27 @@ function padInsideLabelsOnAnchorAxis(fullLayout, ax, max) {
                     var cosA = Math.abs(Math.cos(rad));
                     var sinA = Math.abs(Math.sin(rad));
 
+                    // no stashed bounding boxes - stash bounding boxes
+                    if(!anchorAxis._vals[0].bb) {
+                        var cls = anchorAxis._id + 'tick';
+                        var tickLabels = anchorAxis._selections[cls];
+                        tickLabels.each(function(d) {
+                            var thisLabel = d3.select(this);
+                            var mathjaxGroup = thisLabel.select('.text-math-group');
+                            if(mathjaxGroup.empty()) {
+                                d.bb = Drawing.bBox(thisLabel.node());
+                            }
+                        });
+                    }
+
                     // use bounding boxes
                     for(var i = 0; i < anchorAxis._vals.length; i++) {
                         var t = anchorAxis._vals[i];
-                        if(t.bb) {
-                            var w = 2 * TEXTPAD + t.bb.width;
-                            var h = 2 * TEXTPAD + t.bb.height;
+                        var bb = t.bb;
+
+                        if(bb) {
+                            var w = 2 * TEXTPAD + bb.width;
+                            var h = 2 * TEXTPAD + bb.height;
 
                             pad = Math.max(pad, isX ?
                                 Math.max(w * cosA, h * sinA) :

diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js
@@ -3329,7 +3329,10 @@ axes.drawLabels = function(gd, ax, opts) {
             function computeFinalTickLabelBoundingBoxes() {
                 tickLabels.each(function(d, i) {
                     var thisLabel = selectTickLabel(this);
-                    ax._vals[i].bb = Drawing.bBox(thisLabel.node());
+                    var mathjaxGroup = thisLabel.select('.text-math-group');
+                    if(mathjaxGroup.empty()) {
+                        ax._vals[i].bb = Drawing.bBox(thisLabel.node());
+                    }
                 });
             }
         );

diff --git a/test/jasmine/tests/axes_test.js b/test/jasmine/tests/axes_test.js
@@ -1481,6 +1481,30 @@ describe('Test axes', function() {
             })
             .then(done, done.fail);
         });
+
+        it('should make room for the inside labels of the counter axes', function(done) {
+            Plotly.newPlot(gd, {
+                data: [{
+                    x: [1, 2, 3],
+                    y: [0, 100, 0]
+                }],
+                layout: {
+                    width: 300,
+                    height: 300,
+                    showlegend: false,
+                    plot_bgcolor: 'lightblue',
+                    yaxis: { ticklabelposition: 'inside' },
+                    xaxis: { range: [1.5, 2.5] }
+                }
+            }).then(function() {
+                expect(gd._fullLayout.xaxis.range).toEqual([1.5, 2.5]);
+
+                return Plotly.relayout(gd, 'xaxis.autorange', true);
+            }).then(function() {
+                expect(gd._fullLayout.xaxis.range).toBeCloseToArray([0.37, 3.22], 1);
+            })
+            .then(done, done.fail);
+        });
     });
 
     describe('constraints relayout', function() {