Log Frequency Table Stats Block for React

Edit LEVELS and MINUTES at the top of the file. Each level is a code, a count and a rank (ERROR is the loudest). The total, the lines a minute, the share of the stream, the bar and the headline are all read from that list. The window is two hours because MINUTES is 120, and the copy uses that number, so it never goes stale.

They measure different things, and the caption says so. The percent is the level's share of every line in the window. The bar is the logarithm of the count, scaled so the busiest level fills it. On a linear bar, INFO would fill the row and ERROR would be a sliver; the log length keeps the rare levels readable. The busiest level is worked out from the counts, so the headline and the full bar always name the same level.

All leaves every row bright. Warnings and up keeps ERROR and WARN bright and dims INFO, DEBUG and TRACE. Errors keeps only ERROR bright. A dimmed row is still there: its text goes quiet and its bar lightens, and a polite line under the control says which levels stayed bright. That line sits over unseen copies of the other two, so its height never changes. Nothing is removed, so the table keeps its height.

Hiding them would collapse the table and move the page. Dimming leaves the counts readable for anyone who still wants them, and the contrast stays in the text colour rather than fading the row out. The rank check is rank against the filter's floor, so a new level slots in by the rank you give it.

Yes. It is a real table with a caption and column headers. Each level is a row header. Values sit in bdi elements. The bars are decorative, because the percent next to them says the share and the caption says the bar is a logarithm. The filter is a ToggleGroup with an accessible name, and the line under it is a polite live region, so a change of filter is announced and a quiet row is not removed from the reading order.

The per-minute column hides, and the level, the total and the frequency stay. The filter sits under the header on one line and scrolls if the labels need more room than the screen, so a label is never cut off. The header fades in once; the table does not, because on a short screen it can start below the fold.