Data viz.

/* Apply globally to money columns or wrap them with .tabular-nums */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

// Full currency for tables and ledgers
const fmtMoney = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
fmtMoney.format(2408210.55); // "$2,408,210.55"

// Compact currency for KPIs and dashboards
const fmtCompact = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  notation: 'compact',
  compactDisplay: 'short',
  maximumFractionDigits: 1
});
fmtCompact.format(2408210); // "$2.4M"

// Signed percentage delta with locale-aware minus glyph
const fmtDelta = new Intl.NumberFormat('en-US', {
  style: 'percent',
  signDisplay: 'exceptZero',
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});
fmtDelta.format(0.124);   // "+12.4%"
fmtDelta.format(-0.018);  // "−1.8%"  (uses U+2212)

<script lang="ts">
	import { EnhancedTable, type EnhancedTableColumnDef } from '@dashfi/svelte/ui/enhanced-table';
	import { renderSnippet } from '@dashfi/svelte/ui/data-table';
	import { Pill } from '@dashfi/svelte/ui/pill';

	type LedgerStatus = 'posted' | 'pending';
	type LedgerRow = {
		id: string;
		date: string;
		merchant: string;
		card: string;
		amount: number;
		status: LedgerStatus;
	};

	const rows: LedgerRow[] = [/* ... */];

	// signDisplay: 'exceptZero' emits the U+2212 minus glyph automatically.
	const fmtAmount = new Intl.NumberFormat('en-US', {
		style: 'currency',
		currency: 'USD',
		signDisplay: 'exceptZero',
		minimumFractionDigits: 2,
		maximumFractionDigits: 2
	});

	const columns: EnhancedTableColumnDef<LedgerRow>[] = [
		{ accessorKey: 'date', header: 'Date', sortable: true, cellClassName: 'font-mono tabular-nums' },
		{ accessorKey: 'merchant', header: 'Merchant', sortable: true },
		{ accessorKey: 'card', header: 'Card', cellClassName: 'text-muted-foreground' },
		{
			accessorKey: 'amount',
			header: 'Amount',
			sortable: true,
			align: 'right',
			cellClassName: 'font-mono tabular-nums',
			cell: ({ row }) => fmtAmount.format(row.getValue<number>('amount'))
		},
		{
			accessorKey: 'status',
			header: 'Status',
			cell: ({ row }) => renderSnippet(statusPill, row.getValue<LedgerStatus>('status'))
		}
	];
</script>

{#snippet statusPill(status: LedgerStatus)}
	<Pill type={status === 'pending' ? 'warning' : 'base'}>{status}</Pill>
{/snippet}

<EnhancedTable
	{columns}
	bind:data={rows}
	searchable
	searchPlaceholder="Search merchants or cards"
	pageSize={10}
/>