Contribution Graph

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