'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
WorkflowAlea Pro
RoadmapTimeline and CycleProgress
Projects on a time line with their progress and today marked, and a cycle at a glance: scope, started and done day by day.
import { RoadmapTimeline, CycleProgress } from '@alea/pro';
Examples
Roadmap
Projects from start to end with their progress, the months on top and today marked.
Cycle
Scope, started and done each day of a two week cycle, the numbers on top and the target line dashed.
- Scope
- 26
- In progress
- 21
- Done
- 16 (62% done)
| Day | Scope | In progress | Done |
|---|---|---|---|
| Oct 9 | 22 | 3 | 0 |
| Oct 10 | 23 | 5 | 1 |
| Oct 11 | 24 | 7 | 3 |
| Oct 12 | 25 | 9 | 5 |
| Oct 13 | 26 | 11 | 7 |
| Oct 14 | 26 | 13 | 9 |
| Oct 15 | 26 | 15 | 10 |
| Oct 16 | 26 | 17 | 12 |
| Oct 17 | 26 | 19 | 14 |
| Oct 18 | 26 | 21 | 16 |
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-status-danger…--alea-surface…--alea-text…--alea-text-muted…
Radius
--alea-radius-md…--alea-radius-sm…
Type
--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-regular…
Motion
--alea-motion-duration-fast…--alea-motion-duration-slow…--alea-motion-ease-out…
Props
RoadmapTimeline props
Projects on a time line: a bar from start to end with its progress, months across the top and a line for today. Each project is a list item that says its dates and progress in words.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | RoadmapItem[] | - | The projects: name, start, end, and optional progress, status and href. |
aria-label | string | - | Name of the roadmap. |
className | string | - | Extra class names for the root element. |
from | Date | - | First and last day shown. Default: from the earliest start to the latest end, by whole months. |
showToday | boolean | true | Marks today. Default true. |
to | Date | - | Last day shown. Default the end of the month of the latest end. |
CycleProgress props
A cycle at a glance: how much is in scope, started and done each day, and where it stands now. The chart is a picture; the numbers are in the text and in a table for screen readers.
| Prop | Type | Default | Description |
|---|---|---|---|
daysrequired | { scope: number; started: number; completed: number; }[] | - | Per day from the start: total scope, started and completed (counts or points). |
endrequired | Date | - | Last day of the cycle. |
namerequired | string | - | The cycle's name: "Cycle 144". |
startrequired | Date | - | First day of the cycle. |
className | string | - | Extra class names for the root element. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
RoadmapTimeline
- States
- Hover (CSS)
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-roadmap.alea-roadmap-months.alea-roadmap-rows.alea-roadmap-row.alea-roadmap-bar.alea-roadmap-fill.alea-roadmap-name.alea-roadmap-lead.alea-roadmap-today.alea-roadmap-grid
CycleProgress
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-cycle.alea-cycle-head.alea-cycle-name.alea-cycle-dates.alea-cycle-stats.alea-cycle-chart.alea-cycle-area.alea-cycle-line.alea-cycle-target- Data attributes
data-k=starteddata-k=completed
Accessibility
- Each project is a list item that says its name, dates and progress in words; the bars are the picture.
- The cycle chart is decorative; its numbers are in the text above it and in a table for screen readers.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through the projects that link somewhere |
Do and don't
Do
- Keep a roadmap to the projects that matter this quarter.
- Show the cycle's scope line so added work is visible.
Don't
- Don't use bar color alone to say a project is late: say it in the name or a label.
In Figma
RoadmapBar with Progress and CycleProgress with the three series.