8000 Make hover spikes work when no tick labels are present by etpinard · Pull Request #1980 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Make hover spikes work when no tick labels are present #1980

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.

Sign up for GitHub

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 6 commits into from
Sep 5, 2017
Merged

Make hover spikes work when no tick labels are present #1980

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a66aa2d
make sure ax._boundingBox is defined when showticklabels is false
etpinard Sep 1, 2017
b36392e
fill in dummy boundingBox object
etpinard Sep 5, 2017
874b1ba
split cases of early returns in drawLabels
etpinard Sep 5, 2017
d306612
add test for spike on `showticklabels: false` axes
etpinard Sep 5, 2017
92b606b
revamp hover spike tests
etpinard Sep 5, 2017
e45142d
add tolerance
etpinard Sep 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
revamp hover spike tests 
- assert number of spike line visible as well as
  their position attributes
  • Loading branch information
@etpinard
etpinard committed Sep 5, 2017
commit 92b606b76adf1a0806e2b051d603fbe501e2bfba
107 changes: 79 additions & 28 deletions test/jasmine/tests/hover_spikeline_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,55 +7,106 @@ var Lib = require('@src/lib');
var fail = require('../assets/fail_test');
var createGraphDiv = require('../assets/create_graph_div');
var destroyGraphDiv = require('../assets/destroy_graph_div');
var customMatchers = require('../assets/custom_matchers');

describe('spikeline', function() {
'use strict';

var mock = require('@mocks/19.json');
beforeAll(function() {
jasmine.addMatchers(customMatchers);
});

afterEach(destroyGraphDiv);

describe('hover', function() {
var mockCopy = Lib.extendDeep({}, mock);
var gd;

mockCopy.layout.xaxis.showspikes = true;
mockCopy.layout.xaxis.spikemode = 'toaxis';
mockCopy.layout.yaxis.showspikes = true;
mockCopy.layout.yaxis.spikemode = 'toaxis+marker';
mockCopy.layout.xaxis2.showspikes = true;
mockCopy.layout.xaxis2.spikemode = 'toaxis';
mockCopy.layout.hovermode = 'closest';
function makeMock() {
var _mock = Lib.extendDeep({}, require('@mocks/19.json'));
_mock.layout.xaxis.showspikes = true;
_mock.layout.xaxis.spikemode = 'toaxis';
_mock.layout.yaxis.showspikes = true;
_mock.layout.yaxis.spikemode = 'toaxis+marker';
_mock.layout.xaxis2.showspikes = true;
_mock.layout.xaxis2.spikemode = 'toaxis';
_mock.layout.hovermode = 'closest';
return _mock;
}

function _hover(evt, subplot) {
Fx.hover(gd, evt, subplot);
delete gd._lastHoverTime;
}

function _assert(lineExpect, circleExpect) {
var lines = d3.selectAll('line.spikeline');
var circles = d3.selectAll('circle.spikeline');

expect(lines.size()).toBe(lineExpect.length, '# of line nodes');
expect(circles.size()).toBe(circleExpect.length, '# of circle nodes');

lines.each(function(_, i) {
var sel = d3.select(this);
['x1', 'y1', 'x2', 'y2'].forEach(function(d, j) {
expect(sel.attr(d))
.toBeWithin(lineExpect[i][j], 1, 'line ' + i + ' attr ' + d);
});
});

beforeEach(function(done) {
circles.each(function(_, i) {
var sel = d3.select(this);
['cx', 'cy'].forEach(function(d, j) {
expect(sel.attr(d))
.toBeWithin(circleExpect[i][j], 1, 'circle ' + i + ' attr ' + d);
});
});
}

it('draws lines and markers on enabled axes', function(done) {
gd = createGraphDiv();
Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
});
var _mock = makeMock();

it('draws lines and markers on enabled axes', function() {
Fx.hover('graph', {xval: 2, yval: 3}, 'xy');
expect(d3.selectAll('line.spikeline').size()).toEqual(4);
expect(d3.selectAll('circle.spikeline').size()).toEqual(1);
Plotly.plot(gd, _mock).then(function() {
_hover({xval: 2, yval: 3}, 'xy');
_assert(
[[80, 250, 557, 250], [80, 250, 557, 250], [557, 401, 557, 250], [557, 401, 557, 250]],
[[83, 250]]
);
})
.then(function() {
_hover({xval: 30, yval: 40}, 'x2y2');
_assert(
[[820, 220, 820, 167], [820, 220, 820, 167]],
[]
);
})
.catch(fail)
.then(done);
});

it('draws lines and markers on enabled axes w/o tick labels', function(done) {
Plotly.relayout(gd, {
'xaxis.showticklabels': false,
'yaxis.showticklabels': false
gd = createGraphDiv();
var _mock = makeMock();

_mock.layout.xaxis.showticklabels = false;
_mock.layout.yaxis.showticklabels = false;

Plotly.plot(gd, _mock).then(function() {
_hover({xval: 2, yval: 3}, 'xy');
_assert(
[[80, 250, 557, 250], [80, 250, 557, 250], [557, 401, 557, 250], [557, 401, 557, 250]],
[[83, 250]]
);
})
.then(function() {
Fx.hover('graph', {xval: 2, yval: 3}, 'xy');
expect(d3.selectAll('line.spikeline').size()).toEqual(4);
expect(d3.selectAll('circle.spikeline').size()).toEqual(1);
_hover({xval: 30, yval: 40}, 'x2y2');
_assert(
[[820, 220, 820, 167], [820, 220, 820, 167]],
[]
);
})
.catch(fail)
.then(done);
});

it('doesn\'t draw lines and markers on disabled axes', function() {
Fx.hover('graph', {xval: 30, yval: 40}, 'x2y2');
expect(d3.selectAll('line.spikeline').size()).toEqual(2);
expect(d3.selectAll('circle.spikeline').size()).toEqual(0);
});
});
});
0