split overlap algo based on tickson + use tickwidth for extra pad

Author: etpinard

src/plots/cartesian/axes.js

@@ -2337,33 +2337,37 @@ axes.drawLabels = function(gd, ax, opts) {
             });
 
             var autoangle = 0;
-            for(i = 0; i < lbbArray.length - 1; i++) {
-                if(Lib.bBoxIntersect(lbbArray[i], lbbArray[i + 1])) {
-                    // any overlap at all - set 30 degrees
-                    autoangle = 30;
-                    break;
-                }
-            }
 
             if(ax.tickson === 'boundaries') {
+                var gap = 2;
+                if(ax.ticks) gap += ax.tickwidth / 2;
+
                 for(i = 0; i < lbbArray.length; i++) {
+                    var xbnd = vals[i].xbnd;
+                    var lbb = lbbArray[i];
                     if(
-                        (vals[i].xl !== null && (lbbArray[i].left - ax.l2p(vals[i].xbnd[0])) < 2) ||
-                        (vals[i].xr !== null && (ax.l2p(vals[i].xbnd[1]) - lbbArray[i].right) < 2)
+                        (xbnd[0] !== null && (lbb.left - ax.l2p(xbnd[0])) < gap) ||
+                        (xbnd[1] !== null && (ax.l2p(xbnd[1]) - lbb.right) < gap)
                     ) {
                         autoangle = 90;
                         break;
                     }
                 }
+            } else {
+                var vLen = vals.length;
+                var tickSpacing = Math.abs((vals[vLen - 1].x - vals[0].x) * ax._m) / (vLen - 1);
+                var fitBetweenTicks = tickSpacing < maxFontSize * 2.5;
+
+                // any overlap at all - set 30 degrees or 90 degrees
+                for(i = 0; i < lbbArray.length - 1; i++) {
+                    if(Lib.bBoxIntersect(lbbArray[i], lbbArray[i + 1])) {
+                        autoangle = fitBetweenTicks ? 90 : 30;
+                        break;
+                    }
+                }
             }
 
             if(autoangle) {
-                var tickspacing = Math.abs(
-                        (vals[vals.length - 1].x - vals[0].x) * ax._m
-                    ) / (vals.length - 1);
-                if(tickspacing < maxFontSize * 2.5) {
-                    autoangle = 90;
-                }
                 positionLabels(tickLabels, autoangle);
             }
             ax._lastangle = autoangle;

test/jasmine/tests/axes_test.js

@@ -3102,33 +3102,35 @@ describe('Test axes', function() {
 
     describe('*tickson*:', function() {
         var gd;
+
         beforeEach(function() {
             gd = createGraphDiv();
         });
+
         afterEach(destroyGraphDiv);
 
-        function getPositions(query) {
-            var pos = [];
-            d3.selectAll(query).each(function() {
-                pos.push(this.getBoundingClientRect().x);
-            });
-            return pos;
-        }
+        it('should respond to relayout', function(done) {
+            function getPositions(query) {
+                var pos = [];
+                d3.selectAll(query).each(function() {
+                    pos.push(this.getBoundingClientRect().x);
+                });
+                return pos;
+            }
 
-        function _assert(msg, exp) {
-            var ticks = getPositions('path.xtick');
-            var gridLines = getPositions('path.xgrid');
-            var tickLabels = getPositions('.xtick > text');
+            function _assert(msg, exp) {
+                var ticks = getPositions('path.xtick');
+                var gridLines = getPositions('path.xgrid');
+                var tickLabels = getPositions('.xtick > text');
 
-            expect(ticks).toBeCloseToArray(exp.ticks, 1, msg + '- ticks');
-            expect(gridLines).toBeCloseToArray(exp.gridLines, 1, msg + '- grid lines');
-            expect(tickLabels.length).toBe(exp.tickLabels.length, msg + '- # of tick labels');
-            tickLabels.forEach(function(tl, i) {
-                expect(tl).toBeWithin(exp.tickLabels[i], 2, msg + '- tick label ' + i);
-            });
-        }
+                expect(ticks).toBeCloseToArray(exp.ticks, 1, msg + '- ticks');
+                expect(gridLines).toBeCloseToArray(exp.gridLines, 1, msg + '- grid lines');
+                expect(tickLabels.length).toBe(exp.tickLabels.length, msg + '- # of tick labels');
+                tickLabels.forEach(function(tl, i) {
+                    expect(tl).toBeWithin(exp.tickLabels[i], 2, msg + '- tick label ' + i);
+                });
+            }
 
-        it('should respond to relayout', function(done) {
             Plotly.plot(gd, [{
                 x: ['a', 'b', 'c'],
                 y: [1, 2, 1]
@@ -3172,6 +3174,55 @@ describe('Test axes', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('should rotate labels to avoid overlaps', function(done) {
+            function _assert(msg, exp) {
+                var tickLabels = d3.selectAll('.xtick > text');
+
+                expect(tickLabels.size()).toBe(exp.angle.length, msg + ' - # of tick labels');
+
+                tickLabels.each(function(_, i) {
+                    var t = d3.select(this).attr('transform');
+                    var rotate = (t.split('rotate(')[1] || '').split(')')[0];
+                    var angle = rotate.split(',')[0];
+                    expect(Number(angle)).toBe(exp.angle[i], msg + ' - node ' + i);
+                });
+            }
+
+            Plotly.plot(gd, [{
+                x: ['A very long title', 'short', 'Another very long title'],
+                y: [1, 4, 2]
+            }], {
+                xaxis: {
+                    domain: [0.22, 0.78],
+                    tickson: 'boundaries',
+                    ticks: 'outside'
+                },
+                width: 500,
+                height: 500
+            })
+            .then(function() {
+                _assert('base - rotated', {
+                    angle: [90, 90, 90]
+                });
+
+                return Plotly.relayout(gd, 'xaxis.range', [-0.5, 1.5]);
+            })
+            .then(function() {
+                _assert('narrower range - unrotated', {
+                    angle: [0, 0]
+                });
+
+                return Plotly.relayout(gd, 'xaxis.tickwidth', 10);
+            })
+            .then(function() {
+                _assert('narrow range / wide ticks - rotated', {
+                    angle: [90, 90]
+                });
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 });