52: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"] 53: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"] 54:T19d1,import * as React from "react"; import { cn } from "@/lib/utils"; export interface CalendarHeatmapCell { /** yyyy-MM-dd */ date: string; /** activity count for that day (e.g. number of goals checked in) */ count: number; } export interface CalendarHeatmapProps { /** Contiguous daily cells, oldest first (one per day). */ data: CalendarHeatmapCell[]; /** Count that maps to the most intense color. Defaults to the data max * (so a single-goal heatmap reads as on/off). */ maxCount?: number; /** Accessible summary for the whole graphic (role="img"). The app passes a * translated string. */ label?: string; /** Legend end labels (translated by the app). */ lessLabel?: string; moreLabel?: string; /** Localized 3-letter month abbreviations, Jan..Dec (12). Falls back to en. */ monthLabels?: string[]; /** Cell shape: "rounded" (GitHub-style squares, default) or "dot" (circles, * to echo a dot-grid check-in motif). */ shape?: "rounded" | "dot"; className?: string; /** Inline styles for the root element. */ style?: React.CSSProperties; } const CELL = 12; // px const GAP = 3; // px const EN_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const parseYMD = (s: string): Date => { const [y, m, d] = s.split("-").map(Number); return new Date(y, m - 1, d); }; const fmtYMD = (d: Date): string => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; const addDays = (d: Date, n: number): Date => { const r = new Date(d); r.setDate(r.getDate() + n); return r; }; /** Monday-based weekday index: Mon=0 .. Sun=6. */ const mondayIndex = (d: Date): number => (d.getDay() + 6) % 7; const dayDiff = (a: Date, b: Date): number => Math.round((a.getTime() - b.getTime()) / 86_400_000); /** Faint track for empty days; filled days step up the accent. */ function cellColor(count: number, max: number): string { if (count <= 0) return "color-mix(in srgb, var(--color-accent-500) 10%, transparent)"; const ratio = max > 0 ? count / max : 1; const level = Math.min(4, Math.max(1, Math.ceil(ratio * 4))); const pct = [40, 60, 80, 100][level - 1]; return `color-mix(in srgb, var(--color-accent-500) ${pct}%, transparent)`; } /** * A GitHub-contributions-style calendar heatmap. Lays the supplied daily cells * into a Monday-top week grid (columns = weeks), coloring each by its count * against `maxCount`. The grid is fluid: it caps at its natural cell size on wide * screens and shrinks the cells to fit narrower (mobile) containers, so a long * range never overflows or scrolls horizontally. The legend keeps a fixed cell * size. The whole grid is a single `role="img"` with `label` as its description; * per-cell `title`s give sighted hover detail. */ export const CalendarHeatmap = React.forwardRef(function CalendarHeatmap({ data, maxCount, label, lessLabel = "Less", moreLabel = "More", monthLabels = EN_MONTHS, shape = "rounded", className, style, }, ref) { const cellRadius = shape === "dot" ? "50%" : 3; if (data.length === 0) return null; const counts = new Map(data.map((c) => [c.date, c.count])); const firstDate = parseYMD(data[0].date); const lastDate = parseYMD(data[data.length - 1].date); // Pad back to the Monday on/before the first day so each column is a full week. const gridStart = addDays(firstDate, -mondayIndex(firstDate)); const cols = Math.ceil((dayDiff(lastDate, gridStart) + 1) / 7); const max = maxCount ?? Math.max(1, ...data.map((c) => c.count)); const total = data.reduce((s, c) => s + c.count, 0); const ariaLabel = label ?? `Activity heatmap: ${total} check-ins over ${data.length} days`; const cells: React.ReactNode[] = []; const months: { col: number; text: string }[] = []; let prevMonth = -1; for (let col = 0; col < cols; col++) { const colDate = addDays(gridStart, col * 7); const m = colDate.getMonth(); if (m !== prevMonth) { months.push({ col, text: monthLabels[m] ?? EN_MONTHS[m] }); prevMonth = m; } for (let row = 0; row < 7; row++) { const date = addDays(gridStart, col * 7 + row); const key = fmtYMD(date); const count = counts.get(key); const inRange = count !== undefined; cells.push(

, ); } } const mutedText = "text-[var(--color-text-secondary-light)] dark:text-[var(--color-text-secondary-dark)]"; // Desktop cap: the grid never grows past its natural CELL-sized footprint, so // it reads identically to before on wide screens. On narrow (mobile) widths the // 1fr columns shrink the cells to fit the container, so the whole range fits with // no horizontal scroll -- which would otherwise fight the tab-swipe gesture. const gridMaxWidth = cols * CELL + (cols - 1) * GAP; return (

{cells}

); }); CalendarHeatmap.displayName = "CalendarHeatmap"; 51:["$","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":[null,["$","$L52",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/calendar-heatmap.tsx","content":"$54","type":"registry:ui","target":"components/ui/calendar-heatmap.tsx"}],"className":"h-[70svh] min-h-80"}]]}]