machines-ui
graphs

Uptime

A calendar-like grid of daily uptime statuses with date bounds and an overall uptime percentage.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphUptime } from '@fractaldesign/machines-ui';

Preview

[ API ]

Jun 1 Aug 29

94%

up slow down

94 percent uptime over 90 days, Jun 1 to Aug 29
<GraphUptime
  title="API"
  from="Jun 1"
  to="Aug 29"
  days={Array.from({ length: 90 }, (_, i) =>
    i === 41 || i === 42 ? 'down' : i === 18 || i === 60 ? 'degraded' : 'ok'
  )}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
days* UptimeStatus[] —Daily statuses in chronological order, using ok, degraded, down, or empty.
from string —Optional label for the beginning of the displayed date range.
to string —Optional label for the end of the displayed date range.
columns number 30Number of day cells displayed on each row.
glyphs Glyphs —Characters that draw the graph: a preset name (`shade`, `ascii`, `hash`, `bar`) or your own array, lightest to heaviest.
palette GraphPalette
'mono''duo''multi'
—How many accent colours the graph uses: `mono` one, `duo` two, `multi` three.
corner string —Character drawn at each corner of the frame.
class string ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Types

NameKindDescription
UptimeStatustypeRows of day-status glyphs: ok / degraded / down.
'ok' | 'degraded' | 'down' | 'empty'

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --graph-accent-2
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphUptime.svelte

machines-ui