Svelte 5 component · machines-ui · Graphs
GraphUptime
A calendar-like grid of daily uptime statuses with date bounds and an overall uptime percentage.
Install
GraphUptime is a Svelte 5 ASCII uptime chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphUptime } from '@fractaldesign/machines-ui';Usage
<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
| Name | Type | Default |
|---|---|---|
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 Number of day cells displayed on each row. | 30 |
glyphs | Glyphs Characters that draw the graph: a preset name (`shade`, `ascii`, `hash`, `bar`) or your own array, lightest to heaviest. | — |
palette | GraphPalette 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 | '' |
Related components
GraphWaffle Share grid of ~100 cells; filled cells carry the accent.GraphWaterfall A running-total chart that shows how sequential increases and decreases contribute to a final value.GraphActivity A GitHub-style contribution grid: one cell per day, weeks across the frame, on a shared intensity scale.GraphBars Two mini bar charts joined by an arrow, comparing a series before a processor with the series it produces.GraphBullet A bullet chart: each row lays an actual value against an optional target along a ticked track, with the…GraphCalendar A one-month calendar grid with a weekday header, accent-marked days, and an optional boxed today.