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
  *
@@ -2151,8 +2191,6 @@ axes.drawLabels = function(gd, ax, opts) {
  var tickLabels = opts.layer.selectAll('g.' + cls)
  .data(ax.showticklabels ? vals : [], makeDataFn(ax));
 
- var maxFontSize = 0;
- var autoangle = 0;
  var labelsReady = [];
 
  tickLabels.enter().append('g')
@@ -2187,10 +2225,6 @@ axes.drawLabels = function(gd, ax, opts) {
 
  tickLabels.exit().remove();
 
- tickLabels.each(function(d) {
- maxFontSize = Math.max(maxFontSize, d.fontSize);
- });
-
  ax._tickLabels = tickLabels;
 
  // TODO ??
@@ -2273,16 +2307,20 @@ axes.drawLabels = function(gd, ax, opts) {
  // check for auto-angling if x labels overlap
  // don't auto-angle at all for log axes with
  // base and digit format
- if(axLetter === 'x' && !isNumeric(ax.tickangle) &&
+ if(vals.length && axLetter === 'x' && !isNumeric(ax.tickangle) &&
  (ax.type !== 'log' || String(ax.dtick).charAt(0) !== 'D')
  ) {
+ var maxFontSize = 0;
  var lbbArray = [];
+ var i;
 
  tickLabels.each(function(d) {
  var s = d3.select(this);
  var thisLabel = s.select('.text-math-group');
  if(thisLabel.empty()) thisLabel = s.select('text');
 
+ maxFontSize = Math.max(maxFontSize, d.fontSize);
+
  var x = ax.l2p(d.x);
  var bb = Drawing.bBox(thisLabel.node());
 
@@ -2298,21 +2336,38 @@ axes.drawLabels = function(gd, ax, opts) {
  });
  });
 
- for(var 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;
+ var autoangle = 0;
+
+ if(ax.tickson === 'boundaries') {
+ var gap = 2;
+ if(ax.ticks) gap += ax.tickwidth / 2;
+
+ for(i = 0; i < lbbArray.length; i++) {
+ var xbnd = vals[i].xbnd;
+ var lbb = lbbArray[i];
+ if(
+ (xbnd[0] !== null && (lbb.left - ax.l2p(xbnd[0])) < gap) ||
+ (xbnd[1] !== null && (ax.l2p(xbnd[1]) - lbb.right) < gap)
+ ) {
+ autoangle = 90;
+ break;
+ }
+ }
+ } else {
+ var vLen = vals.length;
+ var tickSpacing = Math.abs((vals[vLen - 1].x - vals[0].x) * ax._m) / (vLen - 1);
+ var fitBetweenTicks = tickSpacing < maxFontSize * 2.5;
+
+ // any overlap at all - set 30 degrees or 90 degrees
+ for(i = 0; i < lbbArray.length - 1; i++) {
+ if(Lib.bBoxIntersect(lbbArray[i], lbbArray[i + 1])) {
+ autoangle = fitBetweenTicks ? 90 : 30;
+ break;
+ }
  }
  }
 
  if(autoangle) {
- var tickspacing = Math.abs(
- (vals[vals.length - 1].x - vals[0].x) * ax._m
- ) / (vals.length - 1);
- if(tickspacing < maxFontSize * 2.5) {
- autoangle = 90;
- }
  positionLabels(tickLabels, autoangle);
  }
  ax._lastangle = autoangle;

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,104 @@
+{
+ "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"
+ },
+
+ {
+ "type": "bar",
+ "name": "with dtick !== 1",
+ "x": ["a", "b", "c", "d", "e", "f", "g", "h"],
+ "y": [1, 2, 1, 2, 1, 3, 4, 1],
+ "xaxis": "x3",
+ "yaxis": "y3"
+ },
+
+ {
+ "mode": "markers",
+ "marker": {"symbol": "square"},
+ "name": "with overlapping tick labels",
+ "x": ["A very long title", "short", "Another very long title"],
+ "y": [1, 4, 2],
+ "xaxis": "x4",
+ "yaxis": "y4"
+ }
+ ],
+ "layout": {
+ "boxmode": "group",
+ "grid": {
+ "rows": 4,
+ "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
+ },
+ "xaxis3": {
+ "ticks": "inside",
+ "tickson": "boundaries",
+ "gridcolor": "white",
+ "gridwidth": 4,
+ "dtick": 2
+ },
+ "xaxis4": {
+ "domain": [0.22, 0.78],
+ "ticks": "outside",
+ "ticklen": 20,
+ "tickson": "boundaries",
+ "gridcolor": "white",
+ "gridwidth": 4
+ },
+ "plot_bgcolor": "lightgrey",
+ "showlegend": false,
+ "width": 500,
+ "height": 800,
+ "margin": {"b": 140}
+ }
+}