Merge pull request #6790 from my-tien/autotickangles

Add autotickangles property

Author: archmoj

draftlogs/6790_add.md

@@ -0,0 +1 @@
+- Add `autotickangles` to cartesian and radial axes [[#6790](https://github.com/plotly/plotly.js/pull/6790)], with thanks to @my-tien for the contribution!

src/components/colorbar/defaults.js

@@ -109,7 +109,11 @@ module.exports = function colorbarDefaults(containerIn, containerOut, layout) {
     handleTickValueDefaults(colorbarIn, colorbarOut, coerce, 'linear');
 
     var font = layout.font;
-    var opts = {outerTicks: false, font: font};
+    var opts = {
+        noAutotickangles: true,
+        outerTicks: false,
+        font: font
+    };
     if(ticklabelposition.indexOf('inside') !== -1) {
         opts.bgColor = 'black'; // could we instead use the average of colors in the scale?
     }

src/components/colorbar/draw.js

@@ -1001,6 +1001,7 @@ function mockColorBarAxis(gd, opts, zrange) {
     var axisOptions = {
         letter: letter,
         font: fullLayout.font,
+        noAutotickangles: letter === 'y',
         noHover: true,
         noTickson: true,
         noTicklabelmode: true,

src/plots/cartesian/axes.js

@@ -3472,13 +3472,13 @@ axes.drawLabels = function(gd, ax, opts) {
 
     var fullLayout = gd._fullLayout;
     var axId = ax._id;
-    var axLetter = axId.charAt(0);
     var cls = opts.cls || axId + 'tick';
 
     var vals = opts.vals.filter(function(d) { return d.text; });
 
     var labelFns = opts.labelFns;
     var tickAngle = opts.secondary ? 0 : ax.tickangle;
+
     var prevAngle = (ax._prevTickAngles || {})[cls];
 
     var tickLabels = opts.layer.selectAll('g.' + cls)
@@ -3719,21 +3719,22 @@ axes.drawLabels = function(gd, ax, opts) {
         // check for auto-angling if x labels overlap
         // don't auto-angle at all for log axes with
         // base and digit format
-        if(vals.length && axLetter === 'x' && !isNumeric(tickAngle) &&
+        if(vals.length && ax.autotickangles &&
             (ax.type !== 'log' || String(ax.dtick).charAt(0) !== 'D')
         ) {
-            autoangle = 0;
+            autoangle = ax.autotickangles[0];
 
             var maxFontSize = 0;
             var lbbArray = [];
             var i;
-
+            var maxLines = 1;
             tickLabels.each(function(d) {
                 maxFontSize = Math.max(maxFontSize, d.fontSize);
 
                 var x = ax.l2p(d.x);
                 var thisLabel = selectTickLabel(this);
                 var bb = Drawing.bBox(thisLabel.node());
+                maxLines = Math.max(maxLines, svgTextUtils.lineCount(thisLabel));
 
                 lbbArray.push({
                     // ignore about y, just deal with x overlaps
@@ -3780,12 +3781,31 @@ axes.drawLabels = function(gd, ax, opts) {
                 var pad = !isAligned ? 0 :
                     (ax.tickwidth || 0) + 2 * TEXTPAD;
 
-                var rotate90 = (tickSpacing < maxFontSize * 2.5) || ax.type === 'multicategory' || ax._name === 'realaxis';
+                // autotickangles
+                var adjacent = tickSpacing;
+                var opposite = maxFontSize * 1.25 * maxLines;
+                var hypotenuse = Math.sqrt(Math.pow(adjacent, 2) + Math.pow(opposite, 2));
+                var maxCos = adjacent / hypotenuse;
+                var autoTickAnglesRadians = ax.autotickangles.map(
+                    function(degrees) { return degrees * Math.PI / 180; }
+                );
+                var angleRadians = autoTickAnglesRadians.find(
+                    function(angle) { return Math.abs(Math.cos(angle)) <= maxCos; }
+                );
+                if(angleRadians === undefined) {
+                    // no angle with smaller cosine than maxCos, just pick the angle with smallest cosine
+                    angleRadians = autoTickAnglesRadians.reduce(
+                        function(currentMax, nextAngle) {
+                            return Math.abs(Math.cos(currentMax)) < Math.abs(Math.cos(nextAngle)) ? currentMax : nextAngle;
+                        }
+                        , autoTickAnglesRadians[0]
+                    );
+                }
+                var newAngle = angleRadians * (180 / Math.PI /* to degrees */);
 
-                // 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], pad)) {
-                        autoangle = rotate90 ? 90 : 30;
+                        autoangle = newAngle;
                         break;
                     }
                 }
@@ -3807,7 +3827,7 @@ axes.drawLabels = function(gd, ax, opts) {
     // by rotating 90 degrees, do not attempt to re-fix its label overlaps
     // as this can lead to infinite redraw loops!
     if(ax.automargin && fullLayout._redrawFromAutoMarginCount && prevAngle === 90) {
-        autoangle = 90;
+        autoangle = prevAngle;
         seq.push(function() {
             positionLabels(tickLabels, prevAngle);
         });

src/plots/cartesian/layout_attributes.js

@@ -809,6 +809,20 @@ module.exports = {
             'vertically.'
         ].join(' ')
     },
+    autotickangles: {
+        valType: 'info_array',
+        freeLength: true,
+        items: {
+            valType: 'angle'
+        },
+        dflt: [0, 30, 90],
+        editType: 'ticks',
+        description: [
+            'When `tickangle` is set to *auto*, it will be set to the first',
+            'angle in this array that is large enough to prevent label',
+            'overlap.'
+        ].join(' ')
+    },
     tickprefix: {
         valType: 'string',
         dflt: '',

src/plots/cartesian/layout_defaults.js

@@ -242,7 +242,8 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
             visibleDflt: visibleDflt,
             reverseDflt: reverseDflt,
             autotypenumbersDflt: autotypenumbersDflt,
-            splomStash: ((layoutOut._splomAxes || {})[axLetter] || {})[axId]
+            splomStash: ((layoutOut._splomAxes || {})[axLetter] || {})[axId],
+            noAutotickangles: axLetter === 'y'
         };
 
         coerce('uirevision', layoutOut.uirevision);

src/plots/cartesian/tick_label_defaults.js

@@ -40,7 +40,12 @@ module.exports = function handleTickLabelDefaults(containerIn, containerOut, coe
             coerce('ticklabelstep');
         }
 
-        if(!options.noAng) coerce('tickangle');
+        if(!options.noAng) {
+            var tickAngle = coerce('tickangle');
+            if(!options.noAutotickangles && tickAngle === 'auto') {
+                coerce('autotickangles');
+            }
+        }
 
         if(axType !== 'category') {
             var tickFormat = coerce('tickformat');

src/plots/gl3d/layout/axis_defaults.js

@@ -41,6 +41,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, options) {
                 letter: axName[0],
                 data: options.data,
                 showGrid: true,
+                noAutotickangles: true,
                 noTickson: true,
                 noTicklabelmode: true,
                 noTicklabelstep: true,

src/plots/polar/layout_attributes.js

@@ -105,6 +105,8 @@ var radialAxisAttrs = {
         ].join(' ')
     },
 
+    autotickangles: axesAttrs.autotickangles,
+
     side: {
         valType: 'enumerated',
         // TODO add 'center' for `showline: false` radial axes

src/plots/polar/layout_defaults.js

@@ -167,7 +167,8 @@ function handleDefaults(contIn, contOut, coerce, opts) {
                     color: dfltFontColor,
                     size: dfltFontSize,
                     family: dfltFontFamily
-                }
+                },
+                noAutotickangles: axName === 'angularaxis'
             });
 
             handleTickMarkDefaults(axIn, axOut, coerceAxis, {outerTicks: true});