52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T29ce,'use client' import type { ComponentPropsWithoutRef, KeyboardEvent } from 'react' import { cn } from '@/lib/utils' export type ContributionDay = { date: string count: number level: 0 | 1 | 2 | 3 | 4 } export type ContributionInputDay = Omit & { level?: ContributionDay['level'] } export type ContributionGraphData = { days: readonly ContributionInputDay[] total?: number from?: string to?: string source?: string } export type NormalizedContributionGraphData = { days: readonly ContributionDay[] total: number from: string to: string source?: string } export type ContributionGraphProps = Omit, 'children'> & { data: ContributionGraphData title?: string description?: string showHeader?: boolean emptyMessage?: string } const levelClassNames = [ 'bg-muted/55', 'bg-foreground/20', 'bg-foreground/40', 'bg-foreground/65', 'bg-foreground', ] as const const dateFormatter = new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC', }) const monthFormatter = new Intl.DateTimeFormat('en', { month: 'short', timeZone: 'UTC', }) function formatDate(date: string) { return dateFormatter.format(new Date(`${date}T00:00:00Z`)) } function toDateString(timestamp: number) { return new Date(timestamp).toISOString().slice(0, 10) } function getDerivedLevel(count: number, maximum: number): ContributionDay['level'] { if (count <= 0) return 0 return Math.min(4, Math.max(1, Math.ceil((count / Math.max(maximum, 1)) * 4))) as 1 | 2 | 3 | 4 } /** * Turns provider data shaped as `{ date, count }` into a complete daily calendar. * Missing dates are filled with zeroes and intensity levels are derived when omitted. */ export function createContributionGraphData( inputDays: readonly ContributionInputDay[], options: { source?: string } = {}, ): NormalizedContributionGraphData { const countsByDate = new Map() for (const day of inputDays) { if (!/^\d{4}-\d{2}-\d{2}$/.test(day.date) || !Number.isFinite(day.count)) continue const previous = countsByDate.get(day.date) const count = Math.max(0, Math.round(day.count)) + (previous?.count ?? 0) countsByDate.set(day.date, { date: day.date, count, level: day.level === undefined && previous?.level === undefined ? undefined : (Math.max(day.level ?? 0, previous?.level ?? 0) as ContributionDay['level']), }) } const dates = [...countsByDate.keys()].sort() if (dates.length === 0) { return { days: [], total: 0, from: '', to: '', ...options } } const from = dates[0] const to = dates.at(-1) ?? from const fromTimestamp = Date.parse(`${from}T00:00:00Z`) const toTimestamp = Date.parse(`${to}T00:00:00Z`) const maximum = Math.max(...[...countsByDate.values()].map((day) => day.count), 1) const days: ContributionDay[] = [] for (let timestamp = fromTimestamp; timestamp <= toTimestamp; timestamp += 86_400_000) { const date = toDateString(timestamp) const input = countsByDate.get(date) const count = input?.count ?? 0 days.push({ date, count, level: input?.level ?? getDerivedLevel(count, maximum), }) } return { days, total: days.reduce((total, day) => total + day.count, 0), from, to, ...options, } } function getMonthLabels(days: readonly ContributionDay[]) { return days.reduce>((labels, day, index) => { const key = day.date.slice(0, 7) if (labels.at(-1)?.key === key) return labels const nextLabel = { key, label: monthFormatter.format(new Date(`${day.date}T00:00:00Z`)), week: Math.floor(index / 7), } if (labels.at(-1)?.week === nextLabel.week) { labels[labels.length - 1] = nextLabel } else { labels.push(nextLabel) } return labels }, []) } function handleDayKeyDown( event: KeyboardEvent, index: number, dayCount: number, ) { const movementByKey: Partial> = { ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7, ArrowUp: -1, End: dayCount - 1 - index, Home: -index, } const movement = movementByKey[event.key] if (movement === undefined) return event.preventDefault() const nextIndex = Math.min(dayCount - 1, Math.max(0, index + movement)) const grid = event.currentTarget.closest('[data-contribution-grid]') const nextDay = grid?.querySelector(`[data-contribution-day="${nextIndex}"]`) if (!nextDay) return grid?.querySelector('[tabindex="0"]')?.setAttribute('tabindex', '-1') nextDay.tabIndex = 0 nextDay.focus() } export function ContributionGraph({ data, title = 'Contribution activity', description, showHeader = true, emptyMessage = 'No contribution data is available for this period.', className, ...props }: ContributionGraphProps) { const normalizedData = createContributionGraphData(data.days, { source: data.source }) const graphData: NormalizedContributionGraphData = { ...normalizedData, total: data.total ?? normalizedData.total, from: data.from ?? normalizedData.from, to: data.to ?? normalizedData.to, } const summary = graphData.days.length > 0 ? `${graphData.total.toLocaleString()} contributions from ${formatDate(graphData.from)} to ${formatDate(graphData.to)}.` : '' const monthLabels = getMonthLabels(graphData.days) const weekCount = Math.ceil(graphData.days.length / 7) return (

{graphData.days.length > 0 ? ( <> {showHeader ? (

{title}

{description ? (

{description}

) : null}

{graphData.total.toLocaleString()}

total contributions

) : (

{summary}

)}

{formatDate(graphData.from)}–{formatDate(graphData.to)} {graphData.source ? ` · ${graphData.source}` : ''} . {summary}

Less {levelClassNames.map((levelClassName, level) => ( ))} More

) : ( <>

{title}

{description ? (

{description}

) : null}

{emptyMessage}

)} ) } export default ContributionGraph 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"src/registry/components/contribution-graph/contribution-graph.tsx","content":"$53","type":"registry:ui","target":"@components/contribution-graph.tsx"}],"className":"h-[70svh] min-h-80"}]]}]