--- title: Tracking summary: A row of colored blocks that shows one status per time period, for uptime and activity logs. description: Visualize activity logs and uptime data with the tracking component - a compact row of colored blocks that show status over time. related: [/ui/components/tooltip, /ui/plugins/chart] source: core/scss/ui/_tracking.scss css-vars: tracking classnames: component: - class: tracking desc: Container element part: - class: tracking-block desc: One block in the strip, colored with a bg-{color} utility modifier: - class: tracking-squares desc: Draws the blocks as equal squares instead of tall bars --- import Subheader from '@ui/Subheader.astro'; import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro' ## Basic example Build a tracking view from a `.tracking` wrapper with one `.tracking-block` element per time period. Use background classes such as `bg-success` or `bg-danger` to show each status, and add [tooltips](/ui/components/tooltip) for details.
## Tracking inside a card A tracking strip fits in a [card](/ui/components/card), for example under a subheader and a summary line in the `card-body`.
Status monitoring
Current month Last month Last 3 months
99.5%
2%
## Square blocks Add `tracking-squares` to draw the blocks as squares of equal size instead of tall bars. Use it for a compact status strip, for example one square per day.
## Accessibility - A tracking strip is a chart made of blocks. Give the container `role="img"` and an `aria-label` that sums it up, for example "Uptime over the last 90 days, 3 incidents". - The tooltips on the blocks are mouse-only. Put the same information in a table or a summary line so it can be reached another way. - Green and red blocks look identical to many users. Add a shape, a label, or a legend next to the strip. - Do not make each block focusable. Ninety focus stops for one chart is worse than none.