Activity rings
Daily goals as tick rings that sweep, count up, and trace a second lap past 100%.
Week of goals
One ring per goal, from the outside in. Pick a day to sweep the rings from their current amounts. Past 100%, a thinner lap traces the inside edge. Hover or select a goal to dim the others. Arrow keys move through the week.
<neura::activity-rings
:metrics="[
['id' => 'deep', 'label' => 'Deep work', 'unit' => 'min', 'goal' => 180],
['id' => 'writing', 'label' => 'Writing', 'unit' => 'words', 'goal' => 1200],
['id' => 'reading', 'label' => 'Reading', 'unit' => 'pages', 'goal' => 40],
]"
:days="$days"
day="fri"
label="Week"
/>Today
Move, exercise, and stand share the same rings. Exercise is past its goal, so the inner lap continues. A single day still keeps the day control.
<neura::activity-rings
:metrics="[
['id' => 'move', 'label' => 'Move', 'unit' => 'kcal', 'goal' => 500],
['id' => 'exercise', 'label' => 'Exercise', 'unit' => 'min', 'goal' => 30],
['id' => 'stand', 'label' => 'Stand', 'unit' => 'hr', 'goal' => 12],
]"
:days="[
['id' => 'today', 'label' => 'Today', 'short' => 'Today', 'values' => ['move' => 420, 'exercise' => 36, 'stand' => 9]],
]"
label="Today"
/>