# Tracker

A strip of blocks, one per day or run, coloured by how it went, for nightly evals, uptime or a run history.

- **Use it for**: How each day or run went, for uptime, nightly evals or a run history.
- **Not for**: Counts that need a scale. Try [DotBars](https://unseenui.com/components/dot-bars/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { Tracker } from '@stackunseen/ui';
import { StatusBadge, Card } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<Tracker label="Nightly eval runs" segments={days} summary="28 of 30 runs passed" axis={["30 days ago", "Today"]} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `axis` | `readonly [string, string]` | Printed at the two ends: ['30 days ago', 'Today']. |
| `label` (required) | `string` | Names the figure for assistive technology and the hidden table. |
| `segments` (required) | `readonly TrackerSegment[]` | One block per period or run, oldest first. |
| `summary` | `ReactNode` | Printed under the strip, formatted by your app: "99.2% of runs succeeded". |

## Keyboard

Inert content; the hidden table is read in order.

## Works with

[Card](https://unseenui.com/components/card/), [Table](https://unseenui.com/components/table/), [Tag](https://unseenui.com/components/tag/), [DiffStat](https://unseenui.com/components/diff-stat/), [ElapsedTime](https://unseenui.com/components/elapsed-time/), [Numeric](https://unseenui.com/components/numeric/), [Kbd](https://unseenui.com/components/kbd/), [DotRing](https://unseenui.com/components/dot-ring/), [DotBars](https://unseenui.com/components/dot-bars/), [WeekStrip](https://unseenui.com/components/week-strip/), [HeatKeys](https://unseenui.com/components/heat-keys/), [Sparkline](https://unseenui.com/components/sparkline/)

Page: https://unseenui.com/components/tracker/