Implement ticklabeloverflow to improve control over display of tick labels

src/components/colorbar/attributes.js

@@ -136,6 +136,13 @@ module.exports = overrideAll({
     tickvals: axesAttrs.tickvals,
     ticktext: axesAttrs.ticktext,
     ticks: extendFlat({}, axesAttrs.ticks, {dflt: ''}),
+    ticklabeloverflow: extendFlat({}, axesAttrs.ticklabeloverflow, {
+        description: [
+            'Determines how we handle tick labels that would overflow either the graph div or the domain of the axis.',
+            'The default value for inside tick labels is *hide past domain*.',
+            'In other cases the default is *hide past div*.'
+        ].join(' ')
+    }),
     ticklabelposition: {
         valType: 'enumerated',
         values: [

src/components/colorbar/defaults.js

@@ -42,7 +42,9 @@ module.exports = function colorbarDefaults(containerIn, containerOut, layout) {
     coerce('bordercolor');
     coerce('borderwidth');
     coerce('bgcolor');
+
     var ticklabelposition = coerce('ticklabelposition');
+    coerce('ticklabeloverflow', ticklabelposition.indexOf('inside') !== -1 ? 'hide past domain' : 'hide past div');
 
     handleTickValueDefaults(colorbarIn, colorbarOut, coerce, 'linear');
 

src/components/colorbar/draw.js

@@ -677,6 +677,7 @@ function mockColorBarAxis(gd, opts, zrange) {
         tickcolor: opts.tickcolor,
         showticklabels: opts.showticklabels,
         ticklabelposition: opts.ticklabelposition,
+        ticklabeloverflow: opts.ticklabeloverflow,
         tickfont: opts.tickfont,
         tickangle: opts.tickangle,
         tickformat: opts.tickformat,

src/plots/cartesian/axes.js

@@ -3020,8 +3020,6 @@ axes.drawLabels = function(gd, ax, opts) {
     }
 
     function positionLabels(s, angle) {
-        var isInside = insideTicklabelposition(ax);
-
         s.each(function(d) {
             var thisLabel = d3.select(this);
             var mathjaxGroup = thisLabel.select('.text-math-group');
@@ -3049,12 +3047,10 @@ axes.drawLabels = function(gd, ax, opts) {
                     'text-anchor': anchor
                 });
 
-                if(isInside) {
-                    thisText.style('opacity', 1); // visible
+                thisText.style('opacity', 1); // visible
 
-                    if(ax._hideOutOfRangeInsideTickLabels) {
-                        ax._hideOutOfRangeInsideTickLabels();
-                    }
+                if(ax._adjustTickLabelsOverflow) {
+                    ax._adjustTickLabelsOverflow();
                 }
             } else {
                 var mjWidth = Drawing.bBox(mathjaxGroup.node()).width;
@@ -3064,63 +3060,73 @@ axes.drawLabels = function(gd, ax, opts) {
         });
     }
 
-    ax._hideOutOfRangeInsideTickLabels = function() {
-        if(insideTicklabelposition(ax)) {
+    ax._adjustTickLabelsOverflow = function() {
+        var ticklabeloverflow = ax.ticklabeloverflow;
+        if(!ticklabeloverflow || ticklabeloverflow === 'allow') return;
+
+        var hideOverflow = ticklabeloverflow.indexOf('hide') !== -1;
+
+        var isX = ax._id.charAt(0) === 'x';
+        // div positions
+        var p0 = 0;
+        var p1 = isX ?
+            gd._fullLayout.width :
+            gd._fullLayout.height;
+
+        if(ticklabeloverflow.indexOf('domain') !== -1) {
+            // domain positions
             var rl = Lib.simpleMap(ax.range, ax.r2l);
+            p0 = ax.l2p(rl[0]) + ax._offset;
+            p1 = ax.l2p(rl[1]) + ax._offset;
+        }
 
-            // hide inside tick labels that go outside axis end points
-            var p0 = ax.l2p(rl[0]);
-            var p1 = ax.l2p(rl[1]);
+        var min = Math.min(p0, p1);
+        var max = Math.max(p0, p1);
 
-            var min = Math.min(p0, p1) + ax._offset;
-            var max = Math.max(p0, p1) + ax._offset;
+        var side = ax.side;
 
-            var side = ax.side;
-            var isX = ax._id.charAt(0) === 'x';
+        var visibleLabelMin = Infinity;
+        var visibleLabelMax = -Infinity;
 
-            var visibleLabelMin = Infinity;
-            var visibleLabelMax = -Infinity;
+        tickLabels.each(function(d) {
+            var thisLabel = d3.select(this);
+            var mathjaxGroup = thisLabel.select('.text-math-group');
 
-            tickLabels.each(function(d) {
-                var thisLabel = d3.select(this);
-                var mathjaxGroup = thisLabel.select('.text-math-group');
-
-                if(mathjaxGroup.empty()) {
-                    var bb = Drawing.bBox(thisLabel.node());
-                    var hide = false;
-                    if(isX) {
-                        if(bb.right > max) hide = true;
-                        else if(bb.left < min) hide = true;
+            if(mathjaxGroup.empty()) {
+                var bb = Drawing.bBox(thisLabel.node());
+                var adjust = 0;
+                if(isX) {
+                    if(bb.right > max) adjust = 1;
+                    else if(bb.left < min) adjust = 1;
+                } else {
+                    if(bb.bottom > max) adjust = 1;
+                    else if(bb.top + (ax.tickangle ? 0 : d.fontSize / 4) < min) adjust = 1;
+                }
+
+                var t = thisLabel.select('text');
+                if(adjust) {
+                    if(hideOverflow) t.style('opacity', 0); // hidden
+                } else {
+                    t.style('opacity', 1); // visible
+
+                    if(side === 'bottom' || side === 'right') {
+                        visibleLabelMin = Math.min(visibleLabelMin, isX ? bb.top : bb.left);
                     } else {
-                        if(bb.bottom > max) hide = true;
-                        else if(bb.top + (ax.tickangle ? 0 : d.fontSize / 4) < min) hide = true;
+                        visibleLabelMin = -Infinity;
                     }
 
-                    var t = thisLabel.select('text');
-                    if(hide) {
-                        t.style('opacity', 0); // hidden
+                    if(side === 'top' || side === 'left') {
+                        visibleLabelMax = Math.max(visibleLabelMax, isX ? bb.bottom : bb.right);
                     } else {
-                        t.style('opacity', 1); // visible
-
-                        if(side === 'bottom' || side === 'right') {
-                            visibleLabelMin = Math.min(visibleLabelMin, isX ? bb.top : bb.left);
-                        } else {
-                            visibleLabelMin = -Infinity;
-                        }
-
-                        if(side === 'top' || side === 'left') {
-                            visibleLabelMax = Math.max(visibleLabelMax, isX ? bb.bottom : bb.right);
-                        } else {
-                            visibleLabelMax = Infinity;
-                        }
+                        visibleLabelMax = Infinity;
                     }
-                } // TODO: hide mathjax?
-            });
+                }
+            } // TODO: hide mathjax?
+        });
 
-            if(ax._anchorAxis) {
-                ax._anchorAxis._visibleLabelMin = visibleLabelMin;
-                ax._anchorAxis._visibleLabelMax = visibleLabelMax;
-            }
+        if(ax._anchorAxis) {
+            ax._anchorAxis._visibleLabelMin = visibleLabelMin;
+            ax._anchorAxis._visibleLabelMax = visibleLabelMax;
         }
     };
 

src/plots/cartesian/axis_defaults.js

@@ -56,8 +56,9 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
         }
     }
 
+    var ticklabelposition = '';
     if(!options.noTicklabelposition || axType === 'multicategory') {
-        Lib.coerce(containerIn, containerOut, {
+        ticklabelposition = Lib.coerce(containerIn, containerOut, {
             ticklabelposition: {
                 valType: 'enumerated',
                 dflt: 'outside',
@@ -75,6 +76,17 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
         }, 'ticklabelposition');
     }
 
+    if(!options.noTicklabeloverflow) {
+        coerce('ticklabeloverflow',
+            ticklabelposition.indexOf('inside') !== -1 ?
+                'hide past domain' :
+            axType === 'category' ||
+            axType === 'multicategory' ?
+                'allow' :
+                'hide past div'
+        );
+    }
+
     setConvert(containerOut, layoutOut);
 
     var autorangeDflt = !containerOut.isValidRange(containerIn.range);

src/plots/cartesian/layout_attributes.js

@@ -495,6 +495,21 @@ module.exports = {
             'so that the scales could match.'
         ].join(' ')
     },
+    ticklabeloverflow: {
+        valType: 'enumerated',
+        values: [
+            'allow',
+            'hide past div',
+            'hide past domain'
+        ],
+        editType: 'calc',
+        description: [
+            'Determines how we handle tick labels that would overflow either the graph div or the domain of the axis.',
+            'The default value for inside tick labels is *hide past domain*.',
+            'Otherwise on *category* and *multicategory* axes the default is *allow*.',
+            'In other cases the default is *hide past div*.'
+        ].join(' ')
+    },
     mirror: {
         valType: 'enumerated',
         values: [true, 'ticks', false, 'all', 'allticks'],

src/plots/gl3d/layout/axis_defaults.js

@@ -44,6 +44,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, options) {
                 noTickson: true,
                 noTicklabelmode: true,
                 noTicklabelposition: true,
+                noTicklabeloverflow: true,
                 bgColor: options.bgColor,
                 calendar: options.calendar
             },

src/plots/plots.js

@@ -2076,14 +2076,14 @@ plots.doAutoMargin = function(gd) {
         }
     }
 
-    hideInsideTickLabels(gd);
+    refineTicks(gd);
 };
 
-function hideInsideTickLabels(gd) {
+function refineTicks(gd) {
     var axList = axisIDs.list(gd, '', true);
 
     [
-        '_hideOutOfRangeInsideTickLabels',
+        '_adjustTickLabelsOverflow',
         '_hideCounterAxisInsideTickLabels'
     ].forEach(function(k) {
         for(var i = 0; i < axList.length; i++) {

src/traces/indicator/plot.js

@@ -394,6 +394,7 @@ function drawAngularGauge(gd, plotGroup, cd, opts) {
     ax.type = 'linear';
     ax.range = trace.gauge.axis.range;
     ax._id = 'xangularaxis'; // or 'y', but I don't think this makes a difference here
+    ax.ticklabeloverflow = 'allow';
     ax.setScale();
 
     // 't'ick to 'g'eometric radians is used all over the place here

test/image/mocks/ticklabeloverflow-0.json

@@ -0,0 +1,29 @@
+{
+    "data": [{
+        "x": [-100, 0, 100],
+        "y": [-100, 0, 100]
+    }],
+    "layout": {
+        "xaxis": {
+            "range": [-115, 105],
+            "tickformat": ".3f",
+            "ticklabeloverflow": "allow"
+        },
+        "yaxis": {
+            "range": [-115, 105],
+            "tickangle": 90,
+            "tickformat": ".3f",
+            "ticklabeloverflow": "allow"
+        },
+        "plot_bgcolor": "lightblue",
+        "showlegend": false,
+        "width": 300,
+        "height": 300,
+        "margin": {
+            "t": 15,
+            "b": 15,
+            "l": 15,
+            "r": 15
+        }
+    }
+}

test/image/mocks/ticklabeloverflow-1.json

@@ -0,0 +1,29 @@
+{
+    "data": [{
+        "x": [-100, 0, 100],
+        "y": [-100, 0, 100]
+    }],
+    "layout": {
+        "xaxis": {
+            "range": [-115, 105],
+            "tickformat": ".3f",
+            "ticklabeloverflow": "hide past div"
+        },
+        "yaxis": {
+            "range": [-115, 105],
+            "tickangle": 90,
+            "tickformat": ".3f",
+            "ticklabeloverflow": "hide past div"
+        },
+        "plot_bgcolor": "lightblue",
+        "showlegend": false,
+        "width": 300,
+        "height": 300,
+        "margin": {
+            "t": 15,
+            "b": 15,
+            "l": 15,
+            "r": 15
+        }
+    }
+}

test/image/mocks/ticklabeloverflow-2.json

@@ -0,0 +1,29 @@
+{
+    "data": [{
+        "x": [-100, 0, 100],
+        "y": [-100, 0, 100]
+    }],
+    "layout": {
+        "xaxis": {
+            "range": [-115, 105],
+            "tickformat": ".3f",
+            "ticklabeloverflow": "hide past domain"
+        },
+        "yaxis": {
+            "range": [-115, 105],
+            "tickangle": 90,
+            "tickformat": ".3f",
+            "ticklabeloverflow": "hide past domain"
+        },
+        "plot_bgcolor": "lightblue",
+        "showlegend": false,
+        "width": 300,
+        "height": 300,
+        "margin": {
+            "t": 30,
+            "b": 30,
+            "l": 30,
+            "r": 30
+        }
+    }
+}

test/image/mocks/ticklabeloverflow-3.json

@@ -0,0 +1,31 @@
+{
+    "data": [{
+        "colorbar": {
+            "dtick": 2,
+            "ticklen": 4,
+            "tickangle": 90,
+            "tickformat": ".4f",
+            "ticklabeloverflow": "allow"
+        },
+        "type": "heatmap",
+        "x": [-100, 0, 100],
+        "y": [-100, 0, 100],
+        "z": [
+            [0, 5, 10],
+            [5, 10, 0],
+            [10, 5, 0]
+        ]
+    }],
+    "layout": {
+        "plot_bgcolor": "lightblue",
+        "showlegend": false,
+        "width": 200,
+        "height": 300,
+        "margin": {
+            "t": 5,
+            "b": 5,
+            "l": 45,
+            "r": 45
+        }
+    }
+}