increase dtick on axes with breaks ...

... when too many ticks fall into breaks. Update axes_breaks-finance
    baseline which is now showing ticks (!)

Author: etpinard

src/plots/cartesian/axes.js

@@ -574,54 +574,73 @@ axes.calcTicks = function calcTicks(ax) {
     if((ax._tmin < startTick) !== axrev) return [];
 
     // return the full set of tick vals
-    var tickVals = [];
     if(ax.type === 'category' || ax.type === 'multicategory') {
         endTick = (axrev) ? Math.max(-0.5, endTick) :
             Math.min(ax._categories.length - 0.5, endTick);
     }
 
     var isDLog = (ax.type === 'log') && !(isNumeric(ax.dtick) || ax.dtick.charAt(0) === 'L');
 
-    var xPrevious = null;
-    var maxTicks = Math.max(1000, ax._length || 0);
-    for(var x = ax._tmin;
-            (axrev) ? (x >= endTick) : (x <= endTick);
-            x = axes.tickIncrement(x, ax.dtick, axrev, ax.calendar)) {
-        // prevent infinite loops - no more than one tick per pixel,
-        // and make sure each value is different from the previous
-        if(tickVals.length > maxTicks || x === xPrevious) break;
-        xPrevious = x;
+    var tickVals;
+    function generateTicks() {
+        var xPrevious = null;
+        var maxTicks = Math.max(1000, ax._length || 0);
+        tickVals = [];
+        for(var x = ax._tmin;
+                (axrev) ? (x >= endTick) : (x <= endTick);
+                x = axes.tickIncrement(x, ax.dtick, axrev, ax.calendar)) {
+            // prevent infinite loops - no more than one tick per pixel,
+            // and make sure each value is different from the previous
+            if(tickVals.length > maxTicks || x === xPrevious) break;
+            xPrevious = x;
+
+            var minor = false;
+            if(isDLog && (x !== (x | 0))) {
+                minor = true;
+            }
 
-        var minor = false;
-        if(isDLog && (x !== (x | 0))) {
-            minor = true;
+            tickVals.push({
+                minor: minor,
+                value: x
+            });
         }
-
-        tickVals.push({
-            minor: minor,
-            value: x
-        });
     }
 
-    // If same angle over a full circle, the last tick vals is a duplicate.
-    // TODO must do something similar for angular date axes.
-    if(isAngular(ax) && Math.abs(rng[1] - rng[0]) === 360) {
-        tickVals.pop();
-    }
+    generateTicks();
 
     if(ax.breaks) {
+        var nTicksBefore = tickVals.length;
+
         // remove ticks falling inside breaks
         tickVals = tickVals.filter(function(d) {
             return ax.maskBreaks(d.value) !== BADNUM;
         });
 
-        // TODO what to do with "overlapping" ticks?
+        // if 'numerous' ticks get placed into breaks,
+        // increase dtick to generate more ticks,
+        // so that some hopefully fall between breaks
+        if(ax.tickmode === 'auto' && tickVals.length < nTicksBefore / 6) {
+            ax.dtick /= 2;
+            ax._tmin = axes.tickFirst(ax);
+            generateTicks();
+            tickVals = tickVals.filter(function(d) {
+                return ax.maskBreaks(d.value) !== BADNUM;
+            });
+        }
+
+        // remove "overlapping" ticks (e.g. on either side of a break)
         var tf2 = ax.tickfont ? 1.5 * ax.tickfont.size : 0;
         tickVals = tickVals.filter(function(d, i, self) {
             return !(i && Math.abs(ax.c2p(d.value) - ax.c2p(self[i - 1].value)) < tf2);
         });
     }
 
+    // If same angle over a full circle, the last tick vals is a duplicate.
+    // TODO must do something similar for angular date axes.
+    if(isAngular(ax) && Math.abs(rng[1] - rng[0]) === 360) {
+        tickVals.pop();
+    }
+
     // save the last tick as well as first, so we can
     // show the exponent only on the last one
     ax._tmax = (tickVals[tickVals.length - 1] || {}).value;
@@ -739,8 +758,6 @@ axes.autoTicks = function(ax, roughDTick) {
         // being > half of the final unit - so precalculate twice the rough val
         var roughX2 = 2 * roughDTick;
 
-        // TODO find way to have 'better' first tick on axes with breaks
-
         if(roughX2 > ONEAVGYEAR) {
             roughDTick /= ONEAVGYEAR;
             base = getBase(10);
@@ -799,9 +816,6 @@ axes.autoTicks = function(ax, roughDTick) {
         ax.tick0 = 0;
         base = getBase(10);
         ax.dtick = roundDTick(roughDTick, base, roundBase10);
-
-        // TODO having tick0 = 0 being insider a breaks does not seem
-        // to matter ...
     }
 
     // prevent infinite loops

test/image/baselines/axes_breaks-finance.png

@@ -4858,6 +4858,48 @@ describe('Test axes', function() {
                 .catch(failTest)
                 .then(done);
             });
+
+            it('should increase dtick when too many (auto) ticks fall into breaks', function(done) {
+                var fig = Lib.extendDeep({}, require('@mocks/axes_breaks-finance.json'));
+                // break over weekend
+                fig.layout.xaxis.breaks[0].enabled = false;
+                // break on a single holiday
+                fig.layout.xaxis.breaks[1].enabled = false;
+
+                Plotly.plot(gd, fig)
+                .then(function() {
+                    _assert('base', {
+                        tickVals: [1483833600000, 1485043200000, 1486252800000]
+                    });
+                })
+                .then(function() {
+                    gd.layout.xaxis.breaks[0].enabled = true;
+                    gd.layout.xaxis.breaks[1].enabled = true;
+                    return Plotly.react(gd, gd.data, gd.layout);
+                })
+                .then(function() {
+                    _assert('with breaks enabled on x-axis', {
+                        tickVals: [
+                            1483531200000, 1484136000000, 1484740800000, 1485345600000,
+                            1485950400000, 1486555200000, 1487160000000
+                        ]
+                    });
+                })
+                .then(function() {
+                    // a Saturday
+                    gd.layout.xaxis.tick0 = '2017-01-02';
+                    // one week
+                    gd.layout.xaxis.dtick = 7 + 24 * 60 * 60 * 1000;
+                    return Plotly.react(gd, gd.data, gd.layout);
+                })
+                .then(function() {
+                    _assert('honor set tick0/dtick even though they result in few visible ticks', {
+                        tickVals: [1483488000014]
+                    });
+                })
+                .catch(failTest)
+                .then(done);
+            });
         });
     });
 });