From cc9a77aa493471474ff2b29c88b8646cd57bf276 Mon Sep 17 00:00:00 2001
From: amtoaer <amtoaer@gmail.com>
Date: Thu, 3 Sep 2026 17:32:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/components/custom/my-chart-tooltip.svelte | 15 ++++++++-------
 web/src/routes/+page.svelte                       | 10 ++++++----
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/custom/my-chart-tooltip.svelte b/web/src/lib/components/custom/my-chart-tooltip.svelte
index 1f263cd..4e40a82 100644
--- a/web/src/lib/components/custom/my-chart-tooltip.svelte
+++ b/web/src/lib/components/custom/my-chart-tooltip.svelte
@@ -6,7 +6,7 @@
 		useChart,
 		type TooltipPayload
 	} from '../ui/chart/chart-utils.js';
-	import { getChartContext, Tooltip as TooltipPrimitive } from 'layerchart';
+	import { Tooltip as TooltipPrimitive, type ChartState } from 'layerchart';
 	import type { Snippet } from 'svelte';
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -20,6 +20,7 @@
 	}
 
 	let {
+		context,
 		ref = $bindable(null),
 		class: className,
 		hideLabel = false,
@@ -35,6 +36,7 @@
 		color,
 		...restProps
 	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+		context: ChartState;
 		hideLabel?: boolean;
 		label?: string;
 		indicator?: 'line' | 'dot' | 'dashed';
@@ -61,17 +63,16 @@
 	} = $props();
 
 	const chart = useChart();
-	const chartCtx = getChartContext();
 	const visibleSeries = $derived(
-		chartCtx.tooltip.series.filter((series: TooltipPayload) => series.value !== undefined)
+		context.tooltip.series.filter((series: TooltipPayload) => series.value !== undefined)
 	);
 
 	const formattedLabel = $derived.by(() => {
 		if (hideLabel || !visibleSeries.length) return null;
 
 		const [item] = visibleSeries;
-		const tooltipData = chartCtx.tooltip.data;
-		const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined;
+		const tooltipData = context.tooltip.data;
+		const dataLabel = tooltipData != null ? context.x(tooltipData) : undefined;
 		const key = labelKey ?? item?.label ?? item?.key ?? 'value';
 
 		const itemConfig = getPayloadConfigFromPayload(chart.config, item, key, tooltipData);
@@ -103,7 +104,7 @@
 	{/if}
 {/snippet}
 
-<TooltipPrimitive.Root variant="none">
+<TooltipPrimitive.Root {context} variant="none">
 	<div
 		bind:this={ref}
 		class={cn(
@@ -122,7 +123,7 @@
 					chart.config,
 					item,
 					key,
-					chartCtx.tooltip.data
+					context.tooltip.data
 				)}
 				{@const indicatorColor = color || item.config?.color || item.color}
 				<div
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 4ea0c48..9d360bf 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -286,8 +286,8 @@
 									xAxis: { format: () => '' }
 								}}
 							>
-								{#snippet tooltip()}
-									<MyChartTooltip indicator="line" />
+								{#snippet tooltip({ context })}
+									<MyChartTooltip {context} indicator="line" />
 								{/snippet}
 							</BarChart>
 						</Chart.Container>
@@ -441,8 +441,9 @@
 									}
 								}}
 							>
-								{#snippet tooltip()}
+								{#snippet tooltip({ context })}
 									<MyChartTooltip
+										{context}
 										labelFormatter={(timestamp: number) => {
 											return formatTimestamp(timestamp);
 										}}
@@ -503,8 +504,9 @@
 									}
 								}}
 							>
-								{#snippet tooltip()}
+								{#snippet tooltip({ context })}
 									<MyChartTooltip
+										{context}
 										labelFormatter={(timestamp: number) => {
 											return formatTimestamp(timestamp);
 										}}