adapt Axes.calcTicks output for tickson:'boundaries'

Author: etpinard

src/plots/cartesian/axes.js

@@ -1610,14 +1610,41 @@ axes.drawOne = function(gd, ax, opts) {
     var subplotsWithAx = axes.getSubplots(gd, ax);
 
     var vals = ax._vals = axes.calcTicks(ax);
-    // We remove zero lines, grid lines, and inside ticks if they're within 1px of the end
-    // The key case here is removing zero lines when the axis bound is zero
-    var valsClipped = ax._valsClipped = axes.clipEnds(ax, vals);
 
     if(!ax.visible) return;
 
     var transFn = axes.makeTransFn(ax);
 
+    // We remove zero lines, grid lines, and inside ticks if they're within 1px of the end
+    // The key case here is removing zero lines when the axis bound is zero
+    var valsClipped;
+    var tickVals;
+    var gridVals;
+
+    if(ax.tickson === 'boundaries') {
+        // draw ticks and grid lines 1/2 a 'category' to the left,
+        // add one item at axis tail
+        var valsBoundaries = vals.map(function(d) {
+            var d2 = Lib.extendFlat({}, d);
+            d2.x -= 0.5;
+            return d2;
+        });
+        // not used for labels; no need to worry about the other tickTextObj keys
+        var d2 = Lib.extendFlat({}, vals[vals.length - 1]);
+        d2.x += 0.5;
+        valsBoundaries.push(d2);
+
+        valsClipped = axes.clipEnds(ax, valsBoundaries);
+        tickVals = ax.ticks === 'inside' ? valsClipped : valsBoundaries;
+        gridVals = valsClipped;
+    } else {
+        valsClipped = axes.clipEnds(ax, vals);
+        tickVals = ax.ticks === 'inside' ? valsClipped : vals;
+        gridVals = valsClipped;
+    }
+
+    ax._valsClipped = valsClipped;
+
     if(!fullLayout._hasOnlyLargeSploms) {
         // keep track of which subplots (by main conteraxis) we've already
         // drawn grids for, so we don't overdraw overlaying subplots
@@ -1637,7 +1664,7 @@ axes.drawOne = function(gd, ax, opts) {
                 'M' + counterAxis._offset + ',0h' + counterAxis._length;
 
             axes.drawGrid(gd, ax, {
-                vals: valsClipped,
+                vals: gridVals,
                 layer: plotinfo.gridlayer.select('.' + axId),
                 path: gridPath,
                 transFn: transFn
@@ -1652,7 +1679,6 @@ axes.drawOne = function(gd, ax, opts) {
     }
 
     var tickSigns = axes.getTickSigns(ax);
-    var tickVals = ax.ticks === 'inside' ? valsClipped : vals;
     var tickSubplots = [];
 
     if(ax.ticks) {

test/jasmine/tests/axes_test.js

@@ -3099,6 +3099,80 @@ describe('Test axes', function() {
             .then(done);
         });
     });
+
+    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;
+        }
+
+        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);
+            });
+        }
+
+        it('should respond to relayout', function(done) {
+            Plotly.plot(gd, [{
+                x: ['a', 'b', 'c'],
+                y: [1, 2, 1]
+            }], {
+                xaxis: {
+                    ticks: 'inside',
+                    showgrid: true
+                }
+            })
+            .then(function() {
+                _assert('on labels (defaults)', {
+                    ticks: [110.75, 350, 589.25],
+                    gridLines: [110.75, 350, 589.25],
+                    tickLabels: [106.421, 345.671, 585.25]
+                });
+                return Plotly.relayout(gd, 'xaxis.tickson', 'boundaries');
+            })
+            .then(function() {
+                _assert('inside on boundaries', {
+                    ticks: [230.369, 469.619], // N.B. first and last tick are clipped
+                    gridLines: [230.369, 469.619],
+                    tickLabels: [106.421875, 345.671875, 585.25]
+                });
+                return Plotly.relayout(gd, 'xaxis.ticks', 'outside');
+            })
+            .then(function() {
+                _assert('outside on boundaries', {
+                    ticks: [-8.869, 230.369, 469.619, 708.869],
+                    gridLines: [230.369, 469.619],
+                    tickLabels: [106.421875, 345.671875, 585.25]
+                });
+                return Plotly.restyle(gd, 'x', [[1, 2, 1]]);
+            })
+            .then(function() {
+                _assert('fallback to *labels* on non-category axes', {
+                    ticks: [110.75, 206.449, 302.149, 397.85, 493.549, 589.25],
+                    gridLines: [110.75, 206.449, 302.149, 397.85, 493.549, 589.25],
+                    tickLabels: [106.421, 197.121, 292.821, 388.521, 484.221, 584.921]
+                });
+            })
+            .catch(failTest)
+            .then(done);
+        });
+    });
 });
 
 function getZoomInButton(gd) {