shadcn.io is not affiliated with official shadcn/ui
Legend Filter Heatmap Stats Block for Solid
A twelve-week by seven-day commit heatmap whose five-step legend is a set of toggles: choosing a level keeps only those days at full strength, outlines the rest and counts the days.
Installation
Overview
A commit heatmap with a legend you can press, for Solid with Ark UI. A header says how many of the 84 days saw ten commits or more, "15 of 84 days saw ten commits or more". A framed grid shows twelve weeks across and Monday to Sunday down, each day one of five solid steps of your theme's foreground colour. The key beside it (under it on a phone) is the control: five toggle buttons, one per step, each with its swatch, its range of commits and how many days sit at it. Choosing steps keeps only those days at full strength and draws every other day as an empty outline, so nothing moves; choosing none shows every day. A polite line counts the result, "34 days at this level". The counts and the grid come from one seeded list of daily commits, so the server and the browser agree. An unseen table gives every day's commits. For commit activity, support tickets, sign-ups and any measure bucketed into levels.
FAQ
How do I use my own commits?
Replace commitsFrom with your own list: 84 numbers, oldest first, starting on a Monday (twelve weeks of seven days). FLOORS are the fewest commits a day needs to reach each step and RANGES are the words the key writes for them; change both together. The counts on the toggles, the headline and the status line are computed from the list.
What does choosing a level do?
It keeps the days at that level in their full shade and draws all the others as empty outlined squares. You can choose several levels at once and switch one off by pressing it again; with nothing chosen every day shows. The grid never reflows, and the line under the key says how many days are shown. Outlines are solid, not faded, so the text and the key keep their contrast.
Can I use it without a mouse?
Yes. Each level is a toggle button with a visible focus ring and an on and off state, so it works with the keyboard and with screen readers, and the line under the key is announced politely when the count changes. The group is named "Show days by commits".