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 {
-	import type { HTMLAttributes } from "svelte/elements";
+		cn,
-	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from "./chart-utils.js";
+		type WithElementRef,
-	import { getChartContext, Tooltip as TooltipPrimitive } from "layerchart";
+		type WithoutChildren,
-	import type { Snippet } from "svelte";
+	} 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>>> & {
+	}: WithoutChildren<
-		hideLabel?: boolean;
+		WithElementRef<HTMLAttributes<HTMLDivElement>>
-		label?: string;
+	> & {
-		indicator?: "line" | "dot" | "dashed";
+		hideLabel?: boolean
-		nameKey?: string;
+		label?: string
-		labelKey?: string;
+		indicator?: 'line' | 'dot' | 'dashed'
-		hideIndicator?: boolean;
+		nameKey?: string
-		labelClassName?: 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;
+					value: unknown
-					name: string;
+					name: string
-					item: TooltipPayload;
+					item: TooltipPayload
-					index: number;
+					index: number
-					payload: TooltipPayload[];
+					payload: TooltipPayload[]
 				},
 			]
-		>;
+		>
-	} = $props();
+		valueFormatter?:
+			| ((value: any) => string | number | Snippet)
+			| null
+	} = $props()
 
-	const chart = useChart();
+	const chart = useChart()
-	const chartCtx = getChartContext();
+	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 [item] = visibleSeries
-		const tooltipData = chartCtx.tooltip.data;
+		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;
+		let value: unknown
-		if (!labelKey && typeof label === "string") {
+		if (!labelKey && typeof label === 'string') {
-			value = chart.config[label as keyof typeof chart.config]?.label ?? label;
+			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 (value === undefined) return null
-		if (!labelFormatter) return value;
+		if (!labelFormatter) return value
-		return labelFormatter(value, visibleSeries);
+		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)}>
+		<div class={cn('font-medium', labelClassName)}>
-			{#if typeof formattedLabel === "function"}
+			{#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",
+			'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
+			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",
+						'[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5',
-						indicator === "dot" && "items-center"
+						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",
+										'size-2.5': indicator === 'dot',
-										"h-full w-1": indicator === "line",
+										'h-full w-1': indicator === 'line',
-										"w-0 border-[1.5px] border-dashed bg-transparent":
+										'w-0 border-[1.5px] border-dashed bg-transparent':
-											indicator === "dashed",
+											indicator === 'dashed',
-										"my-0.5": nestLabel && indicator === "dashed",
+										'my-0.5': nestLabel && indicator === 'dashed',
-									}
+									},
-								)}
+								)}>
-							></div>
+							</div>
 						{/if}
 						<div
 							class={cn(
-								"flex flex-1 shrink-0 justify-between leading-none",
+								'flex flex-1 shrink-0 justify-between leading-none',
-								nestLabel ? "items-end" : "items-center"
+								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">
+								<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,18 +372,33 @@
 		{#if balanceHistory.length > 1}
 			<Card>
 				<CardHeader>
+					<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>
+					{#if chartData.length > 1}
 						<Chart.Container
 							config={{
 								balance: { label: 'XMR', color: 'var(--chart-1)' },
 							}}>
 							<LineChart
-							data={balanceHistory}
+								data={chartData}
 								x="date"
 								xScale={scaleUtc()}
-							// axis="x"
+								axis="x"
 								points
 								series={[
 									{
@@ -374,10 +408,10 @@
 									},
 								]}
 								yDomain={[
-								balanceHistory.reduce((a, b) =>
+									chartData.reduce((a, b) =>
 										a.balance < b.balance ? a : b,
 									).balance,
-								balanceHistory.reduce((a, b) =>
+									chartData.reduce((a, b) =>
 										a.balance > b.balance ? a : b,
 									).balance,
 								]}
@@ -393,7 +427,6 @@
 											v.toLocaleDateString('en-US', {
 												month: 'short',
 												day: 'numeric',
-											// hour: '2-digit',
 											}),
 									},
 									highlight: { points: { r: 4 } },
@@ -409,6 +442,11 @@
 								{/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}