Uptime Strip

A run of per-period bars: uptime history or a contribution heatmap. One primitive for both, since they are the same picture — buckets coloured by state or by intensity.

src/components/ui/uptime-strip.tsx

About

From the component's own source, where it was written.

A run of per-period bars: uptime history, or a contribution heatmap.

One primitive for both, because they are the same picture — a sequence of buckets coloured by intensity or state. The difference is only whether the scale is categorical (up, degraded, down) or continuous (a count).

Bars flex rather than taking a fixed width, so ninety days compress on a phone instead of scrolling. A missing bucket renders as an explicit gap rather than being dropped, which keeps the axis honest.

Install

npx astralyx-ui add uptime-strip

Usage

import { UptimeStrip } from '@/components/ui/uptime-strip'

<UptimeStrip buckets={days} label="API" summary="99.94%" />

Composer

Change the props and the source below follows.

API99.94% uptime

Props

roundedintensity mode

tsx

<UptimeStrip
  buckets={days}
  label="API"
  summary="99.94% uptime"
  rounded={true}
/>

Examples

Uptime and intensity

tsx

<UptimeStrip buckets={days} label="API" summary="99.94%" />
<UptimeStrip buckets={contributions} label="Commits" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`UptimeStrip`

A run of per-period bars: uptime history, or a contribution heatmap.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
buckets	UptimeBucket[]	required	`{ label, status?, value?, detail? }`. Give `status` for a state strip or `value` (0–1) for a heatmap.
height	number	28	—
rounded	boolean	true	—
label	string	—	Caption row above the bars.
summary	string	—	Caption row above the bars.

Types

`UptimeBucket`

Field	Type	Description
label	string	Label for the tooltip — a date, usually.
status?	'up' \| 'degraded' \| 'down' \| 'none'	A missing bucket renders as an explicit gap rather than being dropped, which keeps the axis honest.
value?	number	Continuous intensity, 0 to 1, for a heatmap.
detail?	string	—

Behaviour

Topic	Detail	Description
layout	flex	Bars flex rather than taking a fixed width, so ninety days compress on a phone instead of scrolling.