shadcn.io is not affiliated with official shadcn/ui
Commit Frequency Heatmap Changelog Block for React
A seven by twelve commit grid with the releases flagged above the weeks, a count in every cell, a keyboard-reachable readout and a sentence worked out from the data.
Installation
Overview
A commit-frequency heatmap for React with Base UI, written for Pulsegrid, a fictional engineering-analytics tool. Twelve weeks of commits sit in a grid of seven days by twelve weeks (weeks are the columns), each cell a solid foreground mix that is darker for more commits, with the count written in it so the shade is never the only signal. A flag row above the columns marks the week each of four releases shipped, and the header's sentence ("N% fewer commits in the weeks after a release") is worked out from the data. Hovering or focusing a day reads it out under the grid. It's built from Guides and a native table, with CSS transitions for the entrance and your theme's tokens for every colour. For analytics dashboards, engineering changelogs and release retrospectives. The commits are example data, generated from a fixed formula.
FAQ
How do I use my own commits and releases?
Replace COUNTS (seven numbers for each of twelve weeks, Monday first) with your data, set START to the Monday the grid begins on, and list your releases in RELEASES with an ISO date and a version. The week of each flag, the shades, the legend and the dip percentage in the header are all worked out from those, so they stay true to the grid.
How is a cell's shade chosen, and is it the only signal?
Five solid mixes of your foreground colour, from none to full strength, picked by the count against the busiest day. Every cell also has its count written in it, and each cell is named for assistive technology ("Wed, Sep 2: 17 commits, the week v4.2.0 shipped"), so the shade never carries the meaning on its own.
Can I use it from a keyboard?
Yes. The grid is one tab stop, and the arrow keys move between days (Home and End jump to the first and last week). Focusing a day reads it out under the grid, like hovering does, and screen readers read each cell's full name. Release flags are in the column headers, so a table reader hears "Week of Sep 1, v4.2.0 shipped".
Where does the dip sentence come from?
From the data: the weekly totals of the weeks that follow a release are averaged against the average of every other week, and the difference is shown as a percentage. Change the counts or the releases and the sentence changes with them. The numbers shown are example figures.
Related
- Pro
Git Branch Timeline Changelog
Code and commitsA drawn branch graph: main and two feature branches that fork and merge, commit dots by lane, three release tags as badges, and the same events as a list underneath.
- Pro
Commit Log Changelog
Code and commitsA git log of seven commits: a short hash with a Copy button for the full one, the commit type as a word, the message, an initials avatar and the day, with a Branch Select that swaps the list.
- Pro
Lanes With Gates Release Train
Deploys and rolloutsA release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.
- Pro
Contributor Stats Changelog
ContributorsOne segmented share bar of a release's commits by contributor with a counted legend, over the three most recent changelog entries each credited with an avatar and name.
- Pro
Contributor Leaderboard Changelog
ContributorsA framed, sortable table of eight contributors with rank by impact, commits, reviews, an impact bar and a streak; the top three keep a ringed avatar and the headings are buttons that set aria-sort.
- Pro
Tabbed Window Uptime History
Incidents and uptimeA tabbed window of ninety-day uptime for an uptime monitor: one tab per service, a large uptime figure that rolls to the new service, a strip of ninety daily bars and a three-row table of incidents.