"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; export type HeatmapProps = { /** Map of ISO date (YYYY-MM-DD) to count. */ values: Record; /** Last day shown. Defaults to today. */ endDate?: Date; weeks?: number; /** Text for the tooltip, e.g. (n) => `${n} commits`. */ label?: (count: number, date: Date) => string; className?: string; }; const iso = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; /** GitHub-style contribution calendar. */ export function Heatmap({ values, endDate, weeks = 26, label = (n) => `${n} contributions`, className }: HeatmapProps) { const [hover, setHover] = React.useState<{ text: string; x: number; y: number } | null>(null); const ref = React.useRef(null); const end = React.useMemo(() => { const d = endDate ? new Date(endDate) : new Date(); d.setHours(0, 0, 0, 0); return d; }, [endDate]); const start = new Date(end); start.setDate(end.getDate() - end.getDay() - (weeks - 1) * 7); const max = Math.max(1, ...Object.values(values)); const level = (n: number) => (n === 0 ? 0 : Math.min(4, Math.ceil((n / max) * 4))); const shades = ["var(--kn-surface-raised)", "color-mix(in oklab, var(--kn-accent) 30%, var(--kn-surface-raised))", "color-mix(in oklab, var(--kn-accent) 55%, var(--kn-surface-raised))", "color-mix(in oklab, var(--kn-accent) 78%, var(--kn-surface-raised))", "var(--kn-accent)"]; const cols = Array.from({ length: weeks }, (_, w) => Array.from({ length: 7 }, (_, d) => { const date = new Date(start); date.setDate(start.getDate() + w * 7 + d); return date; }), ); return (

setHover(null)}>

{cols.map((c, i) => ( {c[0]!.getDate() <= 7 ? months[c[0]!.getMonth()] : ""} ))}

{["", "Mon", "", "Wed", "", "Fri", ""].map((d, i) => ( {d} ))}

{cols.map((c, w) => (

{c.map((date) => { if (date > end) return ; const n = values[iso(date)] ?? 0; return ( { const r = e.currentTarget.getBoundingClientRect(); const p = ref.current!.getBoundingClientRect(); setHover({ text: `${label(n, date)} · ${date.toLocaleDateString(undefined, { month: "short", day: "numeric" })}`, x: r.left - p.left + 6, y: r.top - p.top }); }} /> ); })}

))}

Less {shades.map((s) => ( ))} More

{hover ? ( {hover.text} ) : null}

); }

Heatmap

Installation

Exports