react-time-heatmap v0.1.4
react-time-heatmap
Show a heatmap based on the time of day for several days
š Demo: https://react-time-heatmap.netlify.app/
The component takes time entries and displays the count as a heatmap.
ā add entries for an unlimited number of days
ā select the number of groups/levels to show in colours (light blue to dark blue)
ā can be made to flow and use all the space it has, responsively
ā has no dependencies
Install
npm i --save react-time-heatmap
Import
import { ITimeEntry, TimeHeatMap } from "react-time-heatmap";Examples
Shows entries
<TimeHeatMap timeEntries={entries} />Shows entries into a custom number of groups
<TimeHeatMap timeEntries={entries} numberOfGroups={7} />Shows count for every hour (use for debugging)
<TimeHeatMap timeEntries={entries} showCounts={true} />Available options
| Option | Required | Description | Default value |
|---|---|---|---|
| timeEntries | yes | array of entries, needs to have 24 entries per day | [] |
| numberOfGroups | no | the number of groups to split the colours into | 4 |
| flow | no | allow the component to take the full width of its container | false |
| textForNoTimeEntries | no | custom text to show when there are no entries loaded | "No time entries" |
| showCounts | no | shows the counts for every hour, for testing | false |
| showGroups | no | shows the groups under the heat map | true |
| showHours | no | shows the hours | true |
Entries example, 7 days or 168 hours with counts between 0 and 1000 (image shortened)
ā hours, minutes or time zone are not relevant
ā time needs to be a valid date
ā the entries will be sorted by the component (left to right, past to present)
š typescript will make sure you type everything right
Examples
| Base example (7 days) | Custom nr. groups (10 days) | Show counts |
|---|---|---|
 |  |  |
Flow enabled, responsive
About
- made with React Hooks
- uses CSS Grid to create the arrangement
- styles applied with sass modules
- the animations in the images are just an example, the component will rerender only when new entries are passed
- support by any browser that supports grids (not IE)
Checkout more of me and my work at https://projectsbydan.com