4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T9e0,"use client"; import { ContributionGraph, ContributionGraphBlock, ContributionGraphCalendar, ContributionGraphFooter, ContributionGraphTotalCount, } from "@/components/kibo-ui/contribution-graph"; export const title = "Full-year contribution graph"; const formatDate = (date: Date) => { const y = date.getFullYear(); const m = String(date.getMonth() + 1).padStart(2, "0"); const d = String(date.getDate()).padStart(2, "0"); return `${y}-${m}-${d}`; }; /** Deterministic PRNG so the graph stays stable across SSR/hydration. */ const mulberry32 = (seed: number) => { let a = seed; return () => { a |= 0; a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }; const levelFromNoise = (n: number): 0 | 1 | 2 | 3 | 4 => { if (n < 0.42) return 0; if (n < 0.64) return 1; if (n < 0.82) return 2; if (n < 0.93) return 3; return 4; }; const DAYS = 365; const buildData = () => { const rand = mulberry32(0x2026_cafe); const data: { date: string; count: number; level: 0 | 1 | 2 | 3 | 4 }[] = []; let streakLeft = 0; let streakLevel: 0 | 1 | 2 | 3 | 4 = 0; for (let i = 0; i < DAYS; i++) { const date = new Date(); date.setHours(12, 0, 0, 0); date.setDate(date.getDate() - (DAYS - 1 - i)); if (streakLeft === 0 && rand() < 0.1) { streakLeft = 2 + Math.floor(rand() * 4); streakLevel = (2 + Math.floor(rand() * 3)) as 2 | 3 | 4; } let level = levelFromNoise(rand()); if (streakLeft > 0) { level = Math.max(level, streakLevel) as 0 | 1 | 2 | 3 | 4; streakLeft -= 1; } if (rand() < 0.1) level = 0; data.push({ date: formatDate(date), count: level === 0 ? 0 : level + Math.floor(rand() * 4), level, }); } return data; }; const data = buildData(); const Example = () => ( {({ activity, dayIndex, weekIndex }) => ( )} ); export default Example; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["https://www.kibo-ui.com/r/contribution-graph.json"]}]]}],["$","$L50",null,{"sourceUrl":"https://shadcnblocks.com/r/contribution-graph-contribution-graph-standard-1.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/contribution-graph-contribution-graph-standard-1","itemId":"@shadcnblocks/contribution-graph-contribution-graph-standard-1"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"example/contribution-graph/contribution-graph-standard-1.tsx","content":"$52","type":"registry:block"}]}]]}],"$L53"]}]

Contribution Graph Standard 1 Full Year Contribution Graph

Installation

Files

components

Styles