No Metrics Empty State Block for React

The picks, the sample figures and the tracked state stay in the page, and a reload or Start over takes them back. The four figures are typed (48,200 dollars, 12,480 people, 3.4 percent, 4.2 minutes) and every tile says Sample; nothing is measured or sent. To make it real, start collecting the picked metrics through your backend where the code says so and read each tile's figure and its share of the dial from your own data.

Its label follows the picks, so it always says what pressing it does: Track metrics with nothing picked, Track 3 metrics once three are ticked and not yet tracked, and Tracking 3 metrics, quietly, after pressing it. Changing the picks makes it ready again. Pressing it with nothing picked says so and moves focus to the first card; pressing it when there is nothing new says so too, so it never fails silently.

Each metric has a typed sample figure and a typed top for its dial, and the needle and the filled arc are drawn from the share of one over the other: Revenue is 48,200 of 60,000, which is 80 percent, so its needle sits 144 degrees along the half circle. Unpicked, the dial keeps one dashed needle straight up, where the first figure will point.

Each card is a real checkbox named by its metric and described by its hint, reached with Tab and toggled with Space. A polite status line in the foot says what was picked and whether it is tracked, the tiles are a list whose items read their name, figure and whether it is a sample, an empty tile reads No figure yet, and the dials are hidden from assistive technology.

No. Every tile keeps its dial, its figure row and its caption at fixed heights, so a dash and a rolling number take the same room, and the cards do not grow when ticked: they take a heavier edge instead.

The cards and the tiles are two across, the hint under each card is read aloud but not shown, and the foot with Track and Start over is pinned to the bottom of the screen while the panel is in view.