shadcn.io is not affiliated with official shadcn/ui
Error Rate Comparison Changelog Block for React Aria
Four 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.
Installation
Overview
An error-rate comparison for React with React Aria, written for Faultless, a fictional error monitor. A start-aligned header carries a title worked out from the data (how many of four error classes fell after a release) and a Switch that draws every row on one shared scale instead of its own. Under it a ruled list runs rail to rail with one row for each class: its name, a 14-day line of errors per 10,000 requests split by a release marker (the seven days before in a pale tone, the seven after in full weight), the average after the release and the change as an arrow, a sign and a percentage. Lower is better; a class that rose says so with an up arrow and a plus sign, never a colour. It's built from Switch, Guides and inline SVG, with CSS transitions and your theme's tokens for every colour. For error monitors, release notes and post-release reviews. The figures are example data.
FAQ
How do I change the classes and the days?
Edit ERROR_CLASSES at the top of the file. Each class has a label, a note and fourteen days: errors per 10,000 requests, the first seven before the release and the last seven after. The averages, the change in percent, the lines and the title are all worked out from those numbers. The release name and the three dates above the lines are constants beside them.
What does the Switch change?
Off, each row's line is drawn on its own range, so even a quiet class shows its shape. On, every row shares one range from zero to the busiest day anywhere, so the lines can be compared by height. The text, the values and the page's height never change, and a short line under the title says which scale is in use.
How is direction told without colour?
By an arrow, a sign and, for assistive technology, words: a class that fell shows a down arrow and a true minus, one that rose shows an up arrow and a plus, and a hidden phrase says "fewer errors" or "more errors" than before the release. The pale and full-weight parts of each line tell before from after.
How does a screen reader get the lines?
The lines are hidden from assistive technology. A table with a caption lists every class and its fourteen daily values, and each row's heading, average and change are text.
How does it fit on a phone and in a right-to-left layout?
Below the desktop width each line drops under its label and the value and change sit side by side. The lines themselves stay left to right, because time runs one way on them. In a right-to-left layout the text and rows mirror, while versions, dates, percentages and signed changes, which are data, keep their order.