fix: mouse hover in heatmap

web/src/helpers/utils.ts

@@ -1,3 +1,5 @@
+import { assign } from "lodash-es";
+
 export function getNowTimeStamp(): number {
   return Date.now();
 }
@@ -217,3 +219,52 @@ export function getImageSize(src: string): Promise<{ width: number; height: numb
     imgEl.remove();
   });
 }
+
+export const getElementBounding = (element: HTMLElement, relativeEl?: HTMLElement) => {
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
+
+  relativeEl = relativeEl || document.body;
+
+  const elementRect = element.getBoundingClientRect();
+  const relativeElRect = relativeEl.getBoundingClientRect();
+  const relativeElPosition = window.getComputedStyle(relativeEl).getPropertyValue("position");
+
+  const bounding = {
+    width: elementRect.width,
+    height: elementRect.height,
+  };
+
+  if ((relativeEl.tagName !== "BODY" && relativeElPosition === "relative") || relativeElPosition === "sticky") {
+    return assign(bounding, {
+      top: elementRect.top - relativeElRect.top,
+      left: elementRect.left - relativeElRect.left,
+    });
+  }
+
+  const isElementFixed = (element: HTMLElement): boolean => {
+    const parentNode = element.parentNode;
+
+    if (!parentNode || parentNode.nodeName === "HTML") {
+      return false;
+    }
+
+    if (window.getComputedStyle(element).getPropertyValue("position") === "fixed") {
+      return true;
+    }
+
+    return isElementFixed(parentNode as HTMLElement);
+  };
+
+  if (isElementFixed(element)) {
+    return assign(bounding, {
+      top: elementRect.top,
+      left: elementRect.left,
+    });
+  }
+
+  return assign(bounding, {
+    top: elementRect.top + scrollTop,
+    left: elementRect.left + scrollLeft,
+  });
+};