Svelte 5 component · machines-ui · Graphs
GraphActivity
A GitHub-style contribution grid: one cell per day, weeks across the frame, on a shared intensity scale.
Install
GraphActivity is a Svelte 5 ASCII activity 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 { GraphActivity } from '@fractaldesign/machines-ui';Usage
<script lang="ts">
import { GraphActivity } from '@fractaldesign/machines-ui';
// Pass dated counts; weeks, months, and intensity are derived.
</script>
<GraphActivity
title="COMMITS"
palette="multi"
days={[
{ date: '2025-09-01', count: 3 },
{ date: '2025-09-02', count: 12 }
// ...one per day, gaps fill as empty
]}
/>Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
days | ActivityDay[] Dated counts, one per day; gaps between dates fill in as empty. | — |
weekStartsOn | 0 | 1 First day of the week, 0 for Sunday and 1 for Monday. | 0 |
max | number Ceiling of the intensity scale; defaults to the highest count. | — |
caption | string | false Extra sentence appended to the contribution summary. | — |
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
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.GraphCells One or more labeled cell grids drawn side by side, each 1/0 matrix rendered with the filled or empty glyph.GraphCompare A grid comparing features against columns, where boolean cells become ✓/– and string cells pass through,…GraphCountdown Time left until a date.