8000 Add `tickson: 'boundaries'` for category cartesian axes by etpinard · Pull Request #3275 · plotly/plotly.js · GitHub
[go: up one dir, main page]

Skip to content

Add tickson: 'boundaries' for category cartesian axes #3275

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Nov 29, 2018
Prev Previous commit
Next Next commit
adapt Axes.calcTicks output for tickson:'boundaries'
  • Loading branch information
etpinard committed Nov 20, 2018
commit 90c653b207e02e46e99b7e9b42c89570532f85d3
36 changes: 31 additions & 5 deletions src/plots/cartesian/axes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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) {
Expand Down
74 changes: 74 additions & 0 deletions test/jasmine/tests/axes_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
0