From 9c3473e6b45e4c79f201d19aa9c72ff1f376d771 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 30 Jan 2021 02:35:33 +0100
Subject: [PATCH] Fix graphs tooltip position

---
 ts/graphs/buttons.ts         |  2 +-
 ts/graphs/calendar.ts        |  2 +-
 ts/graphs/histogram-graph.ts |  2 +-
 ts/graphs/hours.ts           |  2 +-
 ts/graphs/reviews.ts         |  2 +-
 ts/graphs/tooltip.ts         | 20 +++++++++-----------
 6 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/ts/graphs/buttons.ts b/ts/graphs/buttons.ts
index c391de6c5..88d9a734c 100644
--- a/ts/graphs/buttons.ts
+++ b/ts/graphs/buttons.ts
@@ -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);
diff --git a/ts/graphs/calendar.ts b/ts/graphs/calendar.ts
index 1afe66302..62eafd71f 100644
--- a/ts/graphs/calendar.ts
+++ b/ts/graphs/calendar.ts
@@ -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)
diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts
index 2ffedab8c..cc8085c2b 100644
--- a/ts/graphs/histogram-graph.ts
+++ b/ts/graphs/histogram-graph.ts
@@ -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);
         })
diff --git a/ts/graphs/hours.ts b/ts/graphs/hours.ts
index bb7f88791..858c17e1e 100644
--- a/ts/graphs/hours.ts
+++ b/ts/graphs/hours.ts
@@ -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);
diff --git a/ts/graphs/reviews.ts b/ts/graphs/reviews.ts
index b4119abf9..ee2f7a343 100644
--- a/ts/graphs/reviews.ts
+++ b/ts/graphs/reviews.ts
@@ -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);
diff --git a/ts/graphs/tooltip.ts b/ts/graphs/tooltip.ts
index 21eac059c..3e402fe56 100644
--- a/ts/graphs/tooltip.ts
+++ b/ts/graphs/tooltip.ts
@@ -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";
 }