Polar better angular tick label placement

src/plots/cartesian/axes.js

@@ -2181,29 +2181,29 @@ axes.makeTickPath = function(ax, shift, sgn, len) {
  *  - {fn} labelXFn
  *  - {fn} labelYFn
  *  - {fn} labelAnchorFn
- *  - {number} labelStandoff
- *  - {number} labelShift
+ *  - {number} labelStandoff (gap parallel to ticks)
+ *  - {number} labelShift (gap perpendicular to ticks)
  */
 axes.makeLabelFns = function(ax, shift, angle) {
     var axLetter = ax._id.charAt(0);
-    var pad = (ax.linewidth || 1) / 2;
     var ticksOnOutsideLabels = ax.tickson !== 'boundaries' && ax.ticks === 'outside';
 
-    var labelStandoff = ticksOnOutsideLabels ? ax.ticklen : 0;
+    var labelStandoff = 0;
     var labelShift = 0;
 
+    if(ticksOnOutsideLabels) {
+        labelStandoff += ax.ticklen;
+    }
     if(angle && ax.ticks === 'outside') {
         var rad = Lib.deg2rad(angle);
         labelStandoff = ax.ticklen * Math.cos(rad) + 1;
         labelShift = ax.ticklen * Math.sin(rad);
     }
-
     if(ax.showticklabels && (ticksOnOutsideLabels || ax.showline)) {
         labelStandoff += 0.2 * ax.tickfont.size;
     }
+    labelStandoff += (ax.linewidth || 1) / 2;
 
-    // Used in polar angular label x/y functions
-    // TODO generalize makeLabelFns so that it just work for angular axes
     var out = {
         labelStandoff: labelStandoff,
         labelShift: labelShift
@@ -2213,7 +2213,7 @@ axes.makeLabelFns = function(ax, shift, angle) {
     if(axLetter === 'x') {
         flipIt = ax.side === 'bottom' ? 1 : -1;
         x0 = labelShift * flipIt;
-        y0 = shift + (labelStandoff + pad) * flipIt;
+        y0 = shift + labelStandoff * flipIt;
         ff = ax.side === 'bottom' ? 1 : -0.2;
 
         out.labelXFn = function(d) { return d.dx + x0; };
@@ -2226,7 +2226,7 @@ axes.makeLabelFns = function(ax, shift, angle) {
         };
     } else if(axLetter === 'y') {
         flipIt = ax.side === 'right' ? 1 : -1;
-        x0 = labelStandoff + pad;
+        x0 = labelStandoff;
         y0 = -labelShift * flipIt;
         ff = Math.abs(ax.tickangle) === 90 ? 0.5 : 0;
 

src/plots/polar/polar.js

@@ -556,36 +556,25 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
 
     var out = Axes.makeLabelFns(ax, 0);
     var labelStandoff = out.labelStandoff;
-    var labelShift = out.labelShift;
-    var offset4fontsize = (angularLayout.ticks !== 'outside' ? 0.7 : 0.5);
-    var pad = (ax.linewidth || 1) / 2;
 
     var labelXFn = function(d) {
         var rad = t2g(d);
-
-        var offset4tx = signSin(rad) === 0 ?
-            0 :
-            Math.cos(rad) * (labelStandoff + pad + offset4fontsize * d.fontSize);
-        var offset4tick = signCos(rad) * (d.dx + labelStandoff + pad);
-
-        return offset4tx + offset4tick;
+        return Math.cos(rad) * labelStandoff;
     };
 
     var labelYFn = function(d) {
         var rad = t2g(d);
-
-        var offset4tx = d.dy + d.fontSize * MID_SHIFT - labelShift;
-        var offset4tick = -Math.sin(rad) * (labelStandoff + pad + offset4fontsize * d.fontSize);
-
-        return offset4tx + offset4tick;
+        var ff = Math.sin(rad) > 0 ? 0.2 : 1;
+        return -Math.sin(rad) * (labelStandoff + d.fontSize * ff) +
+            Math.abs(Math.cos(rad)) * (d.fontSize * MID_SHIFT);
     };
 
-    // TODO maybe switch angle, d ordering ??
     var labelAnchorFn = function(angle, d) {
         var rad = t2g(d);
-        return signSin(rad) === 0 ?
-            (signCos(rad) > 0 ? 'start' : 'end') :
-            'middle';
+        var cos = Math.cos(rad);
+        return Math.abs(cos) < 0.1 ?
+            'middle' :
+            (cos > 0 ? 'start' : 'end');
     };
 
     var newTickLayout = strTickLayout(angularLayout);
@@ -623,6 +612,7 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
 
     if(ax.visible) {
         var tickSign = ax.ticks === 'inside' ? -1 : 1;
+        var pad = (ax.linewidth || 1) / 2;
 
         Axes.drawTicks(gd, ax, {
             vals: vals,
@@ -1413,18 +1403,3 @@ function strTranslate(x, y) {
 function strRotate(angle) {
     return 'rotate(' + angle + ')';
 }
-
-// because Math.sign(Math.cos(Math.PI / 2)) === 1
-// oh javascript ;)
-function sign(v) {
-    return Math.abs(v) < 1e-10 ? 0 :
-        v > 0 ? 1 : -1;
-}
-
-function signCos(v) {
-    return sign(Math.cos(v));
-}
-
-function signSin(v) {
-    return sign(Math.sin(v));
-}

test/image/mocks/polar_long-category-angular-labels.json

@@ -0,0 +1,44 @@
+{
+  "data": [
+    {
+      "r": [0.97, 0.97, 0.75, 0.83, 1, 1, 0.45, 0.97, 1, 0, 0.01, 0.97 ],
+      "mode": "lines",
+      "theta": ["Abstracts", "Affiliations", "Award Numbers", "Funders", "Licenses", "Open References", "Orcids", "References", "Resource Links", "Similarity Checking", "Update Policies", "Abstracts"],
+      "line": {
+        "color": "orangered",
+        "width": 4
+      },
+      "type": "scatterpolar",
+      "name": "Backfile"
+    },
+    {
+      "r": [0.98, 0.98, 0.83, 0.89, 1, 1, 0.99, 0.96, 1, 0, 0, 0.98],
+      "mode": "lines",
+      "theta": ["Abstracts", "Affiliations", "Award Numbers", "Funders", "Licenses", "Open References", "Orcids", "References", "Resource Links", "Similarity Checking", "Update Policies", "Abstracts" ],
+      "line": {
+        "color": "blue",
+        "width": 2
+      },
+      "type": "scatterpolar",
+      "name": "Current"
+    }
+  ],
+  "layout": {
+    "polar": {
+      "angularaxis": {
+        "rotation": 90,
+        "direction": "clockwise"
+      }
+    },
+    "showlegend": true,
+    "legend": {
+      "y": 0,
+      "yanchor": "top",
+      "x": 0,
+      "xanchor": "left"
+    },
+    "title": {
+      "text": "eLife Sciences Publications<br>Ltd: journal-article (8.62 - 7.95 = 0.67)"
+    }
+  }
+}