` with CSS Grid layout. Renders `gridTemplateColumns` and `gridTemplateRows` based on the computed data. Accepts all standard div props.
Provides a `CellCollection` via render prop. The `.map()` callback receives a `CellData` object and automatically wraps each element in the context needed by `Cell`.
```ts
type CellData = {
date: Date;
count: number;
level: number;
column: number;
row: number;
};
```
Cell \[#cell]
A `
` that reads from cell context. Automatically applies:
* Grid positioning (`gridColumn`, `gridRow`)
* Background color from `colorScale`
* Tooltip hover handlers
Accepts all standard div props. Pass `colorScale` to override the Root-level color scale.
MonthLabels \[#monthlabels]
Render prop component providing month label data.
```tsx
{({ labels, totalWeeks }) =>
labels.map((label) => (
{HeatGraph.MONTH_SHORT[label.month]}
))
}
```
Provides `{ labels, totalWeeks }`. Each label has `{ month: number, column: number }`. Use `totalWeeks` to compute label positions. Use `MONTH_SHORT[label.month]` for English labels, or format with `Intl.DateTimeFormat` for localization.
DayLabels \[#daylabels]
Render prop component providing day-of-week label data.
```tsx
{({ labels }) =>
labels.map((label) => (
{HeatGraph.DAY_SHORT[label.dayOfWeek]}
))
}
```
Each label has `{ dayOfWeek: number, row: number }` where `dayOfWeek` is 0=Sun..6=Sat. Use `DAY_SHORT[label.dayOfWeek]` for English labels, or format with `Intl.DateTimeFormat` for localization.
Legend \[#legend]
Render prop component providing legend items. Each item has `{ level: number, color: string | undefined }`.
LegendLevel \[#legendlevel]
A `
` that reads from legend item context. Automatically applies `backgroundColor` from the color scale. Use inside `Legend`'s `.map()`.
Tooltip \[#tooltip]
Renders only when a cell is hovered. Positioned by Radix Popper relative to the hovered cell. Accepts Radix Popper `Content` props (`side`, `sideOffset`, `align`, etc.).
```tsx
{({ cell }) => {cell.count} contributions
}
```
autoLevels(n) \[#autolevelsn]
Default classification function. Maps counts into `n` evenly-distributed levels (0 to n-1). Level 0 is always count 0.
```ts
type ClassifyFn = (counts: number[]) => (count: number) => number;
```
To provide a custom classifier:
```tsx
const myClassify: HeatGraph.ClassifyFn = (counts) => {
const p75 = percentile(counts, 75);
return (count) => {
if (count === 0) return 0;
if (count < p75 * 0.25) return 1;
if (count < p75 * 0.5) return 2;
if (count < p75) return 3;
return 4;
};
};
```
MONTH\_SHORT \[#month\_short]
English month abbreviations array: `["Jan", "Feb", ..., "Dec"]`. Index by `MonthLabel.month`.
DAY\_SHORT \[#day\_short]
English day abbreviations array: `["Sun", "Mon", ..., "Sat"]`. Index by `DayLabel.dayOfWeek`.