220 lines
7.8 KiB
JavaScript
220 lines
7.8 KiB
JavaScript
// Renders a GitHub-like activity heatmap given a container and data
|
|
// Usage: ActivityHeatmap.render(containerId, data)
|
|
// data: { 'YYYY-MM-DD': count, ... }
|
|
|
|
const ActivityHeatmap = {
|
|
githubColors: [
|
|
'#ebedf0', // 0
|
|
'#9be9a8', // 1
|
|
'#40c463', // 2
|
|
'#30a14e', // 3
|
|
'#216e39' // 4+
|
|
],
|
|
|
|
getColor(count) {
|
|
if (count === 0) return this.githubColors[0];
|
|
if (count === 1) return this.githubColors[1];
|
|
if (count <= 3) return this.githubColors[2];
|
|
if (count <= 6) return this.githubColors[3];
|
|
return this.githubColors[4];
|
|
},
|
|
|
|
render(containerId, data) {
|
|
const container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
container.innerHTML = '';
|
|
|
|
// Build an array of all days in the past year
|
|
const today = new Date();
|
|
const startDate = new Date(today);
|
|
startDate.setFullYear(today.getFullYear() - 1);
|
|
// Always start on Monday
|
|
const dayOfWeek = startDate.getDay(); // 0=Sun, 1=Mon, ..., 6=Sat
|
|
const daysToMonday = (dayOfWeek === 0) ? 1 : (dayOfWeek === 1 ? 0 : 8 - dayOfWeek);
|
|
startDate.setDate(startDate.getDate() + daysToMonday - (dayOfWeek === 0 ? 7 : 0));
|
|
|
|
const days = [];
|
|
let d = new Date(startDate);
|
|
while (d <= today) {
|
|
days.push(new Date(d));
|
|
d.setDate(d.getDate() + 1);
|
|
}
|
|
// Pad at end so last week is always full (7 days)
|
|
while (days.length % 7 !== 0) {
|
|
days.push(null); // null means empty block
|
|
}
|
|
|
|
// Group days into weeks
|
|
const weeks = [];
|
|
for (let i = 0; i < days.length; i += 7) {
|
|
weeks.push(days.slice(i, i + 7));
|
|
}
|
|
|
|
// Set cell size and gap before using them
|
|
const cellSize = 14;
|
|
const cellGap = 3;
|
|
|
|
// Prepare month labels (x-axis), skip the first detected month
|
|
const monthLabels = [];
|
|
let prevMonth = null;
|
|
let isFirstMonth = true;
|
|
weeks.forEach((week, x) => {
|
|
const firstDay = week[0];
|
|
if (firstDay) {
|
|
const month = firstDay.getMonth();
|
|
if (month !== prevMonth) {
|
|
if (!isFirstMonth) {
|
|
monthLabels.push({
|
|
label: firstDay.toLocaleString('default', { month: 'short' }),
|
|
x: x * (cellSize + cellGap)
|
|
});
|
|
} else {
|
|
isFirstMonth = false;
|
|
}
|
|
prevMonth = month;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Prepare weekday labels (y-axis) - y=0 is Monday
|
|
const weekdayLabels = [
|
|
{ label: 'Mon', y: 0 * (cellSize + cellGap) },
|
|
{ label: 'Wed', y: 2 * (cellSize + cellGap) },
|
|
{ label: 'Fri', y: 4 * (cellSize + cellGap) }
|
|
];
|
|
|
|
// Build SVG
|
|
const leftPad = 32; // Space for weekday labels
|
|
const topPad = 18; // Space for month labels
|
|
const width = leftPad + weeks.length * (cellSize + cellGap);
|
|
const height = topPad + 7 * (cellSize + cellGap);
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
svg.setAttribute('width', width);
|
|
svg.setAttribute('height', height);
|
|
svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
|
|
svg.style.display = 'block';
|
|
|
|
// Month labels (top x-axis)
|
|
monthLabels.forEach(({ label, x }) => {
|
|
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
text.setAttribute('x', leftPad + x + cellSize / 2);
|
|
text.setAttribute('y', 12);
|
|
text.setAttribute('text-anchor', 'middle');
|
|
text.setAttribute('font-size', '11');
|
|
text.setAttribute('fill', '#888');
|
|
text.textContent = label;
|
|
svg.appendChild(text);
|
|
});
|
|
|
|
// Weekday labels (left y-axis)
|
|
weekdayLabels.forEach(({ label, y }) => {
|
|
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
text.setAttribute('x', leftPad - 6);
|
|
text.setAttribute('y', topPad + y + cellSize - 3);
|
|
text.setAttribute('text-anchor', 'end');
|
|
text.setAttribute('font-size', '11');
|
|
text.setAttribute('fill', '#888');
|
|
text.textContent = label;
|
|
svg.appendChild(text);
|
|
});
|
|
|
|
// Draw heatmap cells
|
|
// Tooltip: only one in DOM
|
|
let tooltip = document.getElementById('activity-heatmap-tooltip');
|
|
if (!tooltip) {
|
|
tooltip = document.createElement('div');
|
|
tooltip.id = 'activity-heatmap-tooltip';
|
|
Object.assign(tooltip.style, {
|
|
position: 'fixed',
|
|
pointerEvents: 'none',
|
|
background: '#fff',
|
|
color: '#222',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.10)',
|
|
padding: '7px 14px',
|
|
fontSize: '13px',
|
|
fontFamily: 'system-ui, sans-serif',
|
|
visibility: 'hidden',
|
|
zIndex: 1000,
|
|
opacity: 0,
|
|
transition: 'opacity 0.15s',
|
|
});
|
|
document.body.appendChild(tooltip);
|
|
}
|
|
|
|
// Batch SVG elements for performance
|
|
const frag = document.createDocumentFragment();
|
|
|
|
weeks.forEach((week, x) => {
|
|
week.forEach((date, y) => {
|
|
if (!date) {
|
|
// Draw empty block
|
|
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
rect.setAttribute('x', leftPad + x * (cellSize + cellGap));
|
|
rect.setAttribute('y', topPad + y * (cellSize + cellGap));
|
|
rect.setAttribute('width', cellSize);
|
|
rect.setAttribute('height', cellSize);
|
|
rect.setAttribute('fill', '#fff');
|
|
rect.setAttribute('rx', 3);
|
|
rect.setAttribute('ry', 3);
|
|
frag.appendChild(rect);
|
|
return;
|
|
}
|
|
const iso = date.toISOString().slice(0, 10);
|
|
const count = data[iso] || 0;
|
|
const color = ActivityHeatmap.getColor(count);
|
|
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
rect.setAttribute('x', leftPad + x * (cellSize + cellGap));
|
|
rect.setAttribute('y', topPad + y * (cellSize + cellGap));
|
|
rect.setAttribute('width', cellSize);
|
|
rect.setAttribute('height', cellSize);
|
|
rect.setAttribute('fill', color);
|
|
rect.setAttribute('rx', 3);
|
|
rect.setAttribute('ry', 3);
|
|
rect.setAttribute('data-date', iso);
|
|
rect.setAttribute('data-count', count);
|
|
rect.setAttribute('tabindex', '0');
|
|
rect.setAttribute('aria-label', `${count} play${count === 1 ? '' : 's'} on ${date.toLocaleDateString(undefined, {weekday:'long', year:'numeric', month:'short', day:'numeric'})}`);
|
|
rect.style.cursor = 'pointer';
|
|
rect.removeAttribute('title');
|
|
|
|
// Tooltip logic
|
|
const showTooltip = (e) => {
|
|
tooltip.style.visibility = 'visible';
|
|
tooltip.style.opacity = '1';
|
|
const weekday = date.toLocaleDateString(undefined, { weekday: 'short' });
|
|
tooltip.innerHTML = `<strong>${count}</strong> play${count === 1 ? '' : 's'}<br><span style='color:#666;'>${weekday}, ${iso}</span>`;
|
|
};
|
|
let rafId;
|
|
const moveTooltip = (e) => {
|
|
if (rafId) cancelAnimationFrame(rafId);
|
|
rafId = requestAnimationFrame(() => {
|
|
const pad = 12;
|
|
let x = e.clientX + pad;
|
|
let y = e.clientY + pad;
|
|
if (x + tooltip.offsetWidth > window.innerWidth) x = window.innerWidth - tooltip.offsetWidth - pad;
|
|
if (y + tooltip.offsetHeight > window.innerHeight) y = window.innerHeight - tooltip.offsetHeight - pad;
|
|
tooltip.style.left = x + 'px';
|
|
tooltip.style.top = y + 'px';
|
|
});
|
|
};
|
|
const hideTooltip = () => {
|
|
tooltip.style.visibility = 'hidden';
|
|
tooltip.style.opacity = '0';
|
|
};
|
|
rect.addEventListener('mouseenter', showTooltip);
|
|
rect.addEventListener('mousemove', moveTooltip);
|
|
rect.addEventListener('mouseleave', hideTooltip);
|
|
// Keyboard accessibility
|
|
rect.addEventListener('focus', showTooltip);
|
|
rect.addEventListener('blur', hideTooltip);
|
|
frag.appendChild(rect);
|
|
});
|
|
});
|
|
svg.appendChild(frag);
|
|
container.appendChild(svg);
|
|
}
|
|
};
|
|
|
|
window.ActivityHeatmap = ActivityHeatmap;
|