fix: allow hovering tooltip for forcast analyitics

This commit is contained in:
2026-06-16 16:53:34 +09:30
parent 7d18b2483f
commit b3a4182a52
2 changed files with 29 additions and 2 deletions
@@ -9,6 +9,7 @@
buildGradeTrendChart, buildGradeTrendChart,
getTimeRangeLabel, getTimeRangeLabel,
type TimeRange, type TimeRange,
type TrendPoint,
} from "./timeRange"; } from "./timeRange";
import { computeGradeForecast, aggregateToMonthlyPoints } from "./utils/gradePrediction"; import { computeGradeForecast, aggregateToMonthlyPoints } from "./utils/gradePrediction";
import PredictionMonthsSlider from "./PredictionMonthsSlider.svelte"; import PredictionMonthsSlider from "./PredictionMonthsSlider.svelte";
@@ -159,6 +160,32 @@
); );
return monthly.length >= 3; return monthly.length >= 3;
}); });
/** Historical + future forecast points so tooltips work across the dashed line. */
const chartData = $derived.by((): TrendPoint[] => {
if (!showPrediction || !forecast?.points.length) {
return historicalData;
}
const points = historicalData.map((p) => ({ ...p }));
const validHist = points.filter((p) => !Number.isNaN(p.average));
const last = validHist[validHist.length - 1];
if (last) {
const lastIdx = points.findIndex((p) => p.date.getTime() === last.date.getTime());
if (lastIdx >= 0) {
points[lastIdx] = { ...points[lastIdx], forecast: last.average };
}
}
const futurePoints: TrendPoint[] = forecast.points.map((p) => ({
date: p.date,
count: 0,
forecast: p.value,
})) as TrendPoint[];
return [...points, ...futurePoints];
});
</script> </script>
<article class="bsplus-analytics-card"> <article class="bsplus-analytics-card">
@@ -201,7 +228,7 @@
<Chart.Container config={chartConfig} class="bsplus-chart-surface w-full"> <Chart.Container config={chartConfig} class="bsplus-chart-surface w-full">
<AreaChart <AreaChart
legend legend
data={historicalData} data={chartData}
x="date" x="date"
{xDomain} {xDomain}
yScale={yScale} yScale={yScale}
@@ -143,7 +143,7 @@
{itemConfig?.label || item.name} {itemConfig?.label || item.name}
</span> </span>
</div> </div>
{#if item.value !== undefined} {#if item.value != null && !Number.isNaN(Number(item.value))}
<span class="font-mono font-medium tabular-nums"> <span class="font-mono font-medium tabular-nums">
{item.value.toLocaleString()} {item.value.toLocaleString()}
</span> </span>