Status

WeekProgress

Where we are in the week, at a glance: one segment per shown day, past days filled, today filled as far as the day has gone, the days named underneath.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`days`Required	`string[]`	ISO days of the shown week, in order.
`today`	`string`	ISO day treated as today. Defaults to the device's date.
`fraction`	`number`	How much of today has gone, 0 to 1 (default 0.5).
`caption`	`React.ReactNode`	Overrides "Day 3 of 5".
`detail`	`React.ReactNode`	A short note on the right, such as "2 days left".
`head`	`boolean`	Set false to hide the caption row, when a StatTile around it already says "Day 2 of 7".
`off`	`string[]`	ISO days that are time off: they keep their place in the bar, drawn as an open segment, and are not counted.
`labels`	`boolean`	Set false to hide the day names under the segments, so it sits like any other bar in a row of tiles.
`hours`	`Record<string, number>`	Hours of work on each ISO day. Each segment is then as wide as its hours, and the meter counts hours instead of days.
`valueText`	`string`	What a screen reader hears for the value. Defaults to the caption.
`label`	`string`
`className`	`string`

Guidelines

Where we are in the week, at a glance: one segment per shown day, past days filled, today filled as far as the day has gone, the days named underneath. It sits beside the greeting on Home.

Provide: days (the ISO days of the week as the person shows it: five, seven or their own set, starting on their chosen day), today, fraction (how much of today has gone), and optionally caption (default "Day 3 of 5") and detail ("2 days left").

Finished days are solid in accent, the deepest color of gradient-informative; today's fill, still growing, keeps the gradient like every other bar in the system. In a StatTile, pass labels: false and head: false so it sits exactly like the other bars, and put the day name in the tile's caption.
The words carry it too: the caption, the day labels, and today's label in bold, so it never relies on color.
Follow the person's week setting for which days show and where the week starts.
Inside a StatTile, put it as the tile's children with head: false, and let the tile's value and caption say "Day 2 of 7" and "5 days left", so tiles in a row line up.

With labels: false the bar sits plain like any other bar: no day names and no outline on today's segment. The caption beside it says which day it is.

off takes ISO days that are time off: they keep their place as open, outlined segments labeled Off and are left out of the count ("Day 1 of 3").

hours takes the hours of work on each ISO day (from the person's work hours). Each segment is then as wide as its day, and the meter counts hours, so a short Friday takes less of the bar. fraction is then how much of today's work hours have gone: 0 before the day starts, 1 once it ends.
Words always come with the bar: "2 hours left today", "Day done", "Off today". valueText sets what a screen reader hears.