shadcn.io is not affiliated with official shadcn/ui
Ratio Tile Grid Stats Block for Svelte
Four goal tiles for a publishing house, each a ratio like 11 of 16, a progress bar and a pace tick that marks where the plan says the goal should stand today, with how many days ahead or behind it is.
Installation
Overview
A goal tile grid for Svelte with Ark UI. A compact header counts the goals that are on pace or ahead ("2 of 4 goals are on pace or ahead"), with the day of the quarter at its end. Under it, four tiles for a publishing house's quarterly goals (titles published, copies sold, rights deals signed, reviews in print) sit a little apart, each in a frame of hairlines that run past its corners. A tile shows the ratio ("11 / 16"), a bar that fills to the share reached, and a short tick across the bar at the share the plan says is due today. Under the bar, the gap in words: "9 days ahead of plan", "On plan today" or "6 days behind plan". Each goal has its own plan, because releases bunch up at the end of a quarter and a launch sells early, so the ticks sit in different places. Every share, tick position and gap is computed from one typed list of goals and the day of the quarter. Four tiles in a row from lg, two by two below it. It's built from Progress, SlidingNumber and Guides, with the bar in your theme's foreground colour.
FAQ
How do I change the goals and the quarter?
Edit QUARTER (the day it is and how many days it has) and GOALS at the top of the file. A goal is a label, a target, the value reached so far and a shape. The share, the bar, the tick, the "days ahead" figure, the header's count and the quarter line are all computed from these, so nothing else needs touching. Set day from the real date when you wire the block to your data.
What does the tick mean, and how is it placed?
It marks the share of the goal that should be done by today. With a shape of 1 the plan is a straight line, so on day 58 of 91 the tick sits at 64%. A shape above 1 means the work comes late (releases), below 1 early (a launch): the due share is the share of the quarter gone, raised to the shape. The days ahead or behind are the days between today and the day at which the plan would have reached the value you actually have. The tick is positioned with a logical inset, so it keeps its place in a right-to-left page, where the bar fills from the other side.
Why are ahead and behind not green and red?
Whether behind is bad depends on the goal and the day. The block says it in words and with an arrow in the text colour, and keeps the bar in your theme's foreground tone, so it stays correct in every theme preset and readable without colour. If one goal needs an alarm, add a status icon to its tile rather than tinting the bar.
Is the block accessible?
Yes. Each tile is a list item with a heading for its goal. The bar is a progress bar named with the goal, the two numbers and the percentage ("Titles published: 11 of 16, 69%"). The tick is decorative and hidden from assistive technology, because the pace line says the same thing in text. Numbers sit in bdi elements so a right-to-left page doesn't reorder "11 / 16".