monero balance chart: add 1D/1W/1M/1Y/ALL range filter buttons

Filter buttons always visible in Card header so user can change range even when filtered data is empty. Chart hidden behind {#if chartData.length > 1} with 'No transactions in this time range.' fallback.

chart-tooltip.svelte: add valueFormatter prop for custom value formatting

apps/desktop/src/lib/components/ui/chart/chart-tooltip.svelte

@@ -1,20 +1,31 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from "./chart-utils.js";
-	import { getChartContext, Tooltip as TooltipPrimitive } from "layerchart";
-	import type { Snippet } from "svelte";
+	import {
+		cn,
+		type WithElementRef,
+		type WithoutChildren,
+	} from '$lib/utils.js'
+	import type { HTMLAttributes } from 'svelte/elements'
+	import {
+		getPayloadConfigFromPayload,
+		useChart,
+		type TooltipPayload,
+	} from './chart-utils.js'
+	import {
+		getChartContext,
+		Tooltip as TooltipPrimitive,
+	} from 'layerchart'
+	import type { Snippet } from 'svelte'
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	function defaultFormatter(value: any, _payload: TooltipPayload[]) {
-		return `${value}`;
+		return `${value}`
 	}
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		hideLabel = false,
-		indicator = "dot",
+		indicator = 'dot',
 		hideIndicator = false,
 		labelKey,
 		label,
@@ -22,78 +33,95 @@
 		labelClassName,
 		formatter,
 		nameKey,
+		valueFormatter,
 		color,
 		...restProps
-	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
-		hideLabel?: boolean;
-		label?: string;
-		indicator?: "line" | "dot" | "dashed";
-		nameKey?: string;
-		labelKey?: string;
-		hideIndicator?: boolean;
-		labelClassName?: string;
+	}: WithoutChildren<
+		WithElementRef<HTMLAttributes<HTMLDivElement>>
+	> & {
+		hideLabel?: boolean
+		label?: string
+		indicator?: 'line' | 'dot' | 'dashed'
+		nameKey?: string
+		labelKey?: string
+		hideIndicator?: boolean
+		labelClassName?: string
 		labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-			((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+			| ((
+					value: any,
+					payload: TooltipPayload[],
+			  ) => string | number | Snippet)
+			| null
 		formatter?: Snippet<
 			[
 				{
-					value: unknown;
-					name: string;
-					item: TooltipPayload;
-					index: number;
-					payload: TooltipPayload[];
+					value: unknown
+					name: string
+					item: TooltipPayload
+					index: number
+					payload: TooltipPayload[]
 				},
 			]
-		>;
-	} = $props();
+		>
+		valueFormatter?:
+			| ((value: any) => string | number | Snippet)
+			| null
+	} = $props()
 
-	const chart = useChart();
-	const chartCtx = getChartContext();
+	const chart = useChart()
+	const chartCtx = getChartContext()
 
 	// Filter to series with defined values (important for item-based charts like Pie/Arc
 	// where only the hovered item has a value)
 	const visibleSeries = $derived(
-		chartCtx.tooltip.series.filter((s: TooltipPayload) => s.value !== undefined)
-	);
+		chartCtx.tooltip.series.filter(
+			(s: TooltipPayload) => s.value !== undefined,
+		),
+	)
 
 	const formattedLabel = $derived.by(() => {
-		if (hideLabel || !visibleSeries?.length) return null;
+		if (hideLabel || !visibleSeries?.length) return null
 
-		const [item] = visibleSeries;
-		const tooltipData = chartCtx.tooltip.data;
+		const [item] = visibleSeries
+		const tooltipData = chartCtx.tooltip.data
 
 		// Get the x-axis label value from the raw tooltip data (e.g. a Date or month string)
-		const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined;
+		const dataLabel =
+			tooltipData != null ? chartCtx.x(tooltipData) : undefined
 
-		const key = labelKey ?? item?.label ?? item?.key ?? "value";
+		const key = labelKey ?? item?.label ?? item?.key ?? 'value'
 		const itemConfig = getPayloadConfigFromPayload(
 			chart.config,
 			item,
 			key,
-			tooltipData as Record<string, unknown> | null
-		);
+			tooltipData as Record<string, unknown> | null,
+		)
 
-		let value: unknown;
-		if (!labelKey && typeof label === "string") {
-			value = chart.config[label as keyof typeof chart.config]?.label ?? label;
+		let value: unknown
+		if (!labelKey && typeof label === 'string') {
+			value =
+				chart.config[label as keyof typeof chart.config]?.label ??
+				label
 		} else if (labelKey) {
-			value = itemConfig?.label ?? dataLabel;
+			value = itemConfig?.label ?? dataLabel
 		} else {
-			value = dataLabel;
+			value = dataLabel
 		}
 
-		if (value === undefined) return null;
-		if (!labelFormatter) return value;
-		return labelFormatter(value, visibleSeries);
-	});
+		if (value === undefined) return null
+		if (!labelFormatter) return value
+		return labelFormatter(value, visibleSeries)
+	})
 
-	const nestLabel = $derived(visibleSeries.length === 1 && indicator !== "dot");
+	const nestLabel = $derived(
+		visibleSeries.length === 1 && indicator !== 'dot',
+	)
 </script>
 
 {#snippet TooltipLabel()}
 	{#if formattedLabel}
-		<div class={cn("font-medium", labelClassName)}>
-			{#if typeof formattedLabel === "function"}
+		<div class={cn('font-medium', labelClassName)}>
+			{#if typeof formattedLabel === 'function'}
 				{@render formattedLabel()}
 			{:else}
 				{formattedLabel}
@@ -106,30 +134,29 @@
 	<div
 		bind:this={ref}
 		class={cn(
-			"border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-			className
+			'border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+			className,
 		)}
-		{...restProps}
-	>
+		{...restProps}>
 		{#if !nestLabel}
 			{@render TooltipLabel()}
 		{/if}
 		<div class="grid gap-1.5">
 			{#each visibleSeries as item, i (item.key + i)}
-				{@const key = `${nameKey || item.key || item.label || "value"}`}
+				{@const key = `${nameKey || item.key || item.label || 'value'}`}
 				{@const itemConfig = getPayloadConfigFromPayload(
 					chart.config,
 					item,
 					key,
-					chartCtx.tooltip.data
+					chartCtx.tooltip.data,
 				)}
-				{@const indicatorColor = color || item.config?.color || item.color}
+				{@const indicatorColor =
+					color || item.config?.color || item.color}
 				<div
 					class={cn(
-						"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
-						indicator === "dot" && "items-center"
-					)}
-				>
+						'[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5',
+						indicator === 'dot' && 'items-center',
+					)}>
 					{#if formatter && item.value !== undefined && item.label}
 						{@render formatter({
 							value: item.value,
@@ -145,23 +172,22 @@
 							<div
 								style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
 								class={cn(
-									"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+									'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
 									{
-										"size-2.5": indicator === "dot",
-										"h-full w-1": indicator === "line",
-										"w-0 border-[1.5px] border-dashed bg-transparent":
-											indicator === "dashed",
-										"my-0.5": nestLabel && indicator === "dashed",
-									}
-								)}
-							></div>
+										'size-2.5': indicator === 'dot',
+										'h-full w-1': indicator === 'line',
+										'w-0 border-[1.5px] border-dashed bg-transparent':
+											indicator === 'dashed',
+										'my-0.5': nestLabel && indicator === 'dashed',
+									},
+								)}>
+							</div>
 						{/if}
 						<div
 							class={cn(
-								"flex flex-1 shrink-0 justify-between leading-none",
-								nestLabel ? "items-end" : "items-center"
-							)}
-						>
+								'flex flex-1 shrink-0 justify-between leading-none',
+								nestLabel ? 'items-end' : 'items-center',
+							)}>
 							<div class="grid gap-1.5">
 								{#if nestLabel}
 									{@render TooltipLabel()}
@@ -171,8 +197,13 @@
 								</span>
 							</div>
 							{#if item.value !== undefined}
-								<span class="text-foreground font-mono font-medium tabular-nums">
-									{item.value.toLocaleString()}
+								<span
+									class="text-foreground font-mono font-medium tabular-nums">
+									{#if valueFormatter}
+										{valueFormatter(item.value)}
+									{:else}
+										{item.value.toLocaleString()}
+									{/if}
 								</span>
 							{/if}
 						</div>

apps/desktop/src/routes/monero/wallet/[name].svelte

@@ -53,6 +53,21 @@
 		estimatedFee: string
 	} | null>(null)
 	let moneroPrice = $state<{ usd: string } | null>(null)
+	let selectedRange = $state<'1D' | '1W' | '1M' | '1Y' | 'ALL'>('ALL')
+
+	const rangeCutoff = $derived(
+		selectedRange === 'ALL'
+			? 0
+			: Date.now() -
+					(
+						{
+							'1D': 86400000,
+							'1W': 604800000,
+							'1M': 2592000000,
+							'1Y': 31536000000,
+						} as const
+					)[selectedRange],
+	)
 
 	const balanceHistory = $derived.by(() => {
 		const sorted = [...w.txs].reverse()
@@ -75,7 +90,11 @@
 		return points
 	})
 
-	$inspect(balanceHistory)
+	const chartData = $derived(
+		selectedRange === 'ALL'
+			? balanceHistory
+			: balanceHistory.filter((p) => p.date.getTime() >= rangeCutoff),
+	)
 
 	let accountDialogOpen = $state(false)
 	let accountLabel = $state('')
@@ -353,62 +372,81 @@
 		{#if balanceHistory.length > 1}
 			<Card>
 				<CardHeader>
-					<CardTitle>Balance</CardTitle>
+					<div class="flex items-center justify-between">
+						<CardTitle>Balance</CardTitle>
+						<div class="flex gap-1">
+							{#each ['1D', '1W', '1M', '1Y', 'ALL'] as const as range}
+								<button
+									onclick={() => (selectedRange = range)}
+									class="rounded px-1.5 py-0.5 text-xs font-medium transition-colors {selectedRange ===
+									range
+										? 'bg-primary text-primary-foreground'
+										: 'text-muted-foreground hover:text-foreground'}">
+									{range}
+								</button>
+							{/each}
+						</div>
+					</div>
 				</CardHeader>
 				<CardContent>
-					<Chart.Container
-						config={{
-							balance: { label: 'XMR', color: 'var(--chart-1)' },
-						}}>
-						<LineChart
-							data={balanceHistory}
-							x="date"
-							xScale={scaleUtc()}
-							// axis="x"
-							points
-							series={[
-								{
-									key: 'balance',
-									label: 'XMR',
-									color: 'var(--chart-1)',
-								},
-							]}
-							yDomain={[
-								balanceHistory.reduce((a, b) =>
-									a.balance < b.balance ? a : b,
-								).balance,
-								balanceHistory.reduce((a, b) =>
-									a.balance > b.balance ? a : b,
-								).balance,
-							]}
-							props={{
-								spline: {
-									curve: curveLinear,
-									motion: 'tween',
-									strokeWidth: 2,
-								},
-								yAxis: {},
-								xAxis: {
-									format: (v: Date) =>
-										v.toLocaleDateString('en-US', {
-											month: 'short',
-											day: 'numeric',
-											// hour: '2-digit',
-										}),
-								},
-								highlight: { points: { r: 4 } },
+					{#if chartData.length > 1}
+						<Chart.Container
+							config={{
+								balance: { label: 'XMR', color: 'var(--chart-1)' },
 							}}>
-							{#snippet tooltip()}
-								<Chart.Tooltip
-									labelFormatter={(value: Date) => {
-										return value.toLocaleDateString()
-									}}
-									valueFormatter={(value: Number) => {
-										return value.toString().slice(0, 8)
-									}} />
-							{/snippet}
-						</LineChart>
-					</Chart.Container>
+							<LineChart
+								data={chartData}
+								x="date"
+								xScale={scaleUtc()}
+								axis="x"
+								points
+								series={[
+									{
+										key: 'balance',
+										label: 'XMR',
+										color: 'var(--chart-1)',
+									},
+								]}
+								yDomain={[
+									chartData.reduce((a, b) =>
+										a.balance < b.balance ? a : b,
+									).balance,
+									chartData.reduce((a, b) =>
+										a.balance > b.balance ? a : b,
+									).balance,
+								]}
+								props={{
+									spline: {
+										curve: curveLinear,
+										motion: 'tween',
+										strokeWidth: 2,
+									},
+									yAxis: {},
+									xAxis: {
+										format: (v: Date) =>
+											v.toLocaleDateString('en-US', {
+												month: 'short',
+												day: 'numeric',
+											}),
+									},
+									highlight: { points: { r: 4 } },
+								}}>
+								{#snippet tooltip()}
+									<Chart.Tooltip
+										labelFormatter={(value: Date) => {
+											return value.toLocaleDateString()
+										}}
+										valueFormatter={(value: Number) => {
+											return value.toString().slice(0, 8)
+										}} />
+								{/snippet}
+							</LineChart>
+						</Chart.Container>
+					{:else}
+						<p class="text-center text-sm text-muted-foreground">
+							No transactions in this time range.
+						</p>
+					{/if}
 				</CardContent>
 			</Card>
 		{/if}