106 lines
2.9 KiB
JavaScript
106 lines
2.9 KiB
JavaScript
export function flattenData(raw) {
|
|
const result = {};
|
|
for (const [date, repos] of Object.entries(raw)) {
|
|
result[date] = Object.values(repos).reduce((sum, n) => sum + n, 0);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
export function constructWeeks() {
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
const start = new Date(today);
|
|
start.setDate(today.getDate() - 52 * 7);
|
|
start.setDate(start.getDate() - start.getDay());
|
|
|
|
const weeks = [];
|
|
const cur = new Date(start);
|
|
while (cur <= today) {
|
|
const week = [];
|
|
for (let d = 0; d < 7; d++) {
|
|
const day = new Date(cur);
|
|
week.push(day <= today ? day : null);
|
|
cur.setDate(cur.getDate() + 1);
|
|
}
|
|
weeks.push(week);
|
|
}
|
|
return weeks;
|
|
}
|
|
|
|
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)";
|
|
}
|
|
|
|
export function render(weeks, counts) {
|
|
const CELL = 13;
|
|
const GAP = 2;
|
|
const SHIFT = CELL + GAP;
|
|
|
|
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);
|
|
|
|
// Place the labels first
|
|
["Mon", "Wed", "Fri"].forEach((label, i) => {
|
|
const dayLabel = document.createElementNS(svgNS, "text");
|
|
dayLabel.setAttribute("x", 0);
|
|
dayLabel.setAttribute("y", (2 * i + 1) * SHIFT + 0.75 * CELL);
|
|
dayLabel.setAttribute("font-size", 12);
|
|
|
|
const text = document.createTextNode(label);
|
|
dayLabel.appendChild(text);
|
|
svg.appendChild(dayLabel);
|
|
});
|
|
|
|
weeks.forEach((week, col) => {
|
|
week.forEach((day, row) => {
|
|
if (day === null) {
|
|
return;
|
|
}
|
|
const key = day.toISOString().slice(0, 10); // Get the key in yyyy-mm-dd format
|
|
|
|
const count = counts[key] || 0;
|
|
|
|
const rect = document.createElementNS(svgNS, "rect");
|
|
rect.setAttribute("x", col * SHIFT + 30);
|
|
rect.setAttribute("y", row * SHIFT);
|
|
rect.setAttribute("height", CELL);
|
|
rect.setAttribute("width", CELL);
|
|
rect.setAttribute("fill", getColor(count));
|
|
rect.setAttribute("rx", 2);
|
|
rect.setAttribute("data-date", key);
|
|
rect.setAttribute("data-count", count);
|
|
|
|
svg.appendChild(rect);
|
|
});
|
|
});
|
|
return svg;
|
|
}
|
|
|
|
export function setupTooltips(svg) {
|
|
const tooltip = document.getElementById("tooltip");
|
|
|
|
svg.addEventListener("mouseover", (e) => {
|
|
if (e.target.tagName != "rect") return;
|
|
const date = e.target.dataset.date;
|
|
const count = e.target.dataset.count;
|
|
|
|
tooltip.textContent = `${date} - ${count} commit${count == 1 ? "" : "s"}`;
|
|
tooltip.classList.remove("hidden");
|
|
});
|
|
|
|
svg.addEventListener("mousemove", (e) => {
|
|
tooltip.style.left = e.pageX + 12 + "px";
|
|
tooltip.style.top = e.pageY - 28 + "px";
|
|
});
|
|
|
|
svg.addEventListener("mouseout", (e) => {
|
|
if (e.target.tagName === "rect") tooltip.classList.add("hidden");
|
|
});
|
|
}
|