markgraphy 0.1.1

package/dist/graphs/GraphRank.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+/** One ranked row: label, a full-width glyph bar, and the value. */
+export interface RankItem {
+    label: string;
+    value: number;
+    display?: string;
+}
+export interface GraphRankProps {
+    title: string;
+    items: RankItem[];
+    max?: number;
+    ticks?: number;
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphRank: import("svelte").Component<GraphRankProps, {}, "">;
+type GraphRank = ReturnType<typeof GraphRank>;
+export default GraphRank;

package/dist/graphs/GraphSlo.svelte

@@ -0,0 +1,325 @@
+<script module lang="ts">
+	/**
+	 * Error-budget burn bar. One fill for spent, a dim trail for the remaining
+	 * budget, plus window, burn rate, time-to-empty, target, and actual.
+	 * Pairs with GraphLatency, GraphUptime, and GraphPulse.
+	 */
+	export interface GraphSloProps {
+		title: string;
+		/** Fraction of the error budget consumed, 0–1. */
+		budget: number;
+		/** Window length in the chosen unit. Default 30. */
+		window?: number;
+		/** Window unit. Default 'd'. */
+		unit?: 'h' | 'd' | 'w' | 'mo';
+		/** Allowed error rate as a fraction, e.g. 0.001 for 99.9%. */
+		target?: number;
+		/** Actual error rate as a fraction. */
+		actual?: number;
+		/** Burn rate multiplier (1 = on pace). If set, takes precedence over elapsed. */
+		burnRate?: number;
+		/** Days (or hours, weeks) elapsed so far. Used to compute time-to-empty. */
+		elapsed?: number;
+		/** Optional sparkline of daily burn samples, 0..1 each. */
+		daily?: number[];
+		/** Optional caption below the panel. */
+		caption?: string;
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import GraphTrack from '../frame/GraphTrack.svelte';
+	import GraphTick from '../frame/GraphTick.svelte';
+	import { reveal, stagger } from '../frame/motion';
+	import { trackMarks } from '../frame/glyphs';
+
+	let {
+		title,
+		budget,
+		window = 30,
+		unit = 'd',
+		target,
+		actual,
+		burnRate,
+		elapsed,
+		daily,
+		caption,
+		corner,
+		class: className = ''
+	}: GraphSloProps = $props();
+
+	const ticks = 24;
+
+	const view = $derived.by(() => {
+		const spent = Math.min(1, Math.max(0, budget));
+		const remaining = 1 - spent;
+		const filled = Math.round(spent * ticks);
+		// burnRate, when set, is “× the on-pace rate”. When inferred from
+		// elapsed, the per-day pace is spent / elapsed, which is on-pace when
+		// spent equals elapsed/window. So inferredRate = pace * window.
+		const pace = elapsed != null && elapsed > 0 ? spent / elapsed : null;
+		const inferredRate = burnRate ?? (pace != null ? pace * window : null);
+		// timeToEmpty is in the chosen unit (days by default). Two paths:
+		//   burnRate path:    remaining window-budget at the given rate
+		//                    → remaining * window / burnRate
+		//   elapsed path:     remaining budget at the observed per-unit pace
+		//                    → remaining * elapsed / spent
+		const timeToEmpty =
+			burnRate != null
+				? (remaining * window) / burnRate
+				: pace != null && spent > 0
+					? (remaining * elapsed) / spent
+					: null;
+		const willExhaust =
+			timeToEmpty != null && elapsed != null ? timeToEmpty < window - elapsed : false;
+		const percent = Math.round(spent * 100);
+		const targetPct = target != null ? target * 100 : null;
+		const actualPct = actual != null ? actual * 100 : null;
+		return {
+			spent,
+			remaining,
+			filled,
+			inferredRate,
+			timeToEmpty,
+			willExhaust,
+			percent,
+			targetPct,
+			actualPct
+		};
+	});
+
+	const marks = $derived(trackMarks(undefined, { empty: '·', rest: '·', fill: '█' }));
+
+	function formatPct(n: number | null): string {
+		if (n == null) {
+			return '—';
+		}
+		if (n === 0) {
+			return '0%';
+		}
+		if (n < 0.01) {
+			return `${n.toFixed(3)}%`;
+		}
+		if (n < 1) {
+			return `${n.toFixed(2)}%`;
+		}
+		return `${n.toFixed(1)}%`;
+	}
+
+	function formatRate(n: number | null): string {
+		if (n == null) {
+			return '—';
+		}
+		return `${n.toFixed(n < 10 ? 2 : 1)}×`;
+	}
+
+	function formatEta(n: number | null, u: string): string {
+		if (n == null) {
+			return '—';
+		}
+		if (n < 0) {
+			return 'past due';
+		}
+		return `${n.toFixed(n < 10 ? 1 : 0)}${u}`;
+	}
+
+	const dailyPoints = $derived.by(() => {
+		if (!daily || daily.length === 0) {
+			return null;
+		}
+		const set = ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+		const max = Math.max(...daily, 0.001);
+		return daily.map((value) => {
+			const ratio = Math.min(1, Math.max(0, value / max));
+			return set[Math.min(7, Math.max(0, Math.round(ratio * 7)))] ?? '·';
+		});
+	});
+
+	const indexes = $derived(Array.from({ length: ticks }, (_, i) => i));
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="slo" use:reveal={{ amount: 0.5 }}>
+			{#if dailyPoints}
+				<p class="daily" aria-hidden="true">
+					<span class="daily-label">daily burn</span>
+					<span class="daily-spark">
+						{#each dailyPoints as glyph, i (`${glyph}-${i}`)}
+							<span class="cell">{glyph}</span>
+						{/each}
+					</span>
+				</p>
+			{/if}
+			<p class="bar">
+				<span class="brace" aria-hidden="true">[</span>
+				<GraphTrack>
+					{#each indexes as index, i (index)}
+						<GraphTick>
+							<span
+								class="g"
+								class:fill={index < view.filled}
+								use:reveal={{ delay: stagger(i, 14), amount: 0.4 }}
+							>
+								{index < view.filled ? marks.fill : marks.empty}
+							</span>
+						</GraphTick>
+					{/each}
+				</GraphTrack>
+				<span class="brace" aria-hidden="true">]</span>
+				<span class="pct" class:warn={view.willExhaust}>{view.percent}%</span>
+			</p>
+			<dl class="rows">
+				<div class="row">
+					<dt>window</dt>
+					<dd>{window}{unit}</dd>
+				</div>
+				<div class="row">
+					<dt>burn rate</dt>
+					<dd class:warn={view.inferredRate != null && view.inferredRate > 1}>
+						{formatRate(view.inferredRate)}
+					</dd>
+				</div>
+				<div class="row">
+					<dt>time-to-empty</dt>
+					<dd class:warn={view.willExhaust}>{formatEta(view.timeToEmpty, unit)}</dd>
+				</div>
+				<div class="row">
+					<dt>target</dt>
+					<dd>{formatPct(view.targetPct)}</dd>
+				</div>
+				<div class="row">
+					<dt>actual</dt>
+					<dd class:warn={view.targetPct != null && view.actualPct != null && view.actualPct > view.targetPct}>
+						{formatPct(view.actualPct)}
+					</dd>
+				</div>
+			</dl>
+			{#if view.willExhaust}
+				<p class="flag">↗ will exhaust the budget before the window closes</p>
+			{/if}
+			{#if caption}
+				<p class="muted">{caption}</p>
+			{/if}
+			<span class="sr-only">
+				Error budget {view.percent} percent spent of a {window}{unit} window
+				{#if view.inferredRate != null}, burn rate {formatRate(view.inferredRate)}{/if}
+				{#if view.timeToEmpty != null}, time to empty {formatEta(view.timeToEmpty, unit)}{/if}.
+			</span>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.slo {
+		display: flex;
+		flex-direction: column;
+		gap: 0.85rem;
+	}
+
+	.daily {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		margin: 0;
+	}
+
+	.daily-label {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.daily-spark {
+		display: inline-flex;
+		gap: 0.125rem;
+		user-select: none;
+	}
+
+	.cell {
+		min-width: 1ch;
+		text-align: center;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.bar {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		column-gap: 0.75rem;
+		margin: 0;
+	}
+
+	.brace {
+		user-select: none;
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.g {
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.g.fill {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.pct {
+		width: 5ch;
+		flex-shrink: 0;
+		text-align: right;
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.pct.warn,
+	.warn {
+		color: var(--graph-accent-3, oklch(0.72 0.13 30));
+	}
+
+	.rows {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 0.35rem 1.25rem;
+		margin: 0;
+	}
+
+	.row {
+		display: flex;
+		align-items: baseline;
+		gap: 0.4rem;
+	}
+
+	.row dt {
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.row dd {
+		margin: 0;
+	}
+
+	.flag {
+		margin: 0;
+		text-align: center;
+		color: var(--graph-accent-3, oklch(0.72 0.13 30));
+	}
+
+	.muted {
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border-width: 0;
+	}
+</style>

package/dist/graphs/GraphSlo.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Error-budget burn bar. One fill for spent, a dim trail for the remaining
+ * budget, plus window, burn rate, time-to-empty, target, and actual.
+ * Pairs with GraphLatency, GraphUptime, and GraphPulse.
+ */
+export interface GraphSloProps {
+    title: string;
+    /** Fraction of the error budget consumed, 0–1. */
+    budget: number;
+    /** Window length in the chosen unit. Default 30. */
+    window?: number;
+    /** Window unit. Default 'd'. */
+    unit?: 'h' | 'd' | 'w' | 'mo';
+    /** Allowed error rate as a fraction, e.g. 0.001 for 99.9%. */
+    target?: number;
+    /** Actual error rate as a fraction. */
+    actual?: number;
+    /** Burn rate multiplier (1 = on pace). If set, takes precedence over elapsed. */
+    burnRate?: number;
+    /** Days (or hours, weeks) elapsed so far. Used to compute time-to-empty. */
+    elapsed?: number;
+    /** Optional sparkline of daily burn samples, 0..1 each. */
+    daily?: number[];
+    /** Optional caption below the panel. */
+    caption?: string;
+    corner?: string;
+    class?: string;
+}
+declare const GraphSlo: import("svelte").Component<GraphSloProps, {}, "">;
+type GraphSlo = ReturnType<typeof GraphSlo>;
+export default GraphSlo;

package/dist/graphs/GraphSlope.svelte

@@ -0,0 +1,197 @@
+<script module lang="ts">
+	import type { GraphPalette } from '../frame/tone';
+
+	/** One before → after row. */
+	export interface SlopeItem {
+		label: string;
+		from: number;
+		to: number;
+	}
+
+	export interface GraphSlopeProps {
+		title: string;
+		fromLabel: string;
+		toLabel: string;
+		items: SlopeItem[];
+		palette?: GraphPalette;
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { toneRole } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		fromLabel,
+		toLabel,
+		items,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphSlopeProps = $props();
+
+	function format(value: number) {
+		return value.toLocaleString('en-US', {
+			maximumFractionDigits: Number.isInteger(value) ? 0 : 1
+		});
+	}
+
+	const rows = $derived.by(() =>
+		items.map((row) => {
+			const up = row.to > row.from;
+			const down = row.to < row.from;
+			const arrowRole = up
+				? toneRole(palette, 'primary')
+				: down
+					? toneRole(palette, 'secondary')
+					: 'empty';
+			const toRole = up
+				? 'accent'
+				: down
+					? toneRole(palette, 'secondary')
+					: 'foreground';
+
+			return {
+				label: row.label,
+				spoken: `${row.label} from ${format(row.from)} to ${format(row.to)}`,
+				from: format(row.from),
+				to: format(row.to),
+				arrow: up || down ? '→' : '–',
+				arrowRole,
+				toRole
+			};
+		})
+	);
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="col">
+			<div class="head">
+				<span></span>
+				<span class="hlabel">{fromLabel}</span>
+				<span></span>
+				<span class="hlabel">{toLabel}</span>
+			</div>
+			<ul class="rows" role="list">
+				{#each rows as row, i (row.label)}
+					<li
+						class="row"
+						aria-label={row.spoken}
+						use:reveal={{ delay: stagger(i, 40), amount: 0.4 }}
+					>
+						<span class="label">{row.label}</span>
+						<span class="num muted">{row.from}</span>
+						<span
+							class="arrow"
+							aria-hidden="true"
+							class:c-accent={row.arrowRole === 'accent'}
+							class:c-accent2={row.arrowRole === 'accent2'}
+							class:c-accent3={row.arrowRole === 'accent3'}
+							class:c-muted={row.arrowRole === 'muted'}
+							class:c-frame={row.arrowRole === 'empty'}
+						>
+							{row.arrow}
+						</span>
+						<span
+							class="num"
+							class:c-accent={row.toRole === 'accent'}
+							class:c-accent2={row.toRole === 'accent2'}
+							class:c-accent3={row.toRole === 'accent3'}
+							class:c-muted={row.toRole === 'muted'}
+							class:c-fg={row.toRole === 'foreground'}
+						>
+							{row.to}
+						</span>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.col {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.head {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) 6.5rem 2rem 6.5rem;
+		column-gap: 0.75rem;
+		align-items: end;
+	}
+
+	.hlabel {
+		text-align: right;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.rows {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) 6.5rem 2rem 6.5rem;
+		column-gap: 0.75rem;
+		align-items: baseline;
+	}
+
+	.label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.num {
+		text-align: right;
+	}
+
+	.muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.arrow {
+		text-align: center;
+		user-select: none;
+	}
+
+	.c-accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.c-accent2 {
+		color: var(--graph-accent-2, oklch(0.78 0.12 70));
+	}
+
+	.c-accent3 {
+		color: var(--graph-accent-3, oklch(0.75 0.1 200));
+	}
+
+	.c-muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.c-frame {
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.c-fg {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+</style>

package/dist/graphs/GraphSlope.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { GraphPalette } from '../frame/tone';
+/** One before → after row. */
+export interface SlopeItem {
+    label: string;
+    from: number;
+    to: number;
+}
+export interface GraphSlopeProps {
+    title: string;
+    fromLabel: string;
+    toLabel: string;
+    items: SlopeItem[];
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphSlope: import("svelte").Component<GraphSlopeProps, {}, "">;
+type GraphSlope = ReturnType<typeof GraphSlope>;
+export default GraphSlope;

package/dist/graphs/GraphSpark.svelte

@@ -0,0 +1,125 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette } from '../frame/tone';
+
+	/** Packed 1ch sparkline, centered with a small gap. Never stretched. */
+	export interface GraphSparkProps {
+		title: string;
+		data: number[];
+		caption?: string;
+		glyphs?: Glyphs;
+		palette?: GraphPalette;
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { reveal } from '../frame/motion';
+	import { resolveGlyphs } from '../frame/glyphs';
+	import { isMonoPalette, toneRole } from '../frame/tone';
+
+	const SPARK_DEFAULT: readonly string[] = ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+
+	let {
+		title,
+		data,
+		caption,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphSparkProps = $props();
+
+	const max = $derived(Math.max(...data, 1));
+	const last = $derived(data.length - 1);
+	const mono = $derived(isMonoPalette(palette));
+	const set = $derived(glyphs == null ? SPARK_DEFAULT : resolveGlyphs(glyphs));
+	const points = $derived(
+		data.map((value) => {
+			const index = Math.round((value / max) * (set.length - 1));
+			return set[index] ?? set[0] ?? '▁';
+		})
+	);
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="sparkwrap" use:reveal={{ amount: 0.5 }}>
+			<span class="spark" aria-hidden="true">
+				{#each points as glyph, index (`${glyph}-${index}`)}
+					{@const live = index === last}
+					{@const role = live ? 'accent' : toneRole(palette, 'secondary')}
+					<span
+						class="cell"
+						class:c-accent={role === 'accent'}
+						class:c-accent2={role === 'accent2'}
+						class:c-muted={role === 'muted'}
+						class:recede={!live && mono}
+					>{glyph}</span>
+				{/each}
+			</span>
+			{#if caption}
+				<p class="muted">{caption}</p>
+			{/if}
+			<span class="sr-only">Sparkline with {data.length} points{caption ? `. ${caption}` : ''}</span>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.sparkwrap {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.spark {
+		display: flex;
+		justify-content: center;
+		column-gap: 0.125rem;
+		user-select: none;
+	}
+
+	.cell {
+		flex: none;
+		min-width: 1ch;
+		text-align: center;
+	}
+
+	.cell.recede {
+		opacity: 0.4;
+	}
+
+	.c-accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.c-accent2 {
+		color: var(--graph-accent-2, oklch(0.78 0.12 70));
+	}
+
+	.c-muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.muted {
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border-width: 0;
+	}
+</style>