Migration Information

For teams migrating from the V1 to V2 component, please refer to the migration guide for changes to the component.

Component Guide

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 completedDays prop should be an array of strings representing the days of the week.
  • Accepted values for the completedDays prop are: "SUN" | "MON" | "TUE" | "WED" | "THU" | "FRI" | "SAT".

• twoweek:

  • The completedDays prop should be an array of strings representing the days of the 14-day period.
  • Accepted values for the completedDays prop are strings of numbers from "1" to "14".

Show today

Use the showToday prop to display the indicator for today's date.

Note: 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	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
completedDays	OneWeekCompletedDays[] | TwoWeeksCompletedDays[]	'[]'	-	The days to be marked complete
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	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	'3'	-	Level of heading element with number (1 through 6). 3 is the default heading level, equivalent to 'h3'.
showToday	boolean | never	true	-	Whether or not to show the today indicator. Note: Only applies for the 'oneweek' variant
title	string	-	-	The title of the Activity Tracker
variant	"oneweek" | "twoweeks"	'oneweek'	-	The variant of the Activity Tracker

Below are the link(s) to the relevant GitHub type files:

ActivityTracker.types.ts

ActivityTracker Classes

Class Name	Description
.abyss-activity-tracker-container	Container for 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-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-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-hidden setting 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 issues | a11y-dialog)
  • VoiceOver and Chrome announce correctly

Component Tokens

Note: Click on the token row to copy the token to your clipboard.

Search tokens

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