react-time-heatmap

Show a heatmap based on the time of day for several days

Usage no npm install needed!

<script type="module">
  import reactTimeHeatmap from 'https://cdn.skypack.dev/react-time-heatmap';
</script>

README

react-time-heatmap

Netlify Status

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)

Entries example

✔ 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
Base example Custom nr. groups Show counts

Flow enabled, responsive

Show counts

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