aselimov/hugo-unified-git-activity
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix issues with tooltip position and create partial for laying out

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

11
assets/js/build_heatmap.js
View file

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

37
layouts/partials/git-heatmap.html Normal file
View file

@ -0,0 +1,37 @@
{{ $js := resources.Get "js/build_heatmap.js" }}
{{ $p := .Site.Params.heatmap }}
<style>
:root {
--color-empty: {{ $p.color_empty }};
--color-low: {{ $p.color_low }};
--color-mid: {{ $p.color_mid }};
--color-high: {{ $p.color_high }};
}
#heatmap { overflow-x: auto; }
#heatmap text { font-family: inherit; fill: currentColor; }
#tooltip {
position: fixed;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
}
.hidden { display: none; }
</style>
<div id="heatmap"></div>
<script type="module">
import {flattenData, constructWeeks, render, setupTooltips} from "{{ $js.RelPermalink }}"
const data = await fetch("/activity.json").then((r) => r.json());
const counts = flattenData(data);
const weeks = constructWeeks();
const svg = render(weeks, counts);
document.getElementById("heatmap").appendChild(svg);
setupTooltips(svg);
</script>
<div id="tooltip" class="hidden"></div>
<div id="legend"></div>

38
layouts/shortcodes/git-heatmap.html
View file

@ -1,37 +1 @@
{{ $js := resources.Get "js/build_heatmap.js" }} {{ partial "git-heatmap.html" . }}
{{ $p := .Site.Params.heatmap }}
<style>
:root {
--color-empty: {{ $p.color_empty }};
--color-low: {{ $p.color_low }};
--color-mid: {{ $p.color_mid }};
--color-high: {{ $p.color_high }};
}
#heatmap { display: flex; justify-content: center; }
#heatmap text { font-family: inherit; fill: currentColor; }
#tooltip {
position: fixed;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
}
.hidden { display: none; }
</style>
<div id="heatmap"></div>
<script type="module">
import {flattenData, constructWeeks, render, setupTooltips} from "{{ $js.RelPermalink }}"
const data = await fetch("/activity.json").then((r) => r.json());
const counts = flattenData(data);
const weeks = constructWeeks();
const svg = render(weeks, counts);
document.getElementById("heatmap").appendChild(svg);
setupTooltips(svg);
</script>
<div id="tooltip" class="hidden"></div>
<div id="legend"></div>