import { ActivityTracker } from '@uhg-abyss/web/ui/ActivityTracker';Overview
The ActivityTracker is designed to visually represent the completion of activities over a period of time, such as a week or two weeks. It displays a series of circles representing each day, with filled circles indicating completed days.
Variants
Use the variant prop to determine which type of tracker you want to display. Depending on the variant, the component will accept different formats of completedDays.
-
oneweek:- The
completedDaysprop should be an array of strings representing the days of the week. - Accepted values for the
completedDaysprop are:"SUN" | "MON" | "TUE" | "WED" | "THU" | "FRI" | "SAT".
- The
-
twoweek:- The
completedDaysprop should be an array of strings representing the days of the 14-day period. - Accepted values for the
completedDaysprop are strings of numbers from"1" to "14".
- The
Show today
Use the showToday prop to display the indicator for today's date.
This prop only applies for the oneweek variant. The default is set to true.
Sizing
Day visuals are evenly distributed in the main container. When the container resizes, the gap between elements grows or shrinks, and the visuals have a static size. It is recommended to use a container with a minimum size of 304px.
Heading
The title prop is used to display a heading for the activity tracker. It is rendered as an h3 element by default, but you can change the heading level using the headingLevel prop.
ActivityTracker Props
| Name | Type | Default | A11y | Description |
|---|---|---|---|---|
className | string | undefined | CSS class name to apply to each element within the component | ||
completedDays | OneWeekCompletedDays[] | TwoWeeksCompletedDays[] | undefined | [] | The days to be marked complete | |
css | CSSProperties | Partial<Record<"abyss-activity-tracker-header" | "abyss-activity-tracker-root" | "abyss-activity-tracker-container" | "abyss-activity-tracker-week-container" | "abyss-activity-tracker-day-container" | "abyss-activity-tracker-day-circle" | "abyss-activity-tracker-day-label", CSSProperties>> | undefined | Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information | ||
data-testid | string | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | ||
disableDefaultProviderProps | boolean | undefined | false | If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored. | |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | undefined | '3' | Level of heading element with number (1 through 6). 3 is the default heading level, equivalent to 'h3'. | |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | ||
showToday | boolean | undefined | true | Whether or not to show the today indicator. Note: Only applies for the 'oneweek' variant | |
slotProps | ActivityTrackerSlotPropsMap | undefined | Props to pass to individual internal slots of the component. See slotProps for more information | ||
title | string | undefined | The title of the Activity Tracker, rendered as a semantic heading so screen reader users can navigate to it. | ||
variant | "oneweek" | "twoweeks" | undefined | 'oneweek' | The variant of the Activity Tracker | |
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
ActivityTracker Classes
| Class Name | Description |
|---|---|
| .abyss-activity-tracker-container | Container for the activity tracker |
| .abyss-activity-tracker-day-circle | Circle representing a completed day in the activity tracker |
| .abyss-activity-tracker-day-container | Container for each day in the activity tracker |
| .abyss-activity-tracker-day-label | Label for each day in the activity tracker |
| .abyss-activity-tracker-header | Header for the activity tracker |
| .abyss-activity-tracker-root | Root element for the activity tracker |
| .abyss-activity-tracker-week-container | Container for a week in the activity tracker |
ActivityTracker is a non-interactive visual representation of an activity over time that helps people monitor progress and patterns.
ARIA Labels
Incomplete days have different ARIA labels depending on if the day is in the past or in the future:
- In the past, the ARIA label would announce the name of the day and followed with "incomplete"
- In the future, the ARIA label will announce only the name of the day
This only applies to the weekly tracker.
Known BrAT Issues
- MacOS: VoiceOver and Safari (WebKit)
- Ignores
aria-hiddensetting for entries- Announces offscreen content for:
- Status icon
- 3-letter day abbreviation (1-week variant)
- Number (2-week variant)
- New line
- Appears to be a known issue with older versions of VoiceOver (See: Known issuesopens in a new window | a11y-dialogopens in a new window)
- Announces offscreen content for:
- VoiceOver and Chrome announce correctly
- Ignores
Component Tokens
Click on the token row to copy the token to your clipboard.
ActivityTracker Tokens
| Token Name | Value | |
|---|---|---|
| activity-tracker.color.border.day.rest | #4B4D4F | |
| activity-tracker.color.border.day.active | #002677 | |
| activity-tracker.color.icon.completed-day | #FFFFFF | |
| activity-tracker.color.surface.completed-day | #007000 | |
| activity-tracker.color.text.heading | #323334 | |
| activity-tracker.color.text.day | #4B4D4F | |
| activity-tracker.color.text.weeks | #4B4D4F | |
| activity-tracker.border-radius.all.day | 500px | |
| activity-tracker.border-width.all.day.rest | 1px | |
| activity-tracker.border-width.all.day.active | 2px | |
| activity-tracker.sizing.all.icon | 24px | |
| activity-tracker.sizing.height.day | 40px | |
| activity-tracker.sizing.width.day | 40px | |
| activity-tracker.spacing.gap.vertical.container | 16px | |
| activity-tracker.spacing.gap.vertical.content | 8px | |
| activity-tracker.spacing.padding.all.day | 8px |