langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix graphs tooltip position

Browse Source
This commit is contained in:
Henrik Giesel 2021-01-30 02:35:33 +01:00
parent 3701abe06a
commit 9c3473e6b4
6 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ts/graphs/buttons.ts
View File

@ -257,7 +257,7 @@ export function renderButtons(
.attr("width", xButton.bandwidth())
.attr("height", () => y(0)! - y(yMax!)!)
.on("mousemove", (event: MouseEvent, d: Datum) => {
const [x, y] = pointer(event);
const [x, y] = pointer(event, document.body);
showTooltip(tooltipText(d), x, y);
})
.on("mouseout", hideTooltip);

2
ts/graphs/calendar.ts
View File

@ -208,7 +208,7 @@ export function renderCalendar(
.attr("x", (d) => x(d.weekNumber + 1)!)
.attr("y", (d) => bounds.marginTop + d.weekDay * height)
.on("mousemove", (event: MouseEvent, d: DayDatum) => {
const [x, y] = pointer(event);
const [x, y] = pointer(event, document.body);
showTooltip(tooltipText(d), x, y);
})
.on("mouseout", hideTooltip)

2
ts/graphs/histogram-graph.ts
View File

@ -170,7 +170,7 @@ export function histogramGraph(
.attr("width", ([bin]) => barWidth(bin))
.attr("height", () => y(0) - y(yMax))
.on("mousemove", (event: MouseEvent, [bin, area]) => {
const [x, y] = pointer(event);
const [x, y] = pointer(event, document.body);
const pct = data.showArea ? (area / data.total) * 100 : 0;
showTooltip(data.hoverText(bin, area, pct), x, y);
})

2
ts/graphs/hours.ts
View File

@ -205,7 +205,7 @@ export function renderHours(
.attr("width", x.bandwidth())
.attr("height", () => y(0)! - y(yMax!)!)
.on("mousemove", (event: MouseEvent, d: Hour) => {
const [x, y] = pointer(event);
const [x, y] = pointer(event, document.body);
showTooltip(tooltipText(d), x, y);
})
.on("mouseout", hideTooltip);

2
ts/graphs/reviews.ts
View File

@ -376,7 +376,7 @@ export function renderReviews(
.attr("width", ([bin]) => barWidth(bin))
.attr("height", () => y(0) - y(yMax))
.on("mousemove", (event: MouseEvent, [bin, area]): void => {
const [x, y] = pointer(event);
const [x, y] = pointer(event, document.body);
showTooltip(tooltipText(bin as any, area), x, y);
})
.on("mouseout", hideTooltip);

20
ts/graphs/tooltip.ts
View File

@ -3,14 +3,11 @@
import throttle from "lodash.throttle";
let tooltipDiv: HTMLDivElement | null = null;
const tooltipDiv: HTMLDivElement = document.createElement("div");
tooltipDiv.className = "graph-tooltip";
document.body.appendChild(tooltipDiv);
function showTooltipInner(msg: string, x: number, y: number): void {
if (!tooltipDiv) {
tooltipDiv = document.createElement("div");
tooltipDiv.className = "graph-tooltip";
document.body.appendChild(tooltipDiv);
}
tooltipDiv.innerHTML = msg;
// move tooltip away from edge as user approaches right side
@ -18,8 +15,11 @@ function showTooltipInner(msg: string, x: number, y: number): void {
tooltipDiv.clientWidth * 1.2 * (x / document.body.clientWidth)
);
tooltipDiv.style.left = `${x + 40 - shiftLeftAmount}px`;
tooltipDiv.style.top = `${y + 40}px`;
const adjustedX = x + 40 - shiftLeftAmount;
const adjustedY = y + 40;
tooltipDiv.style.left = `${adjustedX}px`;
tooltipDiv.style.top = `${adjustedY}px`;
tooltipDiv.style.opacity = "1";
}
@ -27,7 +27,5 @@ export const showTooltip = throttle(showTooltipInner, 16);
export function hideTooltip(): void {
showTooltip.cancel();
if (tooltipDiv) {
tooltipDiv.style.opacity = "0";
}
tooltipDiv.style.opacity = "0";
}