shadcn.io is not affiliated with official shadcn/ui
Goals Tracker Calendar Block for Solid
Five goals with a start, a due date, a target and a current value, each showing a pace in words and with an arrow (Ahead by 5 days, Behind by 9 days, On pace) worked out from the dates, a bar with a tick for where an even pace has you and pieces of progress to log.
Installation
Overview
Say whether a goal is on track in days, not percentages, with this goals tracker for Solid with Ark UI. A hairline frame with a plus mark on each corner holds five goals, each in its own band with its dates, its due-in count and a pace worked out from the fixed "now" of 14 October: the share of the time that has gone against the share of the target reached, put in days, so a goal reads "Ahead by 5 days", "Behind by 9 days" or "On pace", with a trend arrow and the words. A Progress bar shows where you are and a tick on it shows where an even pace would have you today. Each goal lists three pieces of progress to log with a Checkbox, such as a long run or a flashcard sprint, and ticking one adds its amount to the current value, so the pace and the bar move at once. A Segment Group orders the goals by Due date or Most behind first, and the order is kept until you press it again, so logging progress never makes the page jump. It's built from Segment Group, Progress, Checkbox and Guides, with a CSS entrance only. For personal goals, habit apps and any target with a deadline.
FAQ
How do I add my own goals?
Edit GOAL_LINES and STEP_LINES. A goal is id | name | start | due | target | now | unit with ISO dates, and a step is goal | id | what you did | amount it adds. The pace, the due-in count, the tick on the bar and the order are worked out from them.
How is the pace worked out?
paceDays takes the share of the target you have reached, subtracts the share of the time that has passed since the start, and multiplies by the length of the goal in days, rounding to whole days. A positive number is ahead, a negative one is behind, and anything under two days either way reads On pace. The current value is the typed one plus every ticked step, held at the target.
Why does ticking a piece of progress not re-order the goals?
The order is stored when you press a sort, not worked out on every render, so a goal does not slide away from under your pointer when it stops being the most behind. Press Most behind first again to re-sort with the new values.
Why is it always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now. To follow the real date, set it from your own clock.