10000 Fix hover with period alignment points and improve positioning of spikes and unified hover label by archmoj · Pull Request #5846 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Fix hover with period alignment points and improve positioning of spikes and unified hover label #5846

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 28 commits into from
Jul 23, 2021
Merged

Fix hover with period alignment points and improve positioning of spikes and unified hover label #5846

Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
b4bdec3
fix scattergl test
archmoj Jul 20, 2021
53fea8e
fix hover on scatter and scattergl with periods
archmoj Jul 20, 2021
2933803
fix hover on bars with period
archmoj Jul 21, 2021
775a8e0
improve and adjust jasmine tests
archmoj Jul 21, 2021
168bc75
draft log for PR 5846
archmoj Jul 21, 2021
3deca0d
drop unused line
archmoj Jul 21, 2021
7c37e98
fix typo and adjust test
archmoj Jul 21, 2021
e5a4057
scatters with period ranges
archmoj Jul 21, 2021
bd528a2
adjust scatter and bar test titles
archmoj Jul 21, 2021
85821d1
fit -> it
archmoj Jul 21, 2021
9fbd186
refactor: enter long lines
archmoj Jul 22, 2021
8a36d8f
position hover labels in respect to max and min of hoverset not the w…
archmoj Jul 22, 2021
f128cf9
for end alignment of unified hover label use minimum to avoid overlap…
archmoj Jul 22, 2021
b26fcbb
similar positioning of hover box for y unified
archmoj Jul 22, 2021
5a80515
refactor
archmoj Jul 22, 2021
9716ef0
improve unified hover box positioning
archmoj Jul 22, 2021
c62d520
edit PR log
archmoj Jul 22, 2021
21a1a93
simplify logic and handle the case of not fitting inside the subplot
archmoj Jul 22, 2021
16f4554
when the scatter point wins, OK to occlude bar & other points
archmoj Jul 22, 2021
8ed847a
fix syntax
archmoj Jul 22, 2021
30f61c8
drop out of range pixel from the end
archmoj Jul 22, 2021
dca5b1e
for x|y hovermodes display spikeline on the winning point
archmoj Jul 22, 2021
df6353d
adjust vertical and horizontal alignment of unified hover label
archmoj Jul 23, 2021
9217db4
handle end edge case
archmoj Jul 23, 2021
1c7a69d
adjustment also for winning types e.g. heatmap use scatter logic
archmoj Jul 23, 2021
f0ef7db
choose the side of the paper which is closest if unified hover did no…
archmoj Jul 23, 2021
4a0a504
update PR log
archmoj Jul 23, 2021
cd0b469
move unified hover by one pixel better help adjustment tested with pe…
archmoj Jul 23, 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
Next Next commit
adjust vertical and horizontal alignment of unified hover label
  • Loading branch information
@archmoj
archmoj committed Jul 23, 2021
commit df6353d4e68c59fd013129e7a7f50a48f3fd7a3a
14 changes: 6 additions & 8 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1083,8 +1083,11 @@ function createHoverText(hoverData, opts, gd) {
legendDraw(gd, mockLegend);

// Position the hover
var legendContainer = container.select('g.legend');
var tbb = legendContainer.node().getBoundingClientRect();
var tWidth = tbb.width + 2 * HOVERTEXTPAD;
var tHeight = tbb.height + 2 * HOVERTEXTPAD;
var winningPoint = hoverData[0];

// When the scatter point wins, it's OK for the hovelabel to occlude the bar and other points.
var scatterWon = cartesianScatterPoints[winningPoint.trace.type];

Expand All @@ -1098,7 +1101,7 @@ function createHoverText(hoverData, opts, gd) {
lyBottom = Math.max.apply(null, hoverData.map(function(c) { return Math.max(c.y0, c.y1); }));
}
} else {
lyTop = lyBottom = Lib.mean(hoverData.map(function(c) { return (c.y0 + c.y1) / 2; }));
lyTop = lyBottom = Lib.mean(hoverData.map(function(c) { return (c.y0 + c.y1) / 2; })) - tHeight / 2;
}

var lxRight, lxLeft;
Expand All @@ -1111,14 +1114,9 @@ function createHoverText(hoverData, opts, gd) {
lxLeft = Math.min.apply(null, hoverData.map(function(c) { return Math.min(c.x0, c.x1); }));
}
} else {
lxRight = lxLeft = Lib.mean(hoverData.map(function(c) { return (c.x0 + c.x1) / 2; }));
lxRight = lxLeft = Lib.mean(hoverData.map(function(c) { return (c.x0 + c.x1) / 2; })) - tWidth / 2;
}

var legendContainer = container.select('g.legend');
var tbb = legendContainer.node().getBoundingClientRect();
var tWidth = tbb.width + 2 * HOVERTEXTPAD;
var tHeight = tbb.height + 2 * HOVERTEXTPAD;

var xOffset = xa._offset;
var yOffset = ya._offset;
lyBottom += yOffset;
Expand Down
0