Add tickson: 'boundaries' for category cartesian axes

src/components/colorbar/draw.js

@@ -198,6 +198,7 @@ module.exports = function draw(gd, id) {
  letter: 'y',
  font: fullLayout.font,
  noHover: true,
+ noTickson: true,
  calendar: fullLayout.calendar // not really necessary (yet?)
  };
 

src/plots/cartesian/axes.js

@@ -1163,6 +1163,20 @@ function formatCategory(ax, out) {
  var tt = ax._categories[Math.round(out.x)];
  if(tt === undefined) tt = '';
  out.text = String(tt);
+
+ // Setup ticks and grid lines boundaries
+ // at 1/2 a 'category' to the left/bottom
+ if(ax.tickson === 'boundaries') {
+ var inbounds = function(v) {
+ var p = ax.l2p(v);
+ return p >= 0 && p <= ax._length ? v : null;
+ };
+
+ out.xbnd = [
+ inbounds(out.x - 0.5),
+ inbounds(out.x + ax.dtick - 0.5)
+ ];
+ }
 }
 
 function formatLinear(ax, out, hover, extraPrecision, hideexp) {
@@ -1610,14 +1624,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' && vals.length) {
+ // valsBoundaries is not used for labels;
+ // no need to worry about the other tickTextObj keys
+ var valsBoundaries = [];
+ var _push = function(d, bndIndex) {
+ var xb = d.xbnd[bndIndex];
+ if(xb !== null) {
+ valsBoundaries.push(Lib.extendFlat({}, d, {x: xb}));
+ }
+ };
+ for(i = 0; i < vals.length; i++) _push(vals[i], 0);
+ _push(vals[i - 1], 1);
+
+ 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 +1678,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 +1693,6 @@ axes.drawOne = function(gd, ax, opts) {
  }
 
  var tickSigns = axes.getTickSigns(ax);
- var tickVals = ax.ticks === 'inside' ? valsClipped : vals;
  var tickSubplots = [];
 
  if(ax.ticks) {
@@ -1920,8 +1960,9 @@ axes.makeTickPath = function(ax, shift, sgn) {
 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 = ax.ticks === 'outside' ? ax.ticklen : 0;
+ var labelStandoff = ticksOnOutsideLabels ? ax.ticklen : 0;
  var labelShift = 0;
 
  if(angle && ax.ticks === 'outside') {
@@ -1930,7 +1971,7 @@ axes.makeLabelFns = function(ax, shift, angle) {
  labelShift = ax.ticklen * Math.sin(rad);
  }
 
- if(ax.showticklabels && (ax.ticks === 'outside' || ax.showline)) {
+ if(ax.showticklabels && (ticksOnOutsideLabels || ax.showline)) {
  labelStandoff += 0.2 * ax.tickfont.size;
  }
 
@@ -2018,7 +2059,6 @@ axes.drawTicks = function(gd, ax, opts) {
  ticks.attr('transform', opts.transFn);
 };
 
-
 /**
  * Draw axis grid
  *
@@ -2277,6 +2317,7 @@ axes.drawLabels = function(gd, ax, opts) {
  (ax.type !== 'log' || String(ax.dtick).charAt(0) !== 'D')
  ) {
  var lbbArray = [];
+ var i;
 
  tickLabels.each(function(d) {
  var s = d3.select(this);
@@ -2298,14 +2339,26 @@ axes.drawLabels = function(gd, ax, opts) {
  });
  });
 
- for(var i = 0; i < lbbArray.length - 1; i++) {
+ for(i = 0; i < lbbArray.length - 1; i++) {
  if(Lib.bBoxIntersect(lbbArray[i], lbbArray[i + 1])) {
  // any overlap at all - set 30 degrees
  autoangle = 30;
  break;
  }
  }
 
+ if(ax.tickson === 'boundaries') {
+ for(i = 0; i < lbbArray.length; i++) {
+ if(
+ (vals[i].xl !== null && (lbbArray[i].left - ax.l2p(vals[i].xbnd[0])) < 2) ||
+ (vals[i].xr !== null && (ax.l2p(vals[i].xbnd[1]) - lbbArray[i].right) < 2)
+ ) {
+ autoangle = 90;
+ break;
+ }
+ }
+ }
+
  if(autoangle) {
  var tickspacing = Math.abs(
  (vals[vals.length - 1].x - vals[0].x) * ax._m

src/plots/cartesian/axis_defaults.js

@@ -28,6 +28,7 @@ var setConvert = require('./set_convert');
  * outerTicks: boolean, should ticks default to outside?
  * showGrid: boolean, should gridlines be shown by default?
  * noHover: boolean, this axis doesn't support hover effects?
+ * noTickson: boolean, this axis doesn't support 'tickson'
  * data: the plot data, used to manage categories
  * bgColor: the plot background color, to calculate default gridline colors
  */
@@ -89,5 +90,10 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
 
  if(options.automargin) coerce('automargin');
 
+ if(!options.noTickson &&
+ containerOut.type === 'category' && (containerOut.ticks || containerOut.showgrid)) {
+ coerce('tickson');
+ }
+
  return containerOut;
 };

src/plots/cartesian/layout_attributes.js

@@ -304,6 +304,20 @@ module.exports = {
  'the axis lines.'
  ].join(' ')
  },
+ tickson: {
+ valType: 'enumerated',
+ values: ['labels', 'boundaries'],
+ role: 'info',
+ dflt: 'labels',
+ editType: 'ticks',
+ description: [
+ 'Determines where ticks and grid lines are drawn with respect to their',
+ 'corresponding tick labels.',
+ 'Only has an effect for axes of `type` *category*.',
+ 'When set to *boundaries*, ticks and grid lines are drawn half a category',
+ 'to the left/bottom of labels.'
+ ].join(' ')
+ },
  mirror: {
  valType: 'enumerated',
  values: [true, 'ticks', false, 'all', 'allticks'],

src/plots/gl3d/layout/axis_defaults.js

@@ -50,6 +50,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, options) {
  letter: axName[0],
  data: options.data,
  showGrid: true,
+ noTickson: true,
  bgColor: options.bgColor,
  calendar: options.calendar
  },

test/image/mocks/tickson_boundaries.json

@@ -0,0 +1,66 @@
+{
+ "data": [
+ {
+ "type": "box",
+ "x": ["day 1", "day 1", "day 1", "day 1", "day 1", "day 1", "day 2", "day 2", "day 2", "day 2", "day 2", "day 2"],
+ "y": [0.2, 0.2, 0.6, 1, 0.5, 0.4, 0.2, 0.7, 0.9, 0.1, 0.5, 0.3]
+ },
+ {
+ "type": "box",
+ "x": ["day 1", "day 1", "day 1", "day 1", "day 1", "day 1", "day 2", "day 2", "day 2", "day 2", "day 2", "day 2"],
+ "y": [0.1, 0.3, 0.1, 0.9, 0.6, 0.6, 0.9, 1, 0.3, 0.6, 0.8, 0.5]
+ },
+ {
+ "type": "box",
+ "x": ["day 1", "day 1", "day 1", "day 1", "day 1", "day 1", "day 2", "day 2", "day 2", "day 2", "day 2", "day 2"],
+ "y": [0.6, 0.7, 0.3, 0.6, 0, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.2]
+ },
+ {
+ "type": "bar",
+ "x": [1, 2, 1],
+ "y": ["apples", "bananas", "clementines"],
+ "orientation": "h",
+ "xaxis": "x2",
+ "yaxis": "y2"
+ },
+ {
+ "type": "bar",
+ "x": [1.3, 2.2, 0.8],
+ "y": ["apples", "bananas", "clementines"],
+ "orientation": "h",
+ "xaxis": "x2",
+ "yaxis": "y2"
+ },
+ {
+ "type": "bar",
+ "x": [3, 3.2, 1.8],
+ "y": ["apples", "bananas", "clementines"],
+ "orientation": "h",
+ "xaxis": "x2",
+ "yaxis": "y2"
+ }
+ ],
+ "layout": {
+ "boxmode": "group",
+ "grid": {
+ "rows": 2,
+ "columns": 1,
+ "pattern": "independent",
+ "ygap": 0.2
+ },
+ "xaxis": {
+ "ticks": "outside",
+ "tickson": "boundaries",
+ "gridcolor": "white",
+ "gridwidth": 4
+ },
+ "yaxis2": {
+ "ticks": "inside",
+ "tickson": "boundaries",
+ "gridcolor": "white",
+ "gridwidth": 4
+ },
+ "plot_bgcolor": "lightgrey",
+ "showlegend": false
+ }
+}

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: [230.369, 469.619],
+ 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) {