Weekly Breakdown Bar Chart Stats Block for Vue

Edit DAYS (a name and the minutes for each day) and CEILING, the number of minutes a full meter stands for. The badge goes to whichever day has the fewest minutes; for a "busiest day" report, change LIGHTEST to Math.max and the badge's words to match. The times, the week total and average and the headline are computed from DAYS.

Each cell draws one fill for a phone and one for lg and wider, from the same share, and shows only one of them: a horizontal fill from the start on a phone, a vertical fill from the foot from lg. Both are decorative and hidden from assistive technology, because the time is written in the cell. The meter box is left to right, so the fill starts at the same side in right-to-left pages.

The week is a list: each item reads the weekday, its time and, for the lightest day, the badge ("Thursday, 2h 48m, Lightest day"). The times sit in bdi elements, so a right-to-left page keeps "2h 48m" in order. The week total and average are a description list in the header.

The band ends the block. The next section draws its own top rule along the band's foot, so a bottom border here would double it, and the column has no bottom padding for the same reason. The band's top rule, with a + on each rail, comes from the Guides component.

The header and the band fade up once when the page loads, with a CSS transition. With reduced motion the transition is off and everything simply appears. The meters themselves don't animate.

Below lg the cells stack as seven rows of day, meter and time, each row a hairline apart; the lightest day's badge sits under its name. The padding steps down and nothing scrolls sideways at 320 pixels.