{title}

50:I[707087,["/_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"],"RegistryDependencies"] 51: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"] 52:T2f09,// Credit: https://www.kibo-ui.com/components/contribution-graph "use client" import { createContext, Fragment, useContext, useMemo, type CSSProperties, type HTMLAttributes, type ReactNode, } from "react" import type { Day as WeekDay } from "date-fns" import { differenceInCalendarDays, eachDayOfInterval, formatISO, getDay, getMonth, getYear, nextDay, parseISO, subWeeks, } from "date-fns" import { cn } from "@/lib/utils" export type Activity = { date: string count: number level: number } type Week = Array export type Labels = { months?: string[] weekdays?: string[] totalCount?: string legend?: { less?: string more?: string } } type MonthLabel = { weekIndex: number label: string } const DEFAULT_MONTH_LABELS = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ] const DEFAULT_LABELS: Labels = { months: DEFAULT_MONTH_LABELS, weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], totalCount: "{{count}} activities in {{year}}", legend: { less: "Less", more: "More", }, } const THEME = cn( 'data-[level="0"]:fill-muted-foreground/5', 'data-[level="1"]:fill-muted-foreground/20', 'data-[level="2"]:fill-muted-foreground/40', 'data-[level="3"]:fill-muted-foreground/60', 'data-[level="4"]:fill-muted-foreground/80' ) type ContributionGraphContextType = { data: Activity[] weeks: Week[] blockMargin: number blockRadius: number blockSize: number fontSize: number labels: Labels labelHeight: number maxLevel: number totalCount: number weekStart: WeekDay year: number width: number height: number } const ContributionGraphContext = createContext(null) const useContributionGraph = () => { const context = useContext(ContributionGraphContext) if (!context) { throw new Error( "ContributionGraph components must be used within a ContributionGraph" ) } return context } const fillHoles = (activities: Activity[]): Activity[] => { if (activities.length === 0) { return [] } // Sort activities by date to ensure correct date range const sortedActivities = [...activities].sort((a, b) => a.date.localeCompare(b.date) ) const calendar = new Map(activities.map((a) => [a.date, a])) const firstActivity = sortedActivities[0] as Activity const lastActivity = sortedActivities.at(-1) if (!lastActivity) { return [] } return eachDayOfInterval({ start: parseISO(firstActivity.date), end: parseISO(lastActivity.date), }).map((day) => { const date = formatISO(day, { representation: "date" }) if (calendar.has(date)) { return calendar.get(date) as Activity } return { date, count: 0, level: 0, } }) } const groupByWeeks = ( activities: Activity[], weekStart: WeekDay = 0 ): Week[] => { if (activities.length === 0) { return [] } const normalizedActivities = fillHoles(activities) const firstActivity = normalizedActivities[0] as Activity const firstDate = parseISO(firstActivity.date) const firstCalendarDate = getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1) const paddedActivities = [ ...(new Array(differenceInCalendarDays(firstDate, firstCalendarDate)).fill( undefined ) as Activity[]), ...normalizedActivities, ] const numberOfWeeks = Math.ceil(paddedActivities.length / 7) return new Array(numberOfWeeks) .fill(undefined) .map((_, weekIndex) => paddedActivities.slice(weekIndex * 7, weekIndex * 7 + 7) ) } const getMonthLabels = ( weeks: Week[], monthNames: string[] = DEFAULT_MONTH_LABELS ): MonthLabel[] => { return weeks .reduce((labels, week, weekIndex) => { const firstActivity = week.find((activity) => activity !== undefined) if (!firstActivity) { throw new Error( `Unexpected error: Week ${weekIndex + 1} is empty: [${week}].` ) } const month = monthNames[getMonth(parseISO(firstActivity.date))] if (!month) { const monthName = new Date(firstActivity.date).toLocaleString("en-US", { month: "short", }) throw new Error( `Unexpected error: undefined month label for ${monthName}.` ) } const prevLabel = labels.at(-1) if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) { return labels.concat({ weekIndex, label: month }) } return labels }, []) .filter(({ weekIndex }, index, labels) => { const minWeeks = 3 if (index === 0) { return labels[1] && labels[1].weekIndex - weekIndex >= minWeeks } if (index === labels.length - 1) { return weeks.slice(weekIndex).length >= minWeeks } return true }) } export type ContributionGraphProps = HTMLAttributes & { data: Activity[] blockMargin?: number blockRadius?: number blockSize?: number fontSize?: number labels?: Labels maxLevel?: number style?: CSSProperties totalCount?: number weekStart?: WeekDay children: ReactNode className?: string } export const ContributionGraph = ({ data, blockMargin = 4, blockRadius = 2, blockSize = 12, fontSize = 14, labels: labelsProp = undefined, maxLevel: maxLevelProp = 4, style = {}, totalCount: totalCountProp = undefined, weekStart = 0, className, ...props }: ContributionGraphProps) => { const maxLevel = Math.max(1, maxLevelProp) const weeks = useMemo(() => groupByWeeks(data, weekStart), [data, weekStart]) const LABEL_MARGIN = 8 const labels = { ...DEFAULT_LABELS, ...labelsProp } const labelHeight = fontSize + LABEL_MARGIN const year = data.length > 0 ? getYear(parseISO(data[0].date)) : new Date().getFullYear() const totalCount = typeof totalCountProp === "number" ? totalCountProp : data.reduce((sum, activity) => sum + activity.count, 0) const width = weeks.length * (blockSize + blockMargin) - blockMargin const height = labelHeight + (blockSize + blockMargin) * 7 - blockMargin if (data.length === 0) { return null } return (

) } export type ContributionGraphBlockProps = HTMLAttributes & { activity: Activity dayIndex: number weekIndex: number } export const ContributionGraphBlock = ({ activity, dayIndex, weekIndex, className, ...props }: ContributionGraphBlockProps) => { const { blockSize, blockMargin, blockRadius, labelHeight, maxLevel } = useContributionGraph() if (activity.level < 0 || activity.level > maxLevel) { throw new RangeError( `Provided activity level ${activity.level} for ${activity.date} is out of range. It must be between 0 and ${maxLevel}.` ) } return ( ) } export type ContributionGraphCalendarProps = Omit< HTMLAttributes, "children" > & { hideMonthLabels?: boolean className?: string children: (props: { activity: Activity dayIndex: number weekIndex: number }) => ReactNode } export const ContributionGraphCalendar = ({ title = "Contribution Graph", hideMonthLabels = false, className, children, ...props }: ContributionGraphCalendarProps) => { const { weeks, width, height, blockSize, blockMargin, labels } = useContributionGraph() const monthLabels = useMemo( () => getMonthLabels(weeks, labels.months), [weeks, labels.months] ) return (

) } export type ContributionGraphFooterProps = HTMLAttributes export const ContributionGraphFooter = ({ className, ...props }: ContributionGraphFooterProps) => (

) export type ContributionGraphTotalCountProps = Omit< HTMLAttributes, "children" > & { children?: (props: { totalCount: number; year: number }) => ReactNode } export const ContributionGraphTotalCount = ({ className, children, ...props }: ContributionGraphTotalCountProps) => { const { totalCount, year, labels } = useContributionGraph() if (children) { return <>{children({ totalCount, year })} } return (

{labels.totalCount ? labels.totalCount .replace("{{count}}", String(totalCount)) .replace("{{year}}", String(year)) : `${totalCount} activities in ${year}`}

) } export type ContributionGraphLegendProps = Omit< HTMLAttributes, "children" > & { children?: (props: { level: number }) => ReactNode } export const ContributionGraphLegend = ({ className, children, ...props }: ContributionGraphLegendProps) => { const { labels, maxLevel, blockSize, blockRadius, blockMargin } = useContributionGraph() return (

{labels.legend?.less || "Less"} {new Array(maxLevel + 1).fill(undefined).map((_, level) => children ? ( {children({ level })} ) : ( ) )} {labels.legend?.more || "More"}

) } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}]]}],["$","$L50",null,{"namespace":"@ncdai","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/contribution-graph/contribution-graph.tsx","content":"$52","type":"registry:component","target":"@components/contribution-graph.tsx"}],"className":"h-[70svh] min-h-80"}]]}]