Activity Heatmap
DataGitHub-style yearly activity contribution grid with hover tooltips.
Activity HeatmapData · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Activity Heatmap from @otfdashkit/ui.
Code
// Activity Heatmap — GitHub-style yearly activity contribution grid with hover tooltips.
//
// Install:
// bun add @otfdashkit/ui
import { ActivityHeatmap } from '@otfdashkit/ui'
export function Example() {
return (
<ActivityHeatmap>
{/* your content */}
</ActivityHeatmap>
)
}Props
Props declared in the ActivityHeatmap source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| datarequired | HeatmapDay[] | Daily values for the heatmap | |
| totalrequired | string | number | The big number above the heatmap (e.g. total events) | |
| caption | string | 'Activity' | Caption above the total — e.g. "Activity" |
| cellSize | number | 11 | Cell size in px. Default 11. |
| centered | boolean | true | Center the heatmap horizontally inside its scroll container. Default true. |
| className | string | ||
| colorScale | string[] | Optional 5-step color scale. Defaults to primary opacity ramp. | |
| endDate | Date | Date the heatmap should end on. Defaults to today. | |
| filterValue | string | ||
| filters | FilterOption[] | Optional filter — renders a ToggleGroup at the top right | |
| formatTooltip | (day: HeatmapDay) => string | Tooltip formatter passed to Heatmap | |
| gap | number | 3 | Gap between cells in px. Default 3. |
| onFilterChange | (value: string) => void | ||
| stats | SummaryStat[] | 4 summary stats shown below the heatmap (e.g. Most Active Month / Day / Longest / Current Streak) | |
| weeks | number | 53 | Number of week columns. Default 53. |