Fix issues with tooltip position and create partial for laying out
This commit is contained in:
parent
bd9c0d58df
commit
3c48c2bd2d
3 changed files with 45 additions and 41 deletions
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue