Goal Ring Tiles Stats Block for React

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.

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.

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.

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.

The tiles sit two by two with a gap between them, the rings shrink from 128 to 96 pixels, and the pace and finish lines reserve two lines each so the tiles in a row stay level when one wraps. Nothing scrolls sideways at 320 pixels.

The header and the tiles fade up once on load, each solid arc draws round once, and the percentages roll up the first time a tile scrolls into view. With reduced motion everything is drawn as it is.