# DotRing

A ring of dotted spokes, one per hour or step, denser where the value is higher, with a figure in the centre.

- **Use it for**: Counts around a cycle: hours of a day, steps of a loop.
- **Not for**: Progress toward one total. Try [Progress](https://unseenui.com/components/progress/).

## Installation

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

## Usage

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

<DotRing label="Runs by hour" data={hours} value="32 s" caption="per run" ticks={[{ at: 0, label: "00" }, { at: 12, label: "12" }]} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `caption` | `ReactNode` | Under the centre figure: "per run". |
| `data` (required) | `readonly DotDatum[]` | One spoke per item, clockwise from the top: hours of a day, minutes, steps of a run. |
| `depth` | `number` | Dots per spoke, from the inside out. |
| `label` (required) | `string` | Names the figure for assistive technology and the hidden table. |
| `max` | `number` | The value that fills a spoke; defaults to the largest value present. |
| `ticks` | `readonly { at: number; label: string; }[]` | Printed around the ring at those item indexes: [{ at: 0, label: '00' }]. |
| `unit` | `string` | Unit for the hidden table, such as "runs". |
| `value` | `ReactNode` | The centre figure, formatted by the application, such as "32 s". |

## 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/), [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/), [BarList](https://unseenui.com/components/bar-list/)

Page: https://unseenui.com/components/dot-ring/