Update heatmap with legend and extra color level

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

View file

@ -30,9 +30,10 @@ export function constructWeeks() {
function getColor(count) {
if (count === 0) return "var(--color-empty)";
if (count <= 3) return "var(--color-low)";
if (count <= 10) return "var(--color-mid)";
return "var(--color-high)";
if (count <= 2) return "var(--color-l1)";
if (count <= 5) return "var(--color-l2)";
if (count <= 10) return "var(--color-l3)";
return "var(--color-l4)";
}
export function render(weeks, counts) {
@ -85,6 +86,42 @@ export function render(weeks, counts) {
return svg;
}
export function totalCount(counts) {
return Object.values(counts).reduce((s, v) => s + v, 0);
}
export function renderLegend() {
const CELL = 11;
const GAP = 3;
const SHIFT = CELL + GAP;
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", 5 * SHIFT - GAP);
svg.setAttribute("height", CELL);
svg.style.display = "inline-block";
svg.style.verticalAlign = "middle";
const colors = [
"var(--color-empty)",
"var(--color-l1)",
"var(--color-l2)",
"var(--color-l3)",
"var(--color-l4)",
];
colors.forEach((color, i) => {
const rect = document.createElementNS(svgNS, "rect");
rect.setAttribute("x", i * SHIFT);
rect.setAttribute("y", 0);
rect.setAttribute("width", CELL);
rect.setAttribute("height", CELL);
rect.setAttribute("fill", color);
rect.setAttribute("rx", 2);
svg.appendChild(rect);
});
return svg;
}
export function setupTooltips(svg) {
const tooltip = document.getElementById("tooltip");
document.body.appendChild(tooltip);
@ -94,7 +131,7 @@ export function setupTooltips(svg) {
const date = e.target.dataset.date;
const count = e.target.dataset.count;
tooltip.textContent = `${date} - ${count} commit${count == 1 ? "" : "s"}`;
tooltip.textContent = `${date} - ${count} contribution${count == 1 ? "" : "s"}`;
tooltip.classList.remove("hidden");
});