Svelte 5 component · machines-ui · Graphs
GraphTimer
A live timer that counts time elapsed since an instant, time since it happened, or shows the local clock.
Install
GraphTimer is a Svelte 5 ASCII timer 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 { GraphTimer } from '@fractaldesign/machines-ui';Usage
<GraphTimer title="UPTIME" kind="elapsed" at="2026-08-01T00:00:00Z" caption="api" />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
kind | TimerKind What to count: time `elapsed` since `at`, time `ago` since `at`, or the local `clock`. | 'elapsed' |
at | Date | number | string Instant to count from, as a Date, epoch milliseconds, or an ISO string. | — |
caption | string Muted line drawn under the value. | — |
corner | string Character drawn at each corner of the frame. | — |
class | string | '' |
Related components
GraphTree An indented tree with `├─` and `└─` branch characters: each node carries a label, an optional meta tag, and…GraphUptime A calendar-like grid of daily uptime statuses with date bounds and an overall uptime percentage.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.