GithubBackup/bili-sync
1
0
Fork 0
mirror of https://github.com/amtoaer/bili-sync.git synced 2026-09-08 00:47:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 修复前端图表错误

Browse Source
This commit is contained in:
amtoaer
2026-09-03 17:32:28 +08:00
parent dfd9180198
commit cc9a77aa49
2 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/custom/my-chart-tooltip.svelte
+8 -7
View File
@@ -6,7 +6,7 @@
useChart, useChart,
type TooltipPayload type TooltipPayload
} from '../ui/chart/chart-utils.js'; } 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'; import type { Snippet } from 'svelte';
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -20,6 +20,7 @@
} }
let { let {
context,
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
hideLabel = false, hideLabel = false,
@@ -35,6 +36,7 @@
color, color,
...restProps ...restProps
}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & { }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
context: ChartState;
hideLabel?: boolean; hideLabel?: boolean;
label?: string; label?: string;
indicator?: 'line' | 'dot' | 'dashed'; indicator?: 'line' | 'dot' | 'dashed';
@@ -61,17 +63,16 @@
} = $props(); } = $props();
const chart = useChart(); const chart = useChart();
const chartCtx = getChartContext();
const visibleSeries = $derived( 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(() => { 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 = context.tooltip.data;
const dataLabel = tooltipData != null ? chartCtx.x(tooltipData) : undefined; const dataLabel = tooltipData != null ? context.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); const itemConfig = getPayloadConfigFromPayload(chart.config, item, key, tooltipData);
@@ -103,7 +104,7 @@
{/if} {/if}
{/snippet} {/snippet}
<TooltipPrimitive.Root variant="none"> <TooltipPrimitive.Root {context} variant="none">
<div <div
bind:this={ref} bind:this={ref}
class={cn( class={cn(
@@ -122,7 +123,7 @@
chart.config, chart.config,
item, item,
key, key,
chartCtx.tooltip.data context.tooltip.data
)} )}
{@const indicatorColor = color || item.config?.color || item.color} {@const indicatorColor = color || item.config?.color || item.color}
<div <div
web/src/routes/+page.svelte
+6 -4
View File
@@ -286,8 +286,8 @@
xAxis: { format: () => '' } xAxis: { format: () => '' }
}} }}
> >
{#snippet tooltip()} {#snippet tooltip({ context })}
<MyChartTooltip indicator="line" /> <MyChartTooltip {context} indicator="line" />
{/snippet} {/snippet}
</BarChart> </BarChart>
</Chart.Container> </Chart.Container>
@@ -441,8 +441,9 @@
} }
}} }}
> >
{#snippet tooltip()} {#snippet tooltip({ context })}
<MyChartTooltip <MyChartTooltip
{context}
labelFormatter={(timestamp: number) => { labelFormatter={(timestamp: number) => {
return formatTimestamp(timestamp); return formatTimestamp(timestamp);
}} }}
@@ -503,8 +504,9 @@
} }
}} }}
> >
{#snippet tooltip()} {#snippet tooltip({ context })}
<MyChartTooltip <MyChartTooltip
{context}
labelFormatter={(timestamp: number) => { labelFormatter={(timestamp: number) => {
return formatTimestamp(timestamp); return formatTimestamp(timestamp);
}} }}