markgraphy 0.1.1

package/dist/graphs/GraphKpi.svelte

@@ -0,0 +1,166 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette } from '../frame/tone';
+
+	/** One headline number with label, optional hint, and a glyph sparkline. */
+	export interface GraphKpiProps {
+		title: string;
+		value: string;
+		label: string;
+		hint?: string;
+		data: number[];
+		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 { resolveGlyphs } from '../frame/glyphs';
+	import { isMonoPalette } from '../frame/tone';
+	import { reveal } from '../frame/motion';
+
+	let {
+		title,
+		value,
+		label,
+		hint,
+		data,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphKpiProps = $props();
+
+	const SPARK_DEFAULT = ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+
+	const set = $derived(glyphs == null ? SPARK_DEFAULT : resolveGlyphs(glyphs));
+	const max = $derived(Math.max(...data, 1));
+	const last = $derived(data.length - 1);
+	const mono = $derived(isMonoPalette(palette));
+
+	const points = $derived.by(() =>
+		data.map((entry) => {
+			const index = Math.round((entry / max) * (set.length - 1));
+			return set[index] ?? set[0] ?? '▁';
+		})
+	);
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="col">
+			<div class="head" use:reveal={{ amount: 0.5 }}>
+				<p class="value c-accent">{value}</p>
+				<div class="meta">
+					<p class="muted">{label}</p>
+					{#if hint}
+						<p class="muted">{hint}</p>
+					{/if}
+				</div>
+			</div>
+			{#if points.length > 0}
+				<div class="spark" aria-hidden="true" use:reveal={{ amount: 0.5 }}>
+					{#each points as glyph, i}
+						<span
+							class="pt"
+							class:c-accent={i === last}
+							class:c-muted={i !== last && mono}
+							class:c-accent2={i !== last && !mono}
+							class:dim={i !== last && mono}
+						>
+							{glyph}
+						</span>
+					{/each}
+				</div>
+			{/if}
+			<span class="sr-only">
+				{value}
+				{label}{#if hint}. {hint}{/if}
+			</span>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.col {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.head {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.value {
+		margin: 0;
+		font-size: 1.875rem;
+		line-height: 1.2;
+		letter-spacing: -0.025em;
+	}
+
+	@media (min-width: 640px) {
+		.value {
+			font-size: 2.25rem;
+		}
+	}
+
+	.meta {
+		display: flex;
+		align-items: baseline;
+		gap: 0.75rem;
+	}
+
+	.muted {
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.spark {
+		display: flex;
+		justify-content: flex-start;
+		gap: 0.125rem;
+		width: 100%;
+		min-width: 0;
+		user-select: none;
+	}
+
+	.pt {
+		flex: none;
+		min-width: 1ch;
+	}
+
+	.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));
+	}
+
+	.dim {
+		opacity: 0.4;
+	}
+
+	.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/GraphKpi.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+/** One headline number with label, optional hint, and a glyph sparkline. */
+export interface GraphKpiProps {
+    title: string;
+    value: string;
+    label: string;
+    hint?: string;
+    data: number[];
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphKpi: import("svelte").Component<GraphKpiProps, {}, "">;
+type GraphKpi = ReturnType<typeof GraphKpi>;
+export default GraphKpi;

package/dist/graphs/GraphLatency.svelte

@@ -0,0 +1,340 @@
+<script module lang="ts">
+	import type { GraphPalette } from '../frame/tone';
+
+	/** One percentile-banded data point: p50, p95, p99 in the same unit. */
+	export interface LatencyPoint {
+		p50: number;
+		p95: number;
+		p99: number;
+		/** Mark the column as a spike. The ^ marker is drawn above it. */
+		spike?: boolean;
+	}
+
+	/**
+	 * Percentile band chart. Each column is stacked: the p50 fill (█) at the
+	 * bottom, then p50→p95 (▓), then p95→p99 (▒). Spike markers appear above
+	 * columns whose point sets `spike: true`.
+	 */
+	export interface GraphLatencyProps {
+		title: string;
+		data: LatencyPoint[];
+		unit?: string;
+		height?: number;
+		labels?: [string, string];
+		max?: number;
+		palette?: GraphPalette;
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import GraphRule from '../frame/GraphRule.svelte';
+	import { isMonoPalette } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		data,
+		unit = 'ms',
+		height = 8,
+		labels,
+		max,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphLatencyProps = $props();
+
+	const mono = $derived(isMonoPalette(palette));
+
+	function formatTick(value: number): string {
+		if (!Number.isFinite(value)) {
+			return '0';
+		}
+		if (Number.isInteger(value)) {
+			return value.toString();
+		}
+		return value.toFixed(1);
+	}
+
+	function formatMs(value: number): string {
+		if (value >= 1000) {
+			return `${(value / 1000).toFixed(value >= 10_000 ? 0 : 1)}s`;
+		}
+		return `${Math.round(value)}`;
+	}
+
+	const view = $derived.by(() => {
+		const rows = Math.max(3, Math.min(15, height));
+		const cap = max ?? data.reduce((m, point) => Math.max(m, point.p99, point.p95, point.p50), 0);
+		const scale = cap > 0 ? cap : 1;
+		const start = labels?.[0];
+		const end = labels?.[1];
+		const lastP50 = data.at(-1)?.p50 ?? 0;
+		const lastP95 = data.at(-1)?.p95 ?? 0;
+		const lastP99 = data.at(-1)?.p99 ?? 0;
+		const peakP99 = data.reduce((m, point) => Math.max(m, point.p99), 0);
+		const spikeCount = data.filter((point) => point.spike).length;
+		return { rows, cap, scale, start, end, lastP50, lastP95, lastP99, peakP99, spikeCount };
+	});
+
+	function levelOf(value: number, scale: number, rows: number): number {
+		return Math.min(rows, Math.max(0, Math.round((value / scale) * rows)));
+	}
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="lat">
+			<div class="spikes" aria-hidden="true">
+				<span class="yscale" aria-hidden="true">&nbsp;</span>
+				<span class="row">
+					{#each data as point, i (i)}
+						<span class="spike" class:on={point.spike}>{point.spike ? '^' : ' '}</span>
+					{/each}
+				</span>
+			</div>
+			<div class="plotrow" style:--plot-h={view.rows}>
+				<div class="yscale">
+					<span>{formatTick(view.cap)}</span>
+					<span>{formatTick(0)}</span>
+				</div>
+				<div class="plot" aria-hidden="true">
+					{#each data as point, i (i)}
+						{@const p50 = Math.max(1, levelOf(point.p50, view.scale, view.rows))}
+						{@const p95 = Math.max(p50, levelOf(point.p95, view.scale, view.rows))}
+						{@const p99 = Math.max(p95, levelOf(point.p99, view.scale, view.rows))}
+						<span class="col" use:reveal={{ delay: stagger(i, 18), amount: 0.4 }}>
+							{#each Array.from({ length: view.rows }) as _, rowIndex}
+								{@const fromBottom = view.rows - 1 - rowIndex}
+								{@const tier =
+									fromBottom < p50 ? 0 : fromBottom < p95 ? 1 : fromBottom < p99 ? 2 : 3}
+								<span
+									class="cellrow"
+									class:c-p50={tier === 0}
+									class:c-p95={tier === 1 && !mono}
+									class:c-p95m={tier === 1 && mono}
+									class:c-p99={tier === 2 && !mono}
+									class:c-p99m={tier === 2 && mono}
+									class:transparent={tier === 3}
+								>
+									{tier === 0 ? '█' : tier === 1 ? '▓' : tier === 2 ? '▒' : ' '}
+								</span>
+							{/each}
+						</span>
+					{/each}
+				</div>
+			</div>
+			{#if view.start || view.end}
+				<div class="axisrow">
+					<span class="spacer" aria-hidden="true">{formatTick(view.cap)}</span>
+					<div class="rulewrap">
+						<GraphRule />
+					</div>
+				</div>
+				<div class="axisrow">
+					<span class="spacer" aria-hidden="true">{formatTick(view.cap)}</span>
+					<div class="axislabels">
+						<span>{view.start}</span>
+						{#if view.end && view.end !== view.start}
+							<span>{view.end}</span>
+						{/if}
+					</div>
+				</div>
+			{/if}
+
+			<dl class="stats" aria-label="percentile summary">
+				<div class="stat">
+					<dt>p50</dt>
+					<dd>{formatMs(view.lastP50)}{unit}</dd>
+				</div>
+				<div class="stat">
+					<dt>p95</dt>
+					<dd class:accent={!mono}>{formatMs(view.lastP95)}{unit}</dd>
+				</div>
+				<div class="stat">
+					<dt>p99</dt>
+					<dd class:accent={!mono && palette === 'multi'}>{formatMs(view.lastP99)}{unit}</dd>
+				</div>
+				<div class="stat">
+					<dt>peak p99</dt>
+					<dd>{formatMs(view.peakP99)}{unit}</dd>
+				</div>
+				<div class="stat">
+					<dt>spikes</dt>
+					<dd class:accent={view.spikeCount > 0 && !mono}>{view.spikeCount}</dd>
+				</div>
+			</dl>
+			<span class="sr-only">
+				Latency band chart. {data.length} points. Last p50 {formatMs(view.lastP50)} {unit},
+				p95 {formatMs(view.lastP95)} {unit}, p99 {formatMs(view.lastP99)} {unit}.
+				{view.spikeCount} spike{view.spikeCount === 1 ? '' : 's'}.
+			</span>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.lat {
+		display: flex;
+		flex-direction: column;
+		gap: 0.6rem;
+	}
+
+	.spikes {
+		display: flex;
+		gap: 0.75rem;
+		height: 1em;
+	}
+
+	.plotrow {
+		display: flex;
+		gap: 0.75rem;
+	}
+
+	.yscale {
+		display: flex;
+		width: 4ch;
+		flex-shrink: 0;
+		flex-direction: column;
+		align-items: flex-end;
+		justify-content: space-between;
+		padding: 1px 0;
+		height: calc(var(--plot-h, 8) * 1em);
+		text-align: right;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.spacer {
+		width: 4ch;
+		flex-shrink: 0;
+		visibility: hidden;
+	}
+
+	.row {
+		display: flex;
+		flex: 1;
+		min-width: 0;
+		justify-content: center;
+		gap: 0.125rem;
+		user-select: none;
+	}
+
+	.spike {
+		flex: none;
+		min-width: 1ch;
+		text-align: center;
+		color: transparent;
+	}
+
+	.spike.on {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.plot {
+		display: flex;
+		flex: 1;
+		min-width: 0;
+		align-items: flex-end;
+		justify-content: center;
+		gap: 0.125rem;
+		height: calc(var(--plot-h, 8) * 1em);
+		user-select: none;
+	}
+
+	.col {
+		display: flex;
+		height: 100%;
+		min-width: 1ch;
+		flex-direction: column;
+		justify-content: flex-end;
+	}
+
+	.cellrow {
+		width: 100%;
+		height: 1em;
+		text-align: center;
+	}
+
+	.transparent {
+		color: transparent;
+	}
+
+	.axisrow {
+		display: flex;
+		gap: 0.75rem;
+	}
+
+	.rulewrap {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.axislabels {
+		display: flex;
+		flex: 1;
+		justify-content: space-between;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.stats {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 0.5rem 1.25rem;
+		margin: 0.25rem 0 0;
+	}
+
+	.stat {
+		display: flex;
+		align-items: baseline;
+		gap: 0.4rem;
+	}
+
+	.stat dt {
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.stat dd {
+		margin: 0;
+	}
+
+	.c-p50 {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.c-p95 {
+		color: var(--graph-accent-2, oklch(0.78 0.12 70));
+	}
+
+	.c-p95m {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.c-p99 {
+		color: var(--graph-accent-3, oklch(0.72 0.13 30));
+	}
+
+	.c-p99m {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.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/GraphLatency.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { GraphPalette } from '../frame/tone';
+/** One percentile-banded data point: p50, p95, p99 in the same unit. */
+export interface LatencyPoint {
+    p50: number;
+    p95: number;
+    p99: number;
+    /** Mark the column as a spike. The ^ marker is drawn above it. */
+    spike?: boolean;
+}
+/**
+ * Percentile band chart. Each column is stacked: the p50 fill (█) at the
+ * bottom, then p50→p95 (▓), then p95→p99 (▒). Spike markers appear above
+ * columns whose point sets `spike: true`.
+ */
+export interface GraphLatencyProps {
+    title: string;
+    data: LatencyPoint[];
+    unit?: string;
+    height?: number;
+    labels?: [string, string];
+    max?: number;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphLatency: import("svelte").Component<GraphLatencyProps, {}, "">;
+type GraphLatency = ReturnType<typeof GraphLatency>;
+export default GraphLatency;

package/dist/graphs/GraphMeter.svelte

@@ -0,0 +1,121 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette } from '../frame/tone';
+
+	/** Horizontal progress bar that spans the frame: [ = = = - - - ] 42%. */
+	export interface GraphMeterProps {
+		title: string;
+		value: number;
+		ticks?: 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 GraphTrack from '../frame/GraphTrack.svelte';
+	import GraphTick from '../frame/GraphTick.svelte';
+	import { reveal } from '../frame/motion';
+	import { trackMarks } from '../frame/glyphs';
+
+	let {
+		title,
+		value,
+		ticks = 14,
+		caption,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphMeterProps = $props();
+
+	const clamped = $derived(Math.min(1, Math.max(0, value)));
+	const filled = $derived(Math.round(clamped * ticks));
+	const marks = $derived(trackMarks(glyphs, { empty: '-', rest: '=', fill: '=' }));
+	const indexes = $derived(Array.from({ length: ticks }, (_, i) => i));
+	const percent = $derived(Math.round(clamped * 100));
+	const spoken = $derived(`${percent} percent${caption ? ` ${caption}` : ''}`);
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="meter" use:reveal={{ amount: 0.5 }}>
+			<p class="bar">
+				<span class="brace" aria-hidden="true">[</span>
+				<GraphTrack>
+					{#each indexes as index (index)}
+						<GraphTick>
+							<span class="g" class:fill={index < filled}>
+								{index < filled ? marks.fill : marks.empty}
+							</span>
+						</GraphTick>
+					{/each}
+				</GraphTrack>
+				<span class="brace" aria-hidden="true">]</span>
+				<span class="pct">{percent}%</span>
+			</p>
+			{#if caption}
+				<p class="muted">{caption}</p>
+			{/if}
+			<span class="sr-only">{spoken}</span>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.meter {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.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: 4ch;
+		flex-shrink: 0;
+		text-align: right;
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.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/GraphMeter.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+/** Horizontal progress bar that spans the frame: [ = = = - - - ] 42%. */
+export interface GraphMeterProps {
+    title: string;
+    value: number;
+    ticks?: number;
+    caption?: string;
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphMeter: import("svelte").Component<GraphMeterProps, {}, "">;
+type GraphMeter = ReturnType<typeof GraphMeter>;
+export default GraphMeter;