Uptime Bar

The history of a service, one thin bar per day, colored by how the day went.

API

api.balick.me

Operational

Installation#

pnpm dlx shadcn@latest add @balick/uptime-bar

Or pass the full URL: https://ui.balick.me/r/uptime-bar.json

Usage#

import { UptimeBar } from "@/components/ui/uptime-bar"

export function History({ days }: { days: { status: "up" | "degraded" | "down" | "none" }[] }) {
  return <UptimeBar days={days} uptime="99.98%" />
}

Props#

Prop	Type	Default	Description
`days` One entry per day, oldest first. The label shows when the pointer rests on the bar. Required.	`{ status: "up" \| "degraded" \| "down" \| "none"; label?: string }[]`	—	One entry per day, oldest first. The label shows when the pointer rests on the bar. Required.
`uptime` The uptime to show in the legend, such as "99.98%".	`string`	—	The uptime to show in the legend, such as "99.98%".
`startLabel` Label of the oldest day, under the first bar. Defaults to the number of days.	`string`	"90 days ago"	Label of the oldest day, under the first bar. Defaults to the number of days.
`endLabel` Label of the newest day, under the last bar.	`string`	"Today"	Label of the newest day, under the last bar.