zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve chart tooltips

Browse Source
This commit is contained in:
zv
2026-06-14 21:00:05 +02:00
parent bdba3c709c
commit 169d5e5e59
3 changed files with 79 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/charts/day-forecast-charts.tsx
View File

@@ -2,6 +2,7 @@
import { Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { Card } from "@/components/ui/card";
import { ChartTooltip } from "@/components/charts/chart-tooltip";
import { CHART_COLORS } from "@/lib/chart-theme";
import { useI18n } from "@/lib/i18n";
import { formatForecastRainfall, formatForecastTemperature } from "@/lib/forecast-utils";
@@ -56,17 +57,16 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
unit={temperatureUnitLabel}
/>
<Tooltip
contentStyle={{
borderRadius: 14,
border: `1px solid ${CHART_COLORS.tooltipBorder}`,
background: CHART_COLORS.tooltipBackground,
color: CHART_COLORS.tooltipText,
}}
formatter={(value) => [
typeof value === "number"
? formatTemperatureValue(value, language, temperatureUnit)
: formatForecastTemperature(null, language, temperatureUnit),
]}
cursor={{ stroke: CHART_COLORS.grid, strokeDasharray: "4 4" }}
content={
<ChartTooltip
valueFormatter={(entry) =>
typeof entry.value === "number"
? formatTemperatureValue(entry.value, language, temperatureUnit)
: formatForecastTemperature(null, language, temperatureUnit)
}
/>
}
/>
<Legend wrapperStyle={{ fontSize: "0.72rem" }} />
<Line
@@ -130,18 +130,16 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
unit="%"
/>
<Tooltip
contentStyle={{
borderRadius: 14,
border: `1px solid ${CHART_COLORS.tooltipBorder}`,
background: CHART_COLORS.tooltipBackground,
color: CHART_COLORS.tooltipText,
}}
formatter={(value, name) => [
name === t("forecast.precipitation")
? formatForecastRainfall(typeof value === "number" ? value : null, language)
: `${typeof value === "number" ? value : "—"}%`,
name,
]}
cursor={{ fill: "hsl(var(--border) / 0.18)" }}
content={
<ChartTooltip
valueFormatter={(entry) =>
entry.dataKey === "precipitation"
? formatForecastRainfall(typeof entry.value === "number" ? entry.value : null, language)
: `${typeof entry.value === "number" ? entry.value : "—"}%`
}
/>
}
/>
<Legend wrapperStyle={{ fontSize: "0.72rem" }} />
<Bar