Contribution Graph

1'use client'
2 
3import type { ComponentPropsWithoutRef, KeyboardEvent } from 'react'
4 
5import { cn } from '@/lib/utils'
6 
7export type ContributionDay = {
8  date: string
9  count: number
10  level: 0 | 1 | 2 | 3 | 4
11}
12 
13export type ContributionInputDay = Omit<ContributionDay, 'level'> & {
14  level?: ContributionDay['level']
15}
16 
17export type ContributionGraphData = {
18  days: readonly ContributionInputDay[]
19  total?: number
20  from?: string
21  to?: string
22  source?: string
23}
24 
25export type NormalizedContributionGraphData = {
26  days: readonly ContributionDay[]
27  total: number
28  from: string
29  to: string
30  source?: string
31}
32 
33export type ContributionGraphProps = Omit<ComponentPropsWithoutRef<'figure'>, 'children'> & {
34  data: ContributionGraphData
35  title?: string
36  description?: string
37  showHeader?: boolean
38  emptyMessage?: string
39}
40 
41const levelClassNames = [
42  'bg-muted/55',
43  'bg-foreground/20',
44  'bg-foreground/40',
45  'bg-foreground/65',
46  'bg-foreground',
47] as const
48 
49const dateFormatter = new Intl.DateTimeFormat('en', {
50  month: 'short',
51  day: 'numeric',
52  year: 'numeric',
53  timeZone: 'UTC',
54})
55const monthFormatter = new Intl.DateTimeFormat('en', {
56  month: 'short',
57  timeZone: 'UTC',
58})
59 
60function formatDate(date: string) {
61  return dateFormatter.format(new Date(`${date}T00:00:00Z`))
62}
63 
64function toDateString(timestamp: number) {
65  return new Date(timestamp).toISOString().slice(0, 10)
66}
67 
68function getDerivedLevel(count: number, maximum: number): ContributionDay['level'] {
69  if (count <= 0) return 0
70  return Math.min(4, Math.max(1, Math.ceil((count / Math.max(maximum, 1)) * 4))) as 1 | 2 | 3 | 4
71}
72 
73/**
74 * Turns provider data shaped as `{ date, count }` into a complete daily calendar.
75 * Missing dates are filled with zeroes and intensity levels are derived when omitted.
76 */
77export function createContributionGraphData(
78  inputDays: readonly ContributionInputDay[],
79  options: { source?: string } = {},
80): NormalizedContributionGraphData {
81  const countsByDate = new Map<string, ContributionInputDay>()
82 
83  for (const day of inputDays) {
84    if (!/^\d{4}-\d{2}-\d{2}$/.test(day.date) || !Number.isFinite(day.count)) continue
85 
86    const previous = countsByDate.get(day.date)
87    const count = Math.max(0, Math.round(day.count)) + (previous?.count ?? 0)
88    countsByDate.set(day.date, {
89      date: day.date,
90      count,
91      level:
92        day.level === undefined && previous?.level === undefined
93          ? undefined
94// … truncated