- {#each tooltipCtx.payload as item, i (item.key + i)}
- {@const key = `${nameKey || item.key || item.name || 'value'}`}
- {@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key)}
- {@const indicatorColor = color || item.payload?.color || item.color}
+ {#each visibleSeries as item, i (item.key + i)}
+ {@const key = `${nameKey || item.key || item.label || 'value'}`}
+ {@const itemConfig = getPayloadConfigFromPayload(
+ chart.config,
+ item,
+ key,
+ chartCtx.tooltip.data
+ )}
+ {@const indicatorColor = color || item.config?.color || item.color}
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.name}
+ {#if formatter && item.value !== undefined && item.label}
{@render formatter({
value: item.value,
- name: item.name,
+ name: item.label,
item,
index: i,
- payload: tooltipCtx.payload
+ payload: visibleSeries
})}
{:else}
{#if itemConfig?.icon}
@@ -138,7 +164,7 @@
{@render TooltipLabel()}
{/if}
- {itemConfig?.label || item.name}
+ {itemConfig?.label || item.label}
{#if item.value !== undefined}
diff --git a/web/src/lib/components/ui/chart/chart-utils.ts b/web/src/lib/components/ui/chart/chart-utils.ts
index f2e682d..3c0cced 100644
--- a/web/src/lib/components/ui/chart/chart-utils.ts
+++ b/web/src/lib/components/ui/chart/chart-utils.ts
@@ -1,5 +1,5 @@
import type { Tooltip } from 'layerchart';
-import { getContext, setContext, type Component, type ComponentProps, type Snippet } from 'svelte';
+import { getContext, setContext, type Component, type Snippet } from 'svelte';
export const THEMES = { light: '', dark: '.dark' } as const;
@@ -15,37 +15,39 @@ export type ChartConfig = {
export type ExtractSnippetParams
= T extends Snippet<[infer P]> ? P : never;
-export type TooltipPayload = ExtractSnippetParams<
- ComponentProps['children']
->['payload'][number];
+export type TooltipPayload = Tooltip.TooltipSeries;
// Helper to extract item config from a payload.
export function getPayloadConfigFromPayload(
config: ChartConfig,
payload: TooltipPayload,
- key: string
+ key: string,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ data?: Record | null
) {
if (typeof payload !== 'object' || payload === null) return undefined;
- const payloadPayload =
- 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
- ? payload.payload
+ const payloadConfig =
+ 'config' in payload && typeof payload.config === 'object' && payload.config !== null
+ ? payload.config
: undefined;
let configLabelKey: string = key;
if (payload.key === key) {
configLabelKey = payload.key;
- } else if (payload.name === key) {
- configLabelKey = payload.name;
+ } else if (payload.label === key) {
+ configLabelKey = payload.label;
} else if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
configLabelKey = payload[key as keyof typeof payload] as string;
} else if (
- payloadPayload !== undefined &&
- key in payloadPayload &&
- typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+ payloadConfig !== undefined &&
+ key in payloadConfig &&
+ typeof payloadConfig[key as keyof typeof payloadConfig] === 'string'
) {
- configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+ configLabelKey = payloadConfig[key as keyof typeof payloadConfig] as string;
+ } else if (data != null && key in data && typeof data[key] === 'string') {
+ configLabelKey = data[key] as string;
}
return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
diff --git a/web/src/lib/components/validation-filter.svelte b/web/src/lib/components/validation-filter.svelte
index 4747b42..dffa22c 100644
--- a/web/src/lib/components/validation-filter.svelte
+++ b/web/src/lib/components/validation-filter.svelte
@@ -1,11 +1,9 @@