feat: add Polish and English language switcher
This commit is contained in:
@@ -3,19 +3,21 @@
|
||||
import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||||
import type { SynopStation } from "@/types/imgw";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
|
||||
export function SnapshotChart({ station }: { station: SynopStation }) {
|
||||
const { t } = useI18n();
|
||||
const rows = [
|
||||
{ name: "Wilgotność", value: station.humidity, unit: "%", max: 100, color: "#38bdf8" },
|
||||
{ name: "Wiatr", value: station.windSpeed, unit: "m/s", max: 20, color: "#818cf8" },
|
||||
{ name: "Opad", value: station.rainfall, unit: "mm", max: 30, color: "#22d3ee" },
|
||||
{ name: t("weather.humidity"), value: station.humidity, unit: "%", max: 100, color: "#38bdf8" },
|
||||
{ name: t("weather.wind"), value: station.windSpeed, unit: "m/s", max: 20, color: "#818cf8" },
|
||||
{ name: t("weather.rainfall"), value: station.rainfall, unit: "mm", max: 30, color: "#22d3ee" },
|
||||
].filter((row) => row.value !== null).map((row) => ({ ...row, normalized: Math.min(100, ((row.value ?? 0) / row.max) * 100) }));
|
||||
|
||||
return (
|
||||
<Card className="p-5">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700 dark:text-sky-300">Snapshot pomiarowy</p>
|
||||
<h2 className="mt-2 text-xl font-semibold tracking-tight">Aktualne proporcje parametrów</h2>
|
||||
<p className="mt-1 text-sm leading-6 text-slate-600 dark:text-slate-300">Wizualizacja bieżącego odczytu. API synoptyczne IMGW nie udostępnia historii ani prognozy godzinowej.</p>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700 dark:text-sky-300">{t("snapshot.label")}</p>
|
||||
<h2 className="mt-2 text-xl font-semibold tracking-tight">{t("snapshot.title")}</h2>
|
||||
<p className="mt-1 text-sm leading-6 text-slate-600 dark:text-slate-300">{t("snapshot.description")}</p>
|
||||
<div className="mt-5 h-52 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={rows} layout="vertical" margin={{ left: 0, right: 16 }}>
|
||||
|
||||
Reference in New Issue
Block a user