Fix issues with tooltip position and create partial for laying out

This commit is contained in:
Alex Selimov 2026-05-11 22:37:17 -04:00
parent bd9c0d58df
commit 3c48c2bd2d
3 changed files with 45 additions and 41 deletions

View file

@ -43,8 +43,10 @@ export function render(weeks, counts) {
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", weeks.length * SHIFT + 30);
svg.setAttribute("height", SHIFT * 7 + 20);
const svgWidth = weeks.length * SHIFT + 30;
const svgHeight = SHIFT * 7 + 20;
svg.setAttribute("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
svg.setAttribute("width", "100%");
// Place the labels first
["Mon", "Wed", "Fri"].forEach((label, i) => {
@ -85,6 +87,7 @@ export function render(weeks, counts) {
export function setupTooltips(svg) {
const tooltip = document.getElementById("tooltip");
document.body.appendChild(tooltip);
svg.addEventListener("mouseover", (e) => {
if (e.target.tagName != "rect") return;
@ -96,8 +99,8 @@ export function setupTooltips(svg) {
});
svg.addEventListener("mousemove", (e) => {
tooltip.style.left = e.pageX + 12 + "px";
tooltip.style.top = e.pageY - 28 + "px";
tooltip.style.left = e.clientX + 12 + "px";
tooltip.style.top = e.clientY - 28 + "px";
});
svg.addEventListener("mouseout", (e) => {