markgraphy 0.1.1

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

@@ -0,0 +1,15 @@
+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;
+}
+declare const GraphSpark: import("svelte").Component<GraphSparkProps, {}, "">;
+type GraphSpark = ReturnType<typeof GraphSpark>;
+export default GraphSpark;

package/dist/graphs/GraphSpec.svelte

@@ -0,0 +1,69 @@
+<script module lang="ts">
+	export interface SpecRow {
+		label: string;
+		value: string;
+		accent?: boolean;
+	}
+
+	export interface GraphSpecProps {
+		title: string;
+		rows: SpecRow[];
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		rows,
+		corner,
+		class: className = ''
+	}: GraphSpecProps = $props();
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<dl class="rows">
+			{#each rows as row, i (row.label)}
+				<div class="row" use:reveal={{ delay: stagger(i, 40), amount: 0.5 }}>
+					<dt class="muted">{row.label}</dt>
+					<dd class="value" class:accent={row.accent}>{row.value}</dd>
+				</div>
+			{/each}
+		</dl>
+	</GraphBody>
+</Graph>
+
+<style>
+	.rows {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		margin: 0;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
+		align-items: baseline;
+		column-gap: 1.5rem;
+	}
+
+	.muted {
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.value {
+		margin: 0;
+	}
+
+	.value.accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+</style>

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

@@ -0,0 +1,14 @@
+export interface SpecRow {
+    label: string;
+    value: string;
+    accent?: boolean;
+}
+export interface GraphSpecProps {
+    title: string;
+    rows: SpecRow[];
+    corner?: string;
+    class?: string;
+}
+declare const GraphSpec: import("svelte").Component<GraphSpecProps, {}, "">;
+type GraphSpec = ReturnType<typeof GraphSpec>;
+export default GraphSpec;

package/dist/graphs/GraphStack.svelte

@@ -0,0 +1,266 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette } from '../frame/tone';
+
+	/** One part of a whole. */
+	export interface StackSegment {
+		label: string;
+		value: number;
+	}
+
+	/** One stacked track made of segments. */
+	export interface StackRow {
+		label: string;
+		segments: StackSegment[];
+	}
+
+	export interface GraphStackProps {
+		title: string;
+		rows: StackRow[];
+		accent?: string;
+		ticks?: 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 GraphTrack from '../frame/GraphTrack.svelte';
+	import GraphTick from '../frame/GraphTick.svelte';
+	import { resolveGlyphs } from '../frame/glyphs';
+	import { isDim, isMonoPalette, seriesRole, type ToneRole } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		rows,
+		accent,
+		ticks = 24,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphStackProps = $props();
+
+	const DEFAULT_GLYPHS = ['█', '▓', '▒', '░', '#', '=', '+', '-'];
+
+	interface Piece {
+		label: string;
+		glyph: string;
+		count: number;
+		highlighted: boolean;
+	}
+
+	function paintRow(
+		segments: StackSegment[],
+		tickCount: number,
+		set: readonly string[],
+		accentLabel?: string
+	): Piece[] {
+		const total = segments.reduce((sum, segment) => sum + segment.value, 0) || 1;
+		let left = tickCount;
+
+		return segments.map((segment, index) => {
+			const raw = Math.round((segment.value / total) * tickCount);
+			const count =
+				index === segments.length - 1
+					? Math.max(0, left)
+					: Math.min(Math.max(0, raw), left);
+			left -= count;
+			const highlighted = accentLabel
+				? segment.label === accentLabel
+				: index === 0;
+
+			return {
+				label: segment.label,
+				glyph: set[index % set.length] ?? '█',
+				count,
+				highlighted
+			};
+		});
+	}
+
+	const mono = $derived(isMonoPalette(palette));
+	const set = $derived(glyphs == null ? DEFAULT_GLYPHS : resolveGlyphs(glyphs));
+
+	const legend = $derived.by(() => {
+		const names: string[] = [];
+
+		for (const row of rows) {
+			for (const segment of row.segments) {
+				if (!names.includes(segment.label)) {
+					names.push(segment.label);
+				}
+			}
+		}
+
+		return names.map((label, index) => {
+			const highlighted = mono ? (accent ? label === accent : index === 0) : true;
+
+			return {
+				label,
+				glyph: set[index % set.length] ?? '█',
+				role: seriesRole(palette, index),
+				dim: isDim(palette, highlighted),
+				highlighted
+			};
+		});
+	});
+
+	const view = $derived.by(() =>
+		rows.map((row) => {
+			const painted = paintRow(row.segments, ticks, set, accent);
+			const pieces = painted.flatMap((piece) => {
+				const role: ToneRole = seriesRole(palette, legend.findIndex((l) => l.label === piece.label));
+				const dim = isDim(palette, mono ? piece.highlighted : true);
+
+				return Array.from({ length: piece.count }, () => ({
+					glyph: piece.glyph,
+					role,
+					dim
+				}));
+			});
+
+			return {
+				label: row.label,
+				spoken: `${row.label}: ${row.segments
+					.map((segment) => `${segment.label} ${segment.value}`)
+					.join(', ')}`,
+				pieces
+			};
+		})
+	);
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="col">
+			<ul class="tracks" role="list">
+				{#each view as row, i (row.label)}
+					<li
+						class="track-row"
+						aria-label={row.spoken}
+						use:reveal={{ delay: stagger(i, 40), amount: 0.4 }}
+					>
+						<span class="label">{row.label}</span>
+						<GraphTrack>
+							{#each row.pieces as piece}
+								<GraphTick>
+									<span
+										class="g"
+										class:c-accent={piece.role === 'accent'}
+										class:c-accent2={piece.role === 'accent2'}
+										class:c-accent3={piece.role === 'accent3'}
+										class:c-fg={piece.role === 'foreground'}
+										class:dim={piece.dim}
+									>
+										{piece.glyph}
+									</span>
+								</GraphTick>
+							{/each}
+						</GraphTrack>
+					</li>
+				{/each}
+			</ul>
+			<ul class="legend" role="list">
+				{#each legend as entry (entry.label)}
+					<li class="key" class:dim={entry.dim}>
+						<span
+							class="g"
+							aria-hidden="true"
+							class:c-accent={entry.role === 'accent'}
+							class:c-accent2={entry.role === 'accent2'}
+							class:c-accent3={entry.role === 'accent3'}
+							class:c-fg={entry.role === 'foreground'}
+						>
+							{entry.glyph}
+						</span>
+						<span class:c-fg={entry.highlighted} class:c-muted={!entry.highlighted}>
+							{entry.label}
+						</span>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.col {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	.tracks {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.track-row {
+		display: grid;
+		grid-template-columns: 7rem minmax(0, 1fr);
+		column-gap: 1rem;
+		align-items: center;
+	}
+
+	.label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.legend {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 1rem;
+		row-gap: 0.25rem;
+	}
+
+	.key {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.g {
+		display: block;
+	}
+
+	.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-fg {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.dim {
+		opacity: 0.4;
+	}
+</style>

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

@@ -0,0 +1,25 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+/** One part of a whole. */
+export interface StackSegment {
+    label: string;
+    value: number;
+}
+/** One stacked track made of segments. */
+export interface StackRow {
+    label: string;
+    segments: StackSegment[];
+}
+export interface GraphStackProps {
+    title: string;
+    rows: StackRow[];
+    accent?: string;
+    ticks?: number;
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphStack: import("svelte").Component<GraphStackProps, {}, "">;
+type GraphStack = ReturnType<typeof GraphStack>;
+export default GraphStack;

package/dist/graphs/GraphStat.svelte

@@ -0,0 +1,103 @@
+<script module lang="ts">
+	/** Large figures with labels. Two to four numbers, no trend. */
+	export interface StatItem {
+		value: string;
+		label: string;
+		hint?: string;
+		accent?: boolean;
+	}
+
+	export interface GraphStatProps {
+		title: string;
+		items: StatItem[];
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		items,
+		corner,
+		class: className = ''
+	}: GraphStatProps = $props();
+
+	const columns = $derived(Math.min(items.length, 4));
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<ul
+			class="stats"
+			class:cols2={columns === 2}
+			class:cols3={columns === 3}
+			class:cols4={columns === 4}
+			role="list"
+		>
+			{#each items as item, i (item.label)}
+				<li class="stat" class:accent={item.accent} use:reveal={{ delay: stagger(i, 60) }}>
+					<p class="value">{item.value}</p>
+					<p class="muted">{item.label}</p>
+					{#if item.hint}
+						<p class="muted">{item.hint}</p>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	</GraphBody>
+</Graph>
+
+<style>
+	.stats {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 2rem;
+	}
+
+	@media (min-width: 640px) {
+		.cols2 {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+
+		.cols3 {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+		}
+
+		.cols4 {
+			grid-template-columns: repeat(4, minmax(0, 1fr));
+		}
+	}
+
+	.stat {
+		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;
+		}
+	}
+
+	.muted {
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.stat.accent .value {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+</style>

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

@@ -0,0 +1,16 @@
+/** Large figures with labels. Two to four numbers, no trend. */
+export interface StatItem {
+    value: string;
+    label: string;
+    hint?: string;
+    accent?: boolean;
+}
+export interface GraphStatProps {
+    title: string;
+    items: StatItem[];
+    corner?: string;
+    class?: string;
+}
+declare const GraphStat: import("svelte").Component<GraphStatProps, {}, "">;
+type GraphStat = ReturnType<typeof GraphStat>;
+export default GraphStat;

package/dist/graphs/GraphTable.svelte

@@ -0,0 +1,133 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/** Framed data table with an optional footer row for totals. */
+	export type Cell = Snippet | string | number;
+
+	export interface GraphTableProps {
+		title: string;
+		headers: string[];
+		rows: Cell[][];
+		footer?: Cell[];
+		align?: ('left' | 'right')[];
+		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 { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		headers,
+		rows,
+		footer,
+		align,
+		corner,
+		class: className = ''
+	}: GraphTableProps = $props();
+
+	function isSnippet(cell: Cell): cell is Snippet {
+		return typeof cell === 'function';
+	}
+
+	function alignOf(index: number): 'left' | 'right' {
+		return align?.[index] ?? (index === 0 ? 'left' : 'right');
+	}
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody tight>
+		<div class="scroll">
+			<table class="table">
+				<thead>
+					<tr>
+						{#each headers as header, i (header)}
+							<th scope="col" class="cell head" class:right={alignOf(i) === 'right'}>
+								{header}
+							</th>
+						{/each}
+					</tr>
+					<tr>
+						<th class="rulecell" colspan={headers.length}>
+							<GraphRule />
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each rows as row, r}
+						<tr use:reveal={{ delay: stagger(r, 40), amount: 0.4 }}>
+							{#each row as cell, c}
+								<td class="cell" class:right={alignOf(c) === 'right'}>
+									{#if isSnippet(cell)}{@render cell()}{:else}{cell}{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+				{#if footer}
+					<tfoot>
+						<tr>
+							<td class="rulecell pad" colspan={headers.length}>
+								<GraphRule />
+							</td>
+						</tr>
+						<tr>
+							{#each footer as cell, c}
+								<td class="cell foot" class:right={alignOf(c) === 'right'}>
+									{#if isSnippet(cell)}{@render cell()}{:else}{cell}{/if}
+								</td>
+							{/each}
+						</tr>
+						</tfoot>
+					{/if}
+			</table>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.scroll {
+		overflow-x: auto;
+	}
+
+	.table {
+		font-size: 0.875rem;
+		width: 100%;
+		min-width: 32rem;
+		border-collapse: separate;
+		border-spacing: 0;
+	}
+
+	.cell {
+		padding: 0.625rem 0.75rem;
+		white-space: nowrap;
+		text-align: left;
+	}
+
+	.cell.right {
+		text-align: right;
+	}
+
+	.cell.head {
+		padding-bottom: 0.75rem;
+		font-weight: 400;
+	}
+
+	.cell.foot {
+		padding-top: 0.25rem;
+	}
+
+	.rulecell {
+		padding: 0;
+	}
+
+	.rulecell.pad {
+		padding-top: 0.5rem;
+		padding-bottom: 0.75rem;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+/** Framed data table with an optional footer row for totals. */
+export type Cell = Snippet | string | number;
+export interface GraphTableProps {
+    title: string;
+    headers: string[];
+    rows: Cell[][];
+    footer?: Cell[];
+    align?: ('left' | 'right')[];
+    corner?: string;
+    class?: string;
+}
+declare const GraphTable: import("svelte").Component<GraphTableProps, {}, "">;
+type GraphTable = ReturnType<typeof GraphTable>;
+export default GraphTable;