8000 Pick closest points to the winning point in compare mode and position unified hover box in front of winning point by archmoj · Pull Request #5683 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Pick closest points to the winning point in compare mode and position unified hover box in front of winning point #5683

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 10 commits into from
May 28, 2021
Merged

Pick closest points to the winning point in compare mode and position unified hover box in front of winning point #5683

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
12f199a
fix and improve closest pick in compare modes
archmoj May 25, 2021
756f498
refactor insert function in hover.js
archmoj May 25, 2021
391074b
fixup hover on period bars - use period width
archmoj May 25, 2021
c692eda
use winning point position in unified hover instead of mean
archmoj May 25, 2021
71a14e9
fresh start hover points with the winning point
archmoj May 26, 2021
b240a70
refactor and add comments
archmoj May 26, 2021
fa67044
init variables fixing hover error
archmoj May 26, 2021
f8b584e
handle winning points in traces that produce multiple points
archmoj May 26, 2021
4f92ccf
align period scatter points - improve tests
archmoj May 26, 2021
282a227
align period for scattergl
archmoj May 26, 2021
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
align period for scattergl
  • Loading branch information
@archmoj
archmoj committed May 26, 2021
commit 282a2279c1e1d67bc54bb09c8c8d93713f3f72ea
2 changes: 2 additions & 0 deletions src/traces/scattergl/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,11 @@ function hoverPoints(pointData, xval, yval, hovermode) {
for(i = 0; i < ids.length; i++) {
ptx = x[ids[i]];
dx = Math.abs(xa.c2p(ptx) - xpx);
if(trace._origX && trace._origX[i] !== undefined) dx += xa.c2p(trace._origX[i]) - xa.c2p(ptx);
if(dx < minDist) {
minDist = dx;
dy = ya.c2p(y[ids[i]]) - ypx;
if(trace._origY && trace._origY[i] !== undefined) dy += ya.c2p(trace._origY[i]) - ya.c2p(pty);
dxy = Math.sqrt(dx * dx + dy * dy);
id = ids[i];
}
Expand Down
130 changes: 66 additions & 64 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 @@ -5266,73 +5266,75 @@ describe('hovermode: (x|y)unified', function() {
});
});

it('period points alignments', function(done) {
Plotly.newPlot(gd, {
data: [
{
name: 'bar',
type: 'bar',
x: ['2000-01', '2000-02'],
y: [1, 2],
xhoverfrmat: '%b',
xperiod: 'M1'
},
{
name: 'start',
type: 'scatter',
x: ['2000-01', '2000-02'],
y: [1, 2],
xhoverformat: '%b',
xperiod: 'M1',
xperiodalignment: 'start'
},
{
name: 'end',
type: 'scatter',
x: ['2000-01', '2000-02'],
y: [1, 2],
xhoverformat: '%b',
xperiod: 'M1',
xperiodalignment: 'end'
},
],
layout: {
showlegend: false,
width: 600,
height: 400,
hovermode: 'x unified'
}
})
.then(function(gd) {
_hover(gd, { xpx: 40, ypx: 200 });
assertLabel({title: 'Jan', items: [
'bar : (Jan 1, 2000, 1)',
'start : 1',
'end : 1'
]});
['scatter', 'scattergl'].forEach(function(scatterType) {
it(scatterType + ' period points alignments', function(done) {
Plotly.newPlot(gd, {
data: [
{
name: 'bar',
type: 'bar',
x: ['2000-01', '2000-02'],
y: [1, 2],
xhoverfrmat: '%b',
xperiod: 'M1'
},
{
name: 'start',
type: scatterType,
x: ['2000-01', '2000-02'],
y: [1, 2],
xhoverformat: '%b',
xperiod: 'M1',
xperiodalignment: 'start'
},
{
name: 'end',
type: 'scatter',
x: ['2000-01', '2000-02'],
y: [1, 2],
xhoverformat: '%b',
xperiod: 'M1',
xperiodalignment: 'end'
},
],
layout: {
showlegend: false,
width: 600,
height: 400,
hovermode: 'x unified'
}
})
.then(function(gd) {
_hover(gd, { xpx: 40, ypx: 200 });
assertLabel({title: 'Jan', items: [
'bar : (Jan 1, 2000, 1)',
'start : 1',
'end : 1'
]});

_hover(gd, { xpx: 100, ypx: 200 });
assertLabel({title: 'Jan', items: [
'bar : (Jan 1, 2000, 1)',
'start : 1',
'end : 1'
]});
_hover(gd, { xpx: 100, ypx: 200 });
assertLabel({title: 'Jan', items: [
'bar : (Jan 1, 2000, 1)',
'start : 1',
'end : 1'
]});

_hover(gd, { xpx: 360, ypx: 200 });
assertLabel({title: 'Feb', items: [
'bar : (Feb 1, 2000, 2)',
'start : 2',
'end : 2'
]});
_hover(gd, { xpx: 360, ypx: 200 });
assertLabel({title: 'Feb', items: [
'bar : (Feb 1, 2000, 2)',
'start : 2',
'end : 2'
]});

_hover(gd, { xpx: 400, ypx: 200 });
assertLabel({title: 'Feb', items: [
'bar : (Feb 1, 2000, 2)',
'start : 2',
'end : 2'
]});
})
.then(done, done.fail);
_hover(gd, { xpx: 400, ypx: 200 });
assertLabel({title: 'Feb', items: [
'bar : (Feb 1, 2000, 2)',
'start : 2',
'end : 2'
]});
})
.then(done, done.fail);
});
});

it('period with hover distance -1 include closest not farthest', function(done) {
Expand Down
0