Components / Metrics
Activity strip
A row of intensity cells, like posts per day or per hour.
@fabrials/ui
| Day 1 | 0 |
|---|---|
| Day 2 | 0 |
| Day 3 | 5 |
| Day 4 | 3 |
| Day 5 | 2 |
| Day 6 | 2 |
| Day 7 | 1 |
| Day 8 | 7 |
| Day 9 | 0 |
| Day 10 | 2 |
| Day 11 | 5 |
| Day 12 | 2 |
| Day 13 | 3 |
| Day 14 | 0 |
| Day 15 | 6 |
| Day 16 | 0 |
| Day 17 | 6 |
| Day 18 | 1 |
| Day 19 | 4 |
| Day 20 | 0 |
| Day 21 | 8 |
| Day 22 | 4 |
| Day 23 | 2 |
| Day 24 | 10 |
| Day 25 | 11 |
| Day 26 | 2 |
| Day 27 | 0 |
| Day 28 | 11 |
| Day 29 | 4 |
| Day 30 | 0 |
| Day 31 | 7 |
| Day 32 | 5 |
| Day 33 | 5 |
| Day 34 | 13 |
| Day 35 | 5 |
| Day 36 | 2 |
| Day 37 | 0 |
| Day 38 | 1 |
| Day 39 | 3 |
| Day 40 | 2 |
| Day 41 | 1 |
| Day 42 | 1 |
| Day 43 | 7 |
| Day 44 | 1 |
| Day 45 | 11 |
| Day 46 | 3 |
| Day 47 | 8 |
| Day 48 | 2 |
| Day 49 | 2 |
| Day 50 | 8 |
| Day 51 | 2 |
| Day 52 | 2 |
| Day 53 | 3 |
| Day 54 | 4 |
| Day 55 | 6 |
| Day 56 | 2 |
| Day 57 | 1 |
| Day 58 | 3 |
| Day 59 | 4 |
| Day 60 | 5 |
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { ActivityStrip } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
cells | { label, value, tone? }[] | One cell per period. |
caption | string | Required: it names the table screen readers get. |
startLabel / endLabel | string | The ends of the range. |
size | default | lg | Cell height. |
Behavior
Five levels of Stormlight, or a status tone per cell.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.