{/* Pinned, so the weekdays stay readable when a narrow screen scrolls the weeks. */} {model.rowLabels[r]} {row.map((cell, c) => cell ? (

1 ? "" : undefined} style={{ "--nk-a": (0.16 + (0.84 * (cell.level - 1)) / Math.max(1, levels - 1)).toFixed(3) } as React.CSSProperties} className={cn("nk-heat-cell aspect-square outline-none", selectable && "cursor-pointer")} /> ) : (

), )}

))} ), [model, levels, tabStop, selected, selectable], ); const tipCell = tip ? model.byKey.get(tip.key) : undefined; return (

markScrolled(event.currentTarget)} className="-m-1 min-w-0 overflow-x-auto p-1 [scrollbar-color:rgb(255_255_255/0.15)_transparent] [scrollbar-width:thin]">

{ const element = cellKey(event); const key = element?.dataset.key; if (key && key !== tip?.key) setTip({ key, element }); }} onPointerLeave={(event) => { // Back to the focused cell's tooltip, if a cell has focus. const focused = document.activeElement as HTMLElement | null; const key = focused?.dataset.key; setTip(key && event.currentTarget.contains(focused) ? { key, element: focused } : null); }} onFocus={(event) => { const element = cellKey(event); const key = element?.dataset.key; if (!key || !element) return; setActive(key); setTip({ key, element }); }} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node)) setTip(null); }} onClick={(event) => { const key = cellKey(event)?.dataset.key; if (key && selectable) select(key); }} onKeyDown={move} style={{ gridTemplateColumns: `auto repeat(${model.colCount}, minmax(${minCell}px, ${cellSize}px))`, gap, minWidth: `calc(${model.calendar ? 30 : 48}px + ${model.colCount} * ${minCell + gap}px)`, }} className="grid w-full justify-start" > {grid}

{(legend || footer) && (

{footer}

{legend && (

{legendLabels[0]} {Array.from({ length: levels + 1 }, (_, level) => ( ))} {legendLabels[1]}

)}

)} {isClient && tip && tipCell && }

); }); Heatmap.displayName = "Heatmap"; /** * Backs the pinned labels only once cells can pass under them, written straight to the DOM so scrolling never * re-renders the grid. */ function markScrolled(scroller: HTMLElement) { if (Math.abs(scroller.scrollLeft) > 1) scroller.dataset.scrolled = ""; else delete scroller.dataset.scrolled; } function strip(cell: ModelCell | undefined): HeatmapCell | null { if (!cell) return null; const { key, value, level, date, row, column } = cell; return { key, value, level, ...(date ? { date } : null), ...(row !== undefined ? { row, column } : null) }; } function firstCell(model: Model) { for (let c = 0; c < model.colCount; c++) for (let r = 0; r < model.rowCount; r++) if (model.cells[r][c]) return model.cells[r][c]; return null; } function lastCell(model: Model) { for (let c = model.colCount - 1; c >= 0; c--) for (let r = model.rowCount - 1; r >= 0; r--) if (model.cells[r][c]) return model.cells[r][c]; return null; } /** One tooltip for the whole grid, portaled so a scrolling or clipped parent can't cut it off. */ function HeatTip({ element, cell }: { element: HTMLElement; cell: NonNullable }) { const ref = React.useRef(null); useIsomorphicLayoutEffect(() => { const tip = ref.current; if (!tip) return; // A portal leaves the grid's subtree, so carry its color across. const neon = getComputedStyle(element).getPropertyValue("--neon").trim(); if (neon) tip.style.setProperty("--neon", neon); const place = () => { const rect = element.getBoundingClientRect(); const width = tip.offsetWidth; const left = Math.min(Math.max(rect.left + rect.width / 2 - width / 2, 8), window.innerWidth - width - 8); const above = rect.top - tip.offsetHeight - 8 >= 4; tip.style.transform = `translate3d(${Math.round(left)}px, ${Math.round(above ? rect.top - tip.offsetHeight - 8 : rect.bottom + 8)}px, 0)`; tip.dataset.side = above ? "top" : "bottom"; }; place(); window.addEventListener("scroll", place, true); window.addEventListener("resize", place); return () => { window.removeEventListener("scroll", place, true); window.removeEventListener("resize", place); }; }, [element, cell]); return createPortal(

{cell.text} {cell.label}

, document.body, ); } export { Heatmap }; ```