--- /** * UptimeStatusIllustration — a status-page style card: a short daily * history strip where each bar reports one day's health. Hovering or * focusing a bar swaps the header readout — status label, date, incident * count, and that day's uptime percentage — while every bar keeps its own * plain hover/focus feedback (a small grow + lighten) with no JavaScript * involved. Leaving a bar restores the rolled-up default readout. * * Renders its finished, fully visible state by default — no JavaScript * required to read the strip; every bar carries a full text description * via `aria-label`, so the readout swap is a sighted-user enhancement, not * a requirement. With JavaScript enabled (and no reduced-motion * preference) the card fades in and the bars grow in with a brief * left-to-right stagger, once, the first time it scrolls into view. */ /** One day's status tier. */ export type UptimeStatus = 'operational' | 'degraded' | 'partial' | 'down'; /** One bar in the daily history strip. */ export interface UptimeDay { /** Short date label, e.g. `"Jun 6"`. */ date: string; /** Day's status tier — drives the bar color and the readout text. */ status: UptimeStatus; /** Uptime percentage label for that day, e.g. `"99.62%"`. */ uptime: string; /** Incident count for that day; omit or `0` for a clean day. */ incidents?: number; } interface Props { /** Ordered days, oldest first. Defaults to a representative 45-day history. */ days?: UptimeDay[]; /** Rolled-up uptime shown before any bar is hovered or focused. */ overallUptime?: string; /** Caption under the oldest bar. Defaults to `" days ago"`. */ rangeStartLabel?: string; /** Caption under the newest bar. */ rangeEndLabel?: string; /** Additional classes for the root element. */ class?: string; } const statusLabels: Record = { operational: 'All Systems Operational', degraded: 'Degraded Performance', partial: 'Partial Outage', down: 'Major Outage', }; const defaultDays: UptimeDay[] = [ { date: 'Jun 1', status: 'operational', uptime: '100%' }, { date: 'Jun 2', status: 'operational', uptime: '100%' }, { date: 'Jun 3', status: 'operational', uptime: '100%' }, { date: 'Jun 4', status: 'operational', uptime: '100%' }, { date: 'Jun 5', status: 'operational', uptime: '100%' }, { date: 'Jun 6', status: 'degraded', uptime: '99.62%', incidents: 1 }, { date: 'Jun 7', status: 'operational', uptime: '100%' }, { date: 'Jun 8', status: 'operational', uptime: '100%' }, { date: 'Jun 9', status: 'operational', uptime: '100%' }, { date: 'Jun 10', status: 'operational', uptime: '100%' }, { date: 'Jun 11', status: 'partial', uptime: '98.10%', incidents: 1 }, { date: 'Jun 12', status: 'operational', uptime: '100%' }, { date: 'Jun 13', status: 'operational', uptime: '100%' }, { date: 'Jun 14', status: 'operational', uptime: '100%' }, { date: 'Jun 15', status: 'operational', uptime: '100%' }, { date: 'Jun 16', status: 'operational', uptime: '100%' }, { date: 'Jun 17', status: 'down', uptime: '87.40%', incidents: 2 }, { date: 'Jun 18', status: 'operational', uptime: '100%' }, { date: 'Jun 19', status: 'operational', uptime: '100%' }, { date: 'Jun 20', status: 'operational', uptime: '100%' }, { date: 'Jun 21', status: 'operational', uptime: '100%' }, { date: 'Jun 22', status: 'operational', uptime: '100%' }, { date: 'Jun 23', status: 'degraded', uptime: '99.71%', incidents: 1 }, { date: 'Jun 24', status: 'operational', uptime: '100%' }, { date: 'Jun 25', status: 'operational', uptime: '100%' }, { date: 'Jun 26', status: 'operational', uptime: '100%' }, { date: 'Jun 27', status: 'operational', uptime: '100%' }, { date: 'Jun 28', status: 'partial', uptime: '96.85%', incidents: 2 }, { date: 'Jun 29', status: 'operational', uptime: '100%' }, { date: 'Jun 30', status: 'operational', uptime: '100%' }, { date: 'Jul 1', status: 'operational', uptime: '100%' }, { date: 'Jul 2', status: 'operational', uptime: '100%' }, { date: 'Jul 3', status: 'operational', uptime: '100%' }, { date: 'Jul 4', status: 'degraded', uptime: '99.55%', incidents: 1 }, { date: 'Jul 5', status: 'operational', uptime: '100%' }, { date: 'Jul 6', status: 'operational', uptime: '100%' }, { date: 'Jul 7', status: 'operational', uptime: '100%' }, { date: 'Jul 8', status: 'operational', uptime: '100%' }, { date: 'Jul 9', status: 'partial', uptime: '97.92%', incidents: 1 }, { date: 'Jul 10', status: 'operational', uptime: '100%' }, { date: 'Jul 11', status: 'operational', uptime: '100%' }, { date: 'Jul 12', status: 'down', uptime: '91.20%', incidents: 1 }, { date: 'Jul 13', status: 'operational', uptime: '100%' }, { date: 'Jul 14', status: 'operational', uptime: '100%' }, { date: 'Jul 15', status: 'operational', uptime: '100%' }, ]; const { days = defaultDays, overallUptime = '99.9%', rangeStartLabel = `${days.length} days ago`, rangeEndLabel = 'Today', class: className, } = Astro.props; ---

Uptime

{overallUptime}

{ days.map((day, index) => { const incidents = day.incidents ?? 0; const incidentClause = incidents > 0 ? `, ${incidents} incident${incidents > 1 ? 's' : ''}` : ''; const metaText = incidents > 0 ? `${day.date} · ${incidents} incident${incidents > 1 ? 's' : ''}` : day.date; const ariaLabel = `${day.date}: ${statusLabels[day.status]}, ${day.uptime} uptime${incidentClause}`; return ( ); }) }

Installation

Install dependencies

Add these files

Configuration

Use it