87 lines
5.0 KiB
TypeScript
87 lines
5.0 KiB
TypeScript
"use client";
|
|
|
|
import { Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
|
import { Card } from "@/components/ui/card";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { formatForecastRainfall, formatForecastTemperature } from "@/lib/forecast-utils";
|
|
import type { HourlyForecast } from "@/types/forecast";
|
|
|
|
const INITIAL_CHART_DIMENSION = { width: 1, height: 1 };
|
|
const CHART_COLORS = {
|
|
grid: "hsl(var(--border) / 0.65)",
|
|
tooltipBorder: "hsl(var(--border) / 0.75)",
|
|
tooltipBackground: "hsl(var(--surface-raised) / 0.96)",
|
|
tooltipText: "hsl(var(--foreground))",
|
|
temperature: "hsl(var(--chart-temperature))",
|
|
feelsLike: "hsl(var(--chart-feels-like))",
|
|
rainfall: "hsl(var(--chart-rainfall))",
|
|
probability: "hsl(var(--chart-probability))",
|
|
};
|
|
|
|
function formatHour(value: string) {
|
|
return value.slice(11, 16);
|
|
}
|
|
|
|
export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
|
|
const { language, t } = useI18n();
|
|
const rows = hours.map((hour) => ({
|
|
time: formatHour(hour.time),
|
|
temperature: hour.temperature,
|
|
feelsLike: hour.feelsLike,
|
|
precipitation: hour.precipitation,
|
|
precipitationProbability: hour.precipitationProbability,
|
|
}));
|
|
|
|
return (
|
|
<div className="grid gap-3 lg:grid-cols-2">
|
|
<Card className="p-4 sm:p-5">
|
|
<h3 className="text-sm font-semibold">{t("forecast.temperatureChart")}</h3>
|
|
<p className="mt-1 text-xs leading-5 text-slate-600 dark:text-slate-300">{t("forecast.temperatureChartDescription")}</p>
|
|
<div className="mt-4 h-56 min-w-0">
|
|
<ResponsiveContainer width="100%" height="100%" minWidth={0} minHeight={0} initialDimension={INITIAL_CHART_DIMENSION}>
|
|
<ComposedChart data={rows} margin={{ left: -20, right: 8, top: 8 }}>
|
|
<CartesianGrid stroke={CHART_COLORS.grid} strokeDasharray="4 4" vertical={false} />
|
|
<XAxis dataKey="time" axisLine={false} tickLine={false} interval={3} tick={{ fill: "currentColor", fontSize: 11 }} />
|
|
<YAxis axisLine={false} tickLine={false} tick={{ fill: "currentColor", fontSize: 11 }} unit="°" />
|
|
<Tooltip
|
|
contentStyle={{ borderRadius: 14, border: `1px solid ${CHART_COLORS.tooltipBorder}`, background: CHART_COLORS.tooltipBackground, color: CHART_COLORS.tooltipText }}
|
|
formatter={(value) => [formatForecastTemperature(typeof value === "number" ? value : null, language)]}
|
|
/>
|
|
<Legend wrapperStyle={{ fontSize: "0.72rem" }} />
|
|
<Line type="monotone" dataKey="temperature" name={t("forecast.temperature")} stroke={CHART_COLORS.temperature} strokeWidth={3} dot={false} connectNulls />
|
|
<Line type="monotone" dataKey="feelsLike" name={t("forecast.apparentTemperature")} stroke={CHART_COLORS.feelsLike} strokeWidth={2} strokeDasharray="5 4" dot={false} connectNulls />
|
|
</ComposedChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="p-4 sm:p-5">
|
|
<h3 className="text-sm font-semibold">{t("forecast.rainfallChart")}</h3>
|
|
<p className="mt-1 text-xs leading-5 text-slate-600 dark:text-slate-300">{t("forecast.rainfallChartDescription")}</p>
|
|
<div className="mt-4 h-56 min-w-0">
|
|
<ResponsiveContainer width="100%" height="100%" minWidth={0} minHeight={0} initialDimension={INITIAL_CHART_DIMENSION}>
|
|
<ComposedChart data={rows} margin={{ left: -20, right: -10, top: 8 }}>
|
|
<CartesianGrid stroke={CHART_COLORS.grid} strokeDasharray="4 4" vertical={false} />
|
|
<XAxis dataKey="time" axisLine={false} tickLine={false} interval={3} tick={{ fill: "currentColor", fontSize: 11 }} />
|
|
<YAxis yAxisId="rainfall" axisLine={false} tickLine={false} tick={{ fill: "currentColor", fontSize: 11 }} unit=" mm" />
|
|
<YAxis yAxisId="probability" orientation="right" domain={[0, 100]} axisLine={false} tickLine={false} tick={{ fill: "currentColor", fontSize: 11 }} 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,
|
|
]}
|
|
/>
|
|
<Legend wrapperStyle={{ fontSize: "0.72rem" }} />
|
|
<Bar yAxisId="rainfall" dataKey="precipitation" name={t("forecast.precipitation")} fill={CHART_COLORS.rainfall} radius={[5, 5, 0, 0]} />
|
|
<Line yAxisId="probability" type="monotone" dataKey="precipitationProbability" name={t("forecast.precipitationProbability")} stroke={CHART_COLORS.probability} strokeWidth={2} dot={false} connectNulls />
|
|
</ComposedChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|