TZGyn/koins
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

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

Browse Source 
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
This commit is contained in:
TZGyn
2026-06-06 22:09:15 +08:00
parent 3a44e888b2
commit 0b6df331ee
2 changed files with 195 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/lib/components/ui/chart/chart-tooltip.svelte
+103 -72
View File
@@ -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>