Period Toggle Stats Blog Block for React

Edit POSTS: each post has a title, a published date as an ISO string, seconds of average time on the page, and views and subscribers for each period (d7, d30, d90). AS_OF is the one day every period ends on. The strip is calculated from the whole list (views and subscribers are sums, the read time is averaged over views, and posts published counts the dates inside the period) and the ranking shows the five most read.

It is a single-choice group that always keeps one option on. Choosing a period updates the figures and the ranking and says so in a polite status line ("Showing the last 7 days."). The rows keep their positions, and bars animate their width, so the block's height never changes. The arrow keys move between the options, and they flip in a right-to-left page.

They are decorative. Each row's rank, title, publication date and view count are text, so the bar adds nothing that isn't already said.

The toggle sits under the header, the figures are a two by two grid, and each ranked row keeps its rank, title, bar and count, with titles allowed two lines. At 320 pixels nothing scrolls sideways.

Yes. The rows and cells mirror, numbers and dates are isolated with bdi, and the bars stay in a left-to-right box because they are charts.