"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; export type UptimeDay = { date: string; status: "up" | "degraded" | "down" | "none"; note?: string }; export type UptimeBarsProps = { name: string; days: UptimeDay[]; /** Overrides the computed uptime percentage. */ uptime?: number; className?: string; }; const color = { up: "bg-success", degraded: "bg-warning", down: "bg-danger", none: "bg-surface-overlay" }; const text = { up: "Operational", degraded: "Degraded performance", down: "Outage", none: "No data" }; /** Status-page style uptime history for one service. */ export function UptimeBars({ name, days, uptime, className }: UptimeBarsProps) { const [hover, setHover] = React.useState(null); const counted = days.filter((d) => d.status !== "none"); const pct = uptime ?? (counted.length ? (counted.reduce((a, d) => a + (d.status === "up" ? 1 : d.status === "degraded" ? 0.98 : 0.9), 0) / counted.length) * 100 : 100); const current = days.at(-1)?.status ?? "none"; return (

{name} {pct.toFixed(2)}% uptime

setHover(null)}> {days.map((d, i) => ( setHover(i)} className={cn("flex-1 rounded-[3px] transition-[transform,opacity]", color[d.status], hover !== null && hover !== i && "opacity-50", hover === i && "scale-y-110")} /> ))} {hover !== null ? (

{days[hover]!.date}

{text[days[hover]!.status]}

{days[hover]!.note ?

{days[hover]!.note}

: null}

) : null}

{days.length} days ago Today

); }

Uptime Bars

Installation

Exports