Rate Limit Table Stats Block for React

Edit LIMITS at the top of the file. An endpoint has a method, a path, a window label, the calls used, the limit and resets, the seconds left in the window when the page opens. The shares, the endpoints past the 80% line, the one at its limit and the headline are computed from those. The 80% line is the SOFT constant.

Each one starts from its row's resets when the page opens and counts down on its own. Nothing here resets itself: when a window reaches zero the countdown stops there and the bar stays as it was, because the table has no server to read a new window from. Until the page is running the cells show dashes, so the server and the browser draw the same thing.

Passing the 80% line is a warning to act on, so it is a line of text ("Past the 80% line"). Only an endpoint that has used its whole limit is failing calls, so it alone gets the destructive mark, with a cross and the word "Limited" next to it. Colour never carries the state by itself.

Yes. It is a native table with a caption, column headers and the endpoint as the row header. Each bar is a progress bar named with the method, path, the calls used, the limit and the share. The countdown is a time element that speaks its time in full words. Where the table scrolls sideways on a narrow screen, the scroll area is focusable and labelled.

The window column drops out below md. The endpoint, the used bar and the countdown stay, and the table scrolls only if the screen is narrower than that.

The caption under the frame explains the tick on the bars. The frame sits inside the rails, with its corners marked, and the column keeps its bottom padding because the frame is not a band. The header and the frame fade up once on load, or simply appear when motion is reduced.