shadcn.io is not affiliated with official shadcn/ui
Test Coverage Changelog Block for React
A split with a sparkline of coverage over six releases, the last point a ring and the last segment dashed, beside a table of the latest three releases with progress bars and pass and fail counts.
Installation
Overview
A coverage report for React with Base UI, written for Greencheck, a fictional continuous-integration service. A split behind a divider that runs from the spine's top rule. At the start a header whose title is worked out from the data ("Coverage rose in five releases running"), a toggle group (Lines, Branches) and a sparkline of the chosen measure over six releases, the newest point a ring and the last segment dashed, with its change since the release before as an arrow, a sign and a number. At the end a table of the latest three releases: the release and its day, line and branch coverage each as a percentage, a covered count and a progress bar, and the tests that passed and failed. It's built from Toggle Group, Progress and Guides, with your theme's tokens for every colour. For release notes and engineering updates. The numbers are example data.
FAQ
How do I change the releases?
Edit RELEASES (oldest first). Each has its day, the lines and branches covered and in total, and the tests that passed and failed. Coverage is never typed in: it is covered over total, rounded to a tenth, for the sparkline, the table and the streak in the title alike.
What does the toggle do?
It chooses which measure the sparkline draws, and which column of the table is in full weight (the other is paler). The line is redrawn, the headline reading and the change update, and a polite line says what is showing. Nothing else on the page moves.
Is the sparkline accessible?
The drawing is hidden from assistive technology and every reading sits beside it in a table with a caption (both measures for all six releases). The newest reading is a ring and the last segment is dashed, so it is told apart without colour.
Is the table a real table?
Yes: a native table with a caption, column headers with scope, and the release as the row header. Each bar has a name that includes its percentage. The table sits in a scrollable region the keyboard can reach.
How does it fit on a phone and in a right-to-left layout?
Below the desktop width the chart comes right after the header and the table under it; below the small breakpoint the Tests column drops and each row's counts move under its release. Percentages and the chart keep their left-to-right order in a right-to-left layout, while text mirrors.
Related
- Pro
Automated Test Report Changelog
Code and commitsSix test suites as rows with a segmented outcome bar (solid, hatched, outlined, dotted), counts as words and a popover per suite that lists its flaky tests with retry counts.
- Pro
Error Rate Comparison Changelog
Incidents and uptimeFour error classes as rows, each a 14-day line split by a release marker with the average after it and the change as an arrow and a sign, plus a switch for one shared scale.
- Pro
Accessibility Score Changelog
Security and auditsAn accessibility scorecard split by a divider: a ring with the chosen release's score and its change since the release before, and Tabs for four releases over a table of audit items.
- Pro
Feature Adoption Curves Changelog
Metrics and chartsA reverse split with adoption curves aligned by weeks since ship, four features as buttons with their 28-day adoption and 7-day retention, the chosen curve bold.
- Pro
Performance Log Changelog
Metrics and chartsFive load metrics as rows sorted by improvement, each with the old reading struck through, the new one, the change as an arrow and a percentage, and paired bars, with a toggle that picks the release to compare against.
- Pro
Build Pipeline Matrix Changelog
Deploys and rolloutsA run-by-stage matrix of the last six builds with a result and a time in every cell, a failed run that explains itself, and a stage lens that tints a column.