shadcn.io is not affiliated with official shadcn/ui
Goal Ring Tiles Stats Block for Svelte
Four goal tiles for an OKR tool, each a thin ring with the part done drawn solid, the part today's pace will add drawn lighter after it and a tick for the target, with the projected finish in words.
Installation
Overview
A goal ring grid for Svelte with Ark UI. A centred header counts the goals projected to reach their target ("2 of 4 goals are projected to hit target") and says which week of the quarter it is. Under it four tiles, a little apart, each with its own frame whose lines run past its corners, show an objective for an OKR tool: active teams, docs pages published, customer interviews and integrations live. Each tile holds a thin ring that stands for the whole goal. The part done so far is drawn solid, the part today's pace will add by the end of the quarter is drawn at a lighter weight straight after it, and a short tick across the ring at its top marks the target, where the ring closes. The percentage done rolls in the middle. Under the ring the tile gives the numbers ("412 of 600"), what the pace leads to ("On pace for 112%") and either the week the target is reached or how many points short it falls. Every arc and sentence is computed from one typed list of goals and the week of the quarter. Four across from lg, two by two below it. It's built from SlidingNumber and Guides, with the ring drawn in SVG.
FAQ
How do I change the goals and the quarter?
Edit QUARTER (the week it is and how many weeks it has) and GOALS (a label, a target and the value reached so far) at the top of the file. The percentage done, the projection, the week the target is reached or the points short, the arcs, the header's count and the ring's accessible name are all computed from those.
How is the projection worked out?
It holds today's pace to the end: what has been done so far, divided by the weeks gone, times the weeks in the quarter. A goal at 412 of 600 after eight of thirteen weeks is on pace for 112%, and reaches 600 in week 12. The lighter arc stops at the ring's end when the pace passes the target, and the tile says by how much. It is a straight-line estimate, not a forecast model.
Where is the target on the ring?
The ring is one whole turn for the goal, so the target is where it closes: at the top, marked with a short tick across the ring. A projected arc that stops short of the tick leaves a gap that is the shortfall. There is no scale beyond the target, so a goal that passes it shows the arc closed and says the percentage in words.
Is it accessible?
Yes. Each ring is an image named with its numbers ("Active teams: 412 of 600, 69% done; at this pace 112% by week 13"), and the same facts are text under it. The drawing is in the page's foreground colour at two weights, with a legend row that shows both, and the tick is also named in the legend. The arrow beside the pace is decorative, and a goal below its target shows a dash instead.