shadcn.io is not affiliated with official shadcn/ui
Date Range Metrics Command Menu Block for Solid
A web-analytics command menu shown open over a dashboard: three date ranges with a tick, three key metrics that re-derive at once with a signed change, and three reports to jump to.
Installation
Overview
Change the range and read the numbers without leaving the keyboard with this analytics command menu for Solid with Ark UI. It opens from the dashboard in Dunescope, a web analytics service, whose header holds an outline field with its ⌘ K cap, and the dashboard is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command in three groups: Date range (the last 7, 28 or 90 days, one ticked), Key metrics (visitors, conversions and revenue with their figures and their change as an arrow, a sign and a percentage) and Reports (traffic sources, top pages and a checkout funnel). Enter on a range changes every figure at once and keeps the menu open, and the drawn bars behind it redraw; Enter on a metric reads it out; Enter on a report names it on the page and closes the menu. On a phone the change column is dropped. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same range and query. For analytics, finance and monitoring tools that ask "over what period?" before anything else.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a dashboard, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a range or a search in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How do the figures follow the range?
Each metric holds one figure and one change per range as typed numbers, and metricRow reads the one for the current range, so picking a range rebuilds the whole list in the same render: no wait, no loading state. The chosen range has a tick and the words "selected" for a screen reader, the list keeps its place, and the status line reads all three figures with their direction.
How is a change shown without colour?
As an arrow, a sign and a percentage in one left-to-right string: "↑ +6.1%" or "↓ −2.4%". The arrow says the direction, the sign says it again, and the row's hidden text spells it out as "up 6.1%" or "down 2.4%". The text stays foreground in both themes.
What do the report rows do?
Enter on a report puts its name on the drawn dashboard's label next to the range, says "Jumped to Top pages. In this demo only." and closes the menu with focus back on the field. Nothing loads. In your app navigate to the report from pick and leave the rest.
What stays local, and how do I wire it?
All of it. The three ranges, the three metrics' figures and changes, and the drawn bars are typed constants; numbers are grouped by a helper so the server and the browser print the same. In your app fetch the figures for the chosen range when it changes (show the previous ones until they arrive) and keep the range in the URL so a report opens with it.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, and Enter picks a range, reads a metric or jumps to a report. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.