Contribution Graph

1"use client";
2 
3import { motion, useReducedMotion } from "motion/react";
4import type React from "react";
5import { useMemo, useState } from "react";
6 
7export interface ContributionData {
8  count: number;
9  date: string;
10  level: number;
11}
12 
13export interface ContributionGraphProps {
14  className?: string;
15  data?: ContributionData[];
16  showLegend?: boolean;
17  showTooltips?: boolean;
18  year?: number;
19}
20 
21const WEEKS_IN_YEAR = 53;
22const DAYS_IN_WEEK = 7;
23const JANUARY_MONTH = 0;
24const DECEMBER_MONTH = 11;
25const SUNDAY_DAY = 0;
26const MIN_WEEKS_FOR_DECEMBER_HEADER = 2;
27const TOOLTIP_OFFSET_X = 10;
28const TOOLTIP_OFFSET_Y = 40;
29 
30const MONTHS = [
31  "Jan",
32  "Feb",
33  "Mar",
34  "Apr",
35  "May",
36  "Jun",
37  "Jul",
38  "Aug",
39  "Sep",
40  "Oct",
41  "Nov",
42  "Dec",
43];
44 
45const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
46 
47// Contribution level colors (similar to GitHub's)
48const CONTRIBUTION_COLORS = [
49  "bg-primary", // Level 0 - No contributions
50  "bg-brand/25", // Level 1
51  "bg-brand/50", // Level 2
52  "bg-brand/75", // Level 3
53  "bg-brand", // Level 4 - Max
54];
55 
56const LEVEL_0 = 0;
57const LEVEL_1 = 1;
58const LEVEL_2 = 2;
59const LEVEL_3 = 3;
60const LEVEL_4 = 4;
61const CONTRIBUTION_LEVELS = [LEVEL_0, LEVEL_1, LEVEL_2, LEVEL_3, LEVEL_4];
62const DAY_1 = 1;
63const DAY_31 = 31;
64 
65// Helper function to check if date is in valid range
66const isDateInValidRange = (
67  currentDate: Date,
68  startDate: Date,
69  endDate: Date,
70  targetYear: number
71) => {
72  const isInRange = currentDate >= startDate && currentDate <= endDate;
73  const isPreviousYearDecember =
74    currentDate.getFullYear() === targetYear - 1 &&
75    currentDate.getMonth() === DECEMBER_MONTH;
76  const isNextYearJanuary =
77    currentDate.getFullYear() === targetYear + 1 &&
78    currentDate.getMonth() === JANUARY_MONTH;
79  return isInRange || isPreviousYearDecember || isNextYearJanuary;
80};
81 
82// Helper function to create day data
83const createDayData = (
84  currentDate: Date,
85  contributionData: ContributionData[]
86): ContributionData => {
87  const [dateString] = currentDate.toISOString().split("T");
88  const existingData = contributionData.find((d) => d.date === dateString);
89  return {
90    count: existingData?.count ?? LEVEL_0,
91    date: dateString,
92    level: existingData?.level ?? LEVEL_0,
93  };
94};
95 
96// Helper function to check if month should be shown
97interface MonthHeaderCheck {
98  currentMonth: number;
99  currentYear: number;
100  startDateDay: number;
101  targetYear: number;
102  weekCount: number;
103}
104const shouldShowMonthHeader = ({
105  currentYear,
106// … truncated