contribution-graph

1"use client";
2 
3import type { Day as WeekDay } from "date-fns";
4import {
5  differenceInCalendarDays,
6  eachDayOfInterval,
7  formatISO,
8  getDay,
9  getMonth,
10  getYear,
11  nextDay,
12  parseISO,
13  subWeeks,
14} from "date-fns";
15import {
16  type CSSProperties,
17  createContext,
18  Fragment,
19  type HTMLAttributes,
20  type ReactNode,
21  useContext,
22  useMemo,
23} from "react";
24import { cn } from "@/lib/utils";
25 
26export type Activity = {
27  date: string;
28  count: number;
29  level: number;
30};
31 
32type Week = Array<Activity | undefined>;
33 
34export type Labels = {
35  months?: string[];
36  weekdays?: string[];
37  totalCount?: string;
38  legend?: {
39    less?: string;
40    more?: string;
41  };
42};
43 
44type MonthLabel = {
45  weekIndex: number;
46  label: string;
47};
48 
49const DEFAULT_MONTH_LABELS = [
50  "Jan",
51  "Feb",
52  "Mar",
53  "Apr",
54  "May",
55  "Jun",
56  "Jul",
57  "Aug",
58  "Sep",
59  "Oct",
60  "Nov",
61  "Dec",
62];
63 
64const DEFAULT_LABELS: Labels = {
65  months: DEFAULT_MONTH_LABELS,
66  weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
67  totalCount: "{{count}} activities in {{year}}",
68  legend: {
69    less: "Less",
70    more: "More",
71  },
72};
73 
74type ContributionGraphContextType = {
75  data: Activity[];
76  weeks: Week[];
77  blockMargin: number;
78  blockRadius: number;
79  blockSize: number;
80  fontSize: number;
81  labels: Labels;
82  labelHeight: number;
83  maxLevel: number;
84  totalCount: number;
85  weekStart: WeekDay;
86  year: number;
87  width: number;
88  height: number;
89};
90 
91const ContributionGraphContext =
92  createContext<ContributionGraphContextType | null>(null);
93 
94const useContributionGraph = () => {
95  const context = useContext(ContributionGraphContext);
96 
97  if (!context) {
98    throw new Error(
99      "ContributionGraph components must be used within a ContributionGraph"
100    );
101  }
102 
103  return context;
104};
105 
106const fillHoles = (activities: Activity[]): Activity[] => {
107  if (activities.length === 0) {
108    return [];
109  }
110 
111  // Sort activities by date to ensure correct date range
112  const sortedActivities = [...activities].sort((a, b) =>
113    a.date.localeCompare(b.date)
114  );
115 
116  const calendar = new Map<string, Activity>(
117    activities.map((a) => [a.date, a])
118  );
119 
120  const firstActivity = sortedActivities[0] as Activity;
121  const lastActivity = sortedActivities.at(-1);
122 
123  if (!lastActivity) {
124    return [];
125  }
126 
127  return eachDayOfInterval({
128    start: parseISO(firstActivity.date),
129    end: parseISO(lastActivity.date),
130  }).map((day) => {
131    const date = formatISO(day, { representation: "date" });
132 
133    if (calendar.has(date)) {
134// … truncated