` with CSS Grid layout. Renders `gridTemplateColumns` and `gridTemplateRows` based on the computed data. Accepts all standard div props.
Iterates over cells internally, calling the children render function for each cell. Each cell is wrapped in a context that `Cell` reads from.
```
type CellData = {
date: Date;
count: number;
level: number;
column: number;
row: number;
};
```
### 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
Iterates over month labels, calling the children render function for each label.
```
{({ label, totalWeeks }) => (
{HeatGraph.MONTH_SHORT[label.month]}
)}
```
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
Iterates over day-of-week labels, calling the children render function for each label.
```
{({ 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
Iterates over legend levels, calling the children render function for each item. Each item has `{ level: number, color: string | undefined }`.
### LegendLevel
A `
` that reads from legend item context. Automatically applies `backgroundColor` from the color scale. Use inside `Legend`.
### 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.).
```
{({ cell }) => {cell.count} contributions
}
```
### autoLevels(n)
Default classification function. Maps counts into `n` evenly-distributed levels (0 to n-1). Level 0 is always count 0.
```
type ClassifyFn = (counts: number[]) => (count: number) => number;
```
To provide a custom classifier:
```
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
English month abbreviations array: `["Jan", "Feb", ..., "Dec"]`. Index by `MonthLabel.month`.
### DAY\_SHORT
English day abbreviations array: `["Sun", "Mon", ..., "Sat"]`. Index by `DayLabel.dayOfWeek`.