Skip to content
Components / Metrics

Activity strip

A row of intensity cells, like posts per day or per hour.

@fabrials/ui
Loading state
Posts per day, last 60 days
Day 10
Day 20
Day 35
Day 43
Day 52
Day 62
Day 71
Day 87
Day 90
Day 102
Day 115
Day 122
Day 133
Day 140
Day 156
Day 160
Day 176
Day 181
Day 194
Day 200
Day 218
Day 224
Day 232
Day 2410
Day 2511
Day 262
Day 270
Day 2811
Day 294
Day 300
Day 317
Day 325
Day 335
Day 3413
Day 355
Day 362
Day 370
Day 381
Day 393
Day 402
Day 411
Day 421
Day 437
Day 441
Day 4511
Day 463
Day 478
Day 482
Day 492
Day 508
Day 512
Day 522
Day 533
Day 544
Day 556
Day 562
Day 571
Day 583
Day 594
Day 605

Installation

  1. Import the control from @fabrials/ui, after setting the app up.

    TypeScript
    import { ActivityStrip } from "@fabrials/ui";

API reference

Prop / exportTypeDescription
cells{ label, value, tone? }[]One cell per period.
captionstringRequired: it names the table screen readers get.
startLabel / endLabelstringThe ends of the range.
sizedefault | lgCell 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.