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

Update heatmap with legend and extra color level

Browse source
This commit is contained in:
Alex Selimov 2026-05-13 07:18:04 -04:00
parent 53084c4e6f
commit d9784bdbd4
2 changed files with 75 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

41
layouts/partials/git-heatmap.html
View file

@ -4,18 +4,31 @@
<style>
:root {
--color-empty: {{ $p.color_empty_dark }};
--color-low: {{ $p.color_low }};
--color-mid: {{ $p.color_mid }};
--color-high: {{ $p.color_high }};
--color-l1: {{ $p.color_max }};
--color-l2: {{ $p.color_high }};
--color-l3: {{ $p.color_mid }};
--color-l4: {{ $p.color_low }};
}
@media (prefers-color-scheme: light) {
:root {
--color-empty: {{ $p.color_empty_light }};
}
:root {
--color-empty: {{ $p.color_empty_light }};
--color-l1: {{ $p.color_low }};
--color-l2: {{ $p.color_mid }};
--color-l3: {{ $p.color_high }};
--color-l4: {{ $p.color_max }};
}
}
#heatmap { overflow-x: auto; }
#heatmap text { font-family: inherit; fill: currentColor; }
#heatmap-caption {font-size: 0.8em; text-align: center; margin-top: 0px;}
#heatmap-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75em;
margin-top: 4px;
}
#heatmap-legend { display: flex; align-items: center; gap: 4px; }
#tooltip {
position: fixed;
background: #333;
@ -30,7 +43,7 @@
<div id="heatmap"></div>
<script type="module">
import {flattenData, constructWeeks, render, setupTooltips} from "{{ $js.RelPermalink }}"
import {flattenData, constructWeeks, render, setupTooltips, totalCount, renderLegend} from "{{ $js.RelPermalink }}"
const data = await fetch("/activity.json").then((r) => r.json());
const counts = flattenData(data);
@ -38,7 +51,21 @@
const svg = render(weeks, counts);
document.getElementById("heatmap").appendChild(svg);
setupTooltips(svg);
document.getElementById("contribution-count").textContent =
`${totalCount(counts)} contributions in the last year`;
const legendEl = document.getElementById("heatmap-legend");
legendEl.appendChild(document.createTextNode("Less"));
legendEl.appendChild(renderLegend());
legendEl.appendChild(document.createTextNode("More"));
</script>
<div id="heatmap-footer">
<span id="contribution-count"></span>
<span id="heatmap-legend"></span>
</div>
{{ with $p.caption }}
<p id="heatmap-caption"> {{ . | safeHTML }} </p>
{{ end }}