shadcn.io is not affiliated with official shadcn/ui
Feature Usage Heat Map Billing Block for Solid
A week of usage for four features as a heat grid, with an Events or Cost toggle that swaps every cell's number and shade, a keyboard-navigable cell picker and an alert on the picked cell's cost.
Installation
Overview
Show customers which feature drives the bill and on which day, inside your app, with this feature usage heat map for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a grid of four features by seven days on shared hairlines, every cell printing its number on one of five solid steps of the foreground. A Toggle Group in the header switches the lens between Events and Cost: cost is events times each feature's price per 1,000, so Auth events are many and cheap while Storage ops are few and dear, and the darkest cell moves from one to the other. Each cell is a button, the arrow keys move between them, and the picked cell is outlined and listed below with its day, events, cost and price. A Shine Button sets an alert above that cell's daily cost, the only colored control. Each band is ruled by Guides. For serverless, database and API products that bill several metered features.
FAQ
How do I fill the grid with my own usage?
Edit FEATURES: each has a name, a price per 1,000 events and seven daily events counts starting on Monday, and DAYS holds the week's dates. Cost is worked out from those, and the five shades are chosen against the largest value in the current lens, so you never set a colour by hand. The numbers here are typed examples and nothing is random.
Why do the shades change when I switch to Cost?
Each lens is scaled to its own largest cell. In Events the Auth row is darkest because it has the most events; in Cost it is Storage ops, because each of its operations costs far more. The cell numbers change with the lens too, and the list below the grid always shows both events and cost for the picked cell.
What does Alert me above do?
In this example it notes that you want a warning above the picked cell's daily cost and says so, with nothing sent. In your app, post the feature and the amount to your alert rules and show the result in the same status line. The label follows your pick, so choosing another cell changes the amount.
How do I use the grid with a keyboard?
Tab goes to the picked cell, and the arrow keys move the pick one cell at a time between days and features, with Home and End jumping to the first and last day. Space or Enter picks the focused cell. Only one cell is in the tab order, so the grid is one stop in a page and not twenty-eight. The grid stays left to right in a right-to-left page, because days run in time order.
Does colour carry the meaning?
No. Every cell prints its number, the shade only helps you scan, and each button is named with its feature, day, events and cost, for example "Storage ops, Thu: 4,120 events, $1.65". The picked cell is marked with an outline and by being pressed, and the busiest cell of the view is named in the list.