8000 Add spikelines by apalchys · Pull Request #2247 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Add spikelines #2247

New issue
8000

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 12 commits into from
Jan 17, 2018
Merged

Add spikelines #2247

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
132b5b2
add crossline functionality
apalchys Nov 8, 2017
85714e8
fix crossline tests
apalchys Nov 9, 2017
cd83ecf
fix crossline tests
apalchys Nov 9, 2017
006b55d
move the search for crosslinePoints to ensure that the hoverLabels da…
apalchys Nov 9, 2017
b14286b
add spikedistance, hoverdistance, spikesnap
apalchys Dec 6, 2017
e5875a9
fix tests related to new spike mode
apalchys Dec 7, 2017
37e419f
fix hoverdistance and spikedistance when it set to 0
apalchys Dec 7, 2017
911ae0e
re-work spikeline based on PR review
apalchys Dec 19, 2017
751d527
add new tests and fix cursor
apalchys Jan 12, 2018
f562832
fix tests
apalchys Jan 12, 2018
6c2f368
fix issues after PR code review
apalchys Jan 17, 2018
f56413a
restore and update spikeline tests
apalchys Jan 17, 2018
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
add new tests and fix cursor
  • Loading branch information
@apalchys
apalchys committed Jan 12, 2018
commit 751d527d86abc0689b87886811dd25e410a7aa9a
12 changes: 8 additions & 4 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,9 +274,11 @@ function _hover(gd, evt, subplot, noHoverEvent) {
if(hasUserCalledHover) {
if('xpx' in evt) xpx = evt.xpx;
else xpx = xaArray[0]._length / 2;
if(!('offsetX' in evt)) evt.offsetX = xpx + xaArray[0]._offset;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to fill offsetX and offsetY now?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to fill it to provide data for the spikesnap: cursor case, so that createspikes function knows the coordinates of the pointer.
For clarity, I renamed these parameters to pointerX and pointerY.


if('ypx' in evt) ypx = evt.ypx;
else ypx = yaArray[0]._length / 2;
if(!('offsetY' in evt)) evt.offsetY = ypx + yaArray[0]._offset;
}
else {
// fire the beforehover event and quit if it returns false
Expand Down Expand Up @@ -419,7 +421,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
if(hoverData.length === 0) {
pointData.distance = spikedistance;
pointData.index = false;
var closestPoints = trace._module.hoverPoints(pointData, xval, yval, 'closest');
var closestPoints = trace._module.hoverPoints(pointData, xval, yval, 'closest', fullLayout._hoverlayer);
if(closestPoints) {
var tmpPoint;
var closestVPoints = closestPoints.filter(function(point) {
Expand Down Expand Up @@ -1247,10 +1249,11 @@ function createSpikelines(closestPoints, opts) {

if(ySnap === 'cursor') {
hLinePointY = evt.offsetY;
hLinePointX = evt.offsetX;
} else {
hLinePointY = ya._offset + (hLinePoint.y0 + hLinePoint.y1) / 2;
hLinePointX = xa._offset + (hLinePoint.x0 + hLinePoint.x1) / 2;
}
hLinePointX = xa._offset + (hLinePoint.x0 + hLinePoint.x1) / 2;
var dfltHLineColor = tinycolor.readability(hLinePoint.color, contrastColor) < 1.5 ?
Color.contrast(contrastColor) : hLinePoint.color;
var yMode = ya.spikemode,
Expand Down Expand Up @@ -1322,12 +1325,13 @@ function createSpikelines(closestPoints, opts) {

if(xSnap === 'cursor') {
vLinePointX = evt.offsetX;
vLinePointY = evt.offsetY;
} else {
vLinePointX = xa._offset + (vLinePoint.x0 + vLinePoint.x1) / 2;
vLinePointY = ya._offset + (vLinePoint.y0 + vLinePoint.y1) / 2;
}
vLinePointY = ya._offset + (vLinePoint.y0 + vLinePoint.y1) / 2;
var dfltVLineColor = tinycolor.readability(vLinePoint.color, contrastColor) < 1.5 ?
Color.contrast(contrastColor) : vLinePoint.color;
Color.contrast(contrastColor) : vLinePoint.color;
var xMode = xa.spikemode,
xThickness = xa.spikethickness,
xColor = xa.spikecolor || dfltVLineColor,
Expand Down
15 changes: 13 additions & 2 deletions test/jasmine/tests/hover_label_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1842,7 +1842,17 @@ describe('hover distance', function() {
});
});

it('responds to hoverdistance change', function() {
it('responds to hoverdistance change part 1', function() {
var gd = document.getElementById('graph');
var evt = { xpx: 450, ypx: 155 };
gd._fullLayout.hoverdistance = 10;

Fx.hover('graph', evt, 'xy');

expect(gd._hoverdata).toEqual(undefined);
});

it('responds to hoverdistance change part 2', function() {
var gd = document.getElementById('graph');
var evt = { xpx: 450, ypx: 155 };
gd._fullLayout.hoverdistance = 30;
Expand All @@ -1857,7 +1867,8 @@ describe('hover distance', function() {
expect(hoverTrace.y).toEqual(3);

assertHoverLabelContent({
nums: '(2, 3)',
nums: '3',
axis: '2',
name: 'trace 0'
});
});
Expand Down
45 changes: 29 additions & 16 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 @@ -135,43 +135,56 @@ describe('spikeline', function() {
.then(done);
});

it('automatically switch between toaxis and across spikemodes on switching the hovermodes', function(done) {
it('draws lines and markers on enabled axes in the spikesnap "cursor" mode', function(done) {
gd = createGraphDiv();
var _mock = makeMock('toaxis', 'closest');
var _mock = makeMock('toaxis', 'x');

Plotly.plot(gd, _mock).then(function() {
_hover({xval: 2, yval: 3}, 'xy');
_mock.layout.xaxis.spikesnap = 'cursor';
_mock.layout.yaxis.spikesnap = 'cursor';
_mock.layout.xaxis2.spikesnap = 'cursor';

Plotly.plot(gd, _mock)
.then(function() {
_set_spikedistance(200);
})
.then(function() {
_hover({xpx: 120, ypx: 180}, 'xy');
_assert(
[[557, 401, 557, 250], [557, 401, 557, 250], [80, 250, 557, 250], [80, 250, 557, 250]],
[[83, 250]]
[[200, 401, 200, 280], [200, 401, 200, 280], [80, 280, 200, 280], [80, 280, 200, 280]],
[[83, 280]]
);
})
.then(function() {
_hover({xval: 30, yval: 40}, 'x2y2');
_hover({xpx: 31, ypx: 41}, 'x2y2');
_assert(
[[820, 220, 820, 167], [820, 220, 820, 167]],
[[682, 220, 682, 156], [682, 220, 682, 156]],
[]
);
})
.then(function() {
_set_hovermode('x');
})
.then(function() {
.catch(fail)
.then(done);
});

it('doesn\'t switch between toaxis and across spikemodes on switching the hovermodes', function(done) {
gd = createGraphDiv();
var _mock = makeMock('toaxis', 'closest');

Plotly.plot(gd, _mock).then(function() {
_hover({xval: 2, yval: 3}, 'xy');
_assert(
[[557, 100, 557, 401], [557, 100, 557, 401], [80, 250, 1033, 250], [80, 250, 1033, 250]],
[[557, 401, 557, 250], [557, 401, 557, 250], [80, 250, 557, 250], [80, 250, 557, 250]],
[[83, 250]]
);
})
.then(function() {
_hover({xval: 30, yval: 40}, 'x2y2');
_assert(
[[820, 115, 820, 220], [820, 115, 820, 220]],
[[820, 220, 820, 167], [820, 220, 820, 167]],
[]
);
})
.then(function() {
_set_hovermode('closest');
_set_hovermode('x');
})
.then(function() {
_hover({xval: 2, yval: 3}, 'xy');
Expand All @@ -191,7 +204,7 @@ describe('spikeline', function() {
.then(done);
});

it('increase the range of search for points to draw the spikelines', function(done) {
it('increase the range of search for points to draw the spikelines on spikedistance change', function(done) {
gd = createGraphDiv();
var _mock = makeMock('toaxis', 'closest');

Expand Down
0