Rate Limit Warning Notification Block for React

Edit LIMIT, COUNTS (each endpoint has a verb, a path and its requests in the current minute) and MARKS. The total, the percentage of the limit and each endpoint's share are worked out from them; shares are whole percents shared out by largest remainder, so the six always add to 100. In your app feed COUNTS from your metrics and restart the timer from your window's real reset time.

Yes, for 42 seconds, then it says the window reset in this demo and the button becomes Restart countdown; the table keeps its figures, because nothing is measured live. The digits are a clock face for the eye; the Pause button is always there and says where it paused. With reduced motion the countdown starts paused instead of running, and a visitor can start it.

It is a native meter with an accessible name, drawn over as a bar and three marks. The fill is foreground, the marks are lines with a halo, and each is labelled with its percent underneath, so nothing depends on colour. The words about what each mark does (slowing down past 90 percent, a 429 at 100) are in the header.

Pressing a head sorts by it in its first direction (largest first for Requests and Share, A to Z for Endpoint) and pressing it again turns it round; ties fall back to the endpoint's name. The head's aria-sort and an arrow say which way, and a polite line says "Sorted by share, largest first". Every row has the same height in every order.

The Requests column folds into each endpoint's second line ("612 a minute") and the table keeps two columns, the endpoint and its share bar, so it fits at 320 px with no sideways scroll. The timer moves under the meter.