'use client'; import { motion, useReducedMotion } from 'motion/react'; import { useMemo, useState } from 'react'; export interface ContributionData { date: string; count: number; level: number; } export interface ContributionGraphProps { data?: ContributionData[]; year?: number; className?: string; showLegend?: boolean; showTooltips?: boolean; } const WEEKS = 53; const DAYS = 7; const MONTHS = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ]; const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const COLORS = [ 'bg-muted', 'bg-primary/20', 'bg-primary/40', 'bg-primary/70', 'bg-primary', ]; const CELL_SIZE = 'clamp(10px, 1.1vw, 14px)'; const TOOLTIP_OFFSET = { x: 12, y: 36 }; export default function ContributionGraph({ data = [], year = new Date().getFullYear(), className = '', showLegend = true, showTooltips = true, }: ContributionGraphProps) { const reduceMotion = useReducedMotion(); const [hovered, setHovered] = useState(null); const [pos, setPos] = useState({ x: 0, y: 0 }); const days = useMemo(() => { const start = new Date(year, 0, 1); const end = new Date(year, 11, 31); const firstSunday = new Date(start); firstSunday.setDate(start.getDate() - start.getDay()); const result: ContributionData[] = []; for (let w = 0; w < WEEKS; w++) { for (let d = 0; d < DAYS; d++) { const date = new Date(firstSunday); date.setDate(firstSunday.getDate() + w * DAYS + d); if (date >= start && date <= end) { const iso = date.toISOString().split('T')[0]; const found = data.find((x) => x.date === iso); result.push({ date: iso, count: found?.count ?? 0, level: found?.level ?? 0, }); } else { result.push({ date: '', count: 0, level: 0 }); } } } return result; }, [data, year]); const monthHeaders = useMemo(() => { const headers: { label: string; span: number }[] = []; let lastMonth = -1; let span = 0; for (let w = 0; w < WEEKS; w++) { const d = new Date(year, 0, 1); d.setDate(d.getDate() - d.getDay() + w * 7); const month = d.getMonth(); if (month !== lastMonth) { if (span > 0) headers.push({ label: MONTHS[lastMonth], span }); lastMonth = month; span = 1; } else span++; } if (span > 0) headers.push({ label: MONTHS[lastMonth], span }); return headers; }, [year]); return (

))} {Array.from({ length: DAYS }).map((_, day) => ( {Array.from({ length: WEEKS }).map((_, w) => { const cell = days[w * DAYS + day]; if (!cell.date) return ); })} ))}

{monthHeaders.map((m, i) => (	{m.label}
{day % 2 === 0 && WEEKDAYS[day]}	; return (	{ if (!showTooltips) return; setHovered(cell); setPos({ x: e.clientX, y: e.clientY }); }} onMouseLeave={() => setHovered(null)} className="cursor-pointer" >

{showTooltips && hovered && (

{hovered.count} contribution{hovered.count !== 1 && 's'}

{new Date(hovered.date).toDateString()}

)} {showLegend && (

Less

{COLORS.map((c, i) => (

))}

)}

); }

	Dec	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
Sun

Tue

Thu

Sat

Contribution Graph

Installation

Usage