Overview
AvailabilityHeatmap displays activity patterns across a week in a grid format. Rows represent days of the week, columns represent hours, and color intensity shows activity level. Perfect for identifying peak engagement times and user availability patterns.
Features
- 7x24 grid for full week coverage
- Color intensity based on activity level
- Configurable week start (Sunday or Monday)
- Optional business hours only mode
- Click handler for drill-down
- Multiple color scales
Examples
Basic AvailabilityHeatmap
Full week activity pattern
12a
3a
6a
9a
12p
3p
6p
9p
Sun
Mon
Tue
Wed
Thu
Fri
Sat
LessMore
With Labels
Showing day and hour labels
12a
3a
6a
9a
12p
3p
6p
9p
Sun
Mon
Tue
Wed
Thu
Fri
Sat
LessMore
Business Hours Only
Limited to 6am-10pm
9a
12p
3p
6p
Sun
Mon
Tue
Wed
Thu
Fri
Sat
LessMore
Color Scale Variants
Color scale options
Blue
9a
12p
3p
6p
Sun
Mon
Tue
Wed
Thu
Fri
Sat
LessMore
With ChartCard
Wrapped in ChartCard
Survey Response Activity
When participants submit responses
9a
12p
3p
6p
Sun
Mon
Tue
Wed
Thu
Fri
Sat
LessMore
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | AvailabilityDataPoint[] | required | Array of {day, hour, value} objects |
weekStartsOn | 0 | 1 | 0 | Week start day (0=Sunday, 1=Monday) |
colorScale | 'green' | 'blue' | 'purple' | 'green' | Color scale for cells |
showLabels | boolean | false | Show day and hour labels |
businessHoursOnly | boolean | false | Show only 6am-10pm hours |
onCellClick | (day, hour, value) => void | - | Click handler for cells |
className | string | - | Additional CSS classes |
Usage
import { AvailabilityHeatmap, ChartCard } from '@/ui/components/charts';
// Activity by hour and day
<ChartCard title="Response Activity">
<AvailabilityHeatmap
data={[
{ day: 0, hour: 9, value: 15 },
{ day: 0, hour: 10, value: 32 },
{ day: 1, hour: 9, value: 28 },
// More data points...
]}
showLabels
onCellClick={(day, hour, value) =>
console.log(`Day ${day}, Hour ${hour}: ${value}`)
}
/>
</ChartCard>