Update heatmap with legend and extra color level
This commit is contained in:
parent
53084c4e6f
commit
d9784bdbd4
2 changed files with 75 additions and 11 deletions
|
|
@ -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");
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue