feat: add weather unit preferences

components/charts/day-forecast-charts.tsx

@@ -5,9 +5,15 @@ 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";
+import { formatForecastTemperature } from "@/lib/forecast-utils";
 import { useWeatherStore } from "@/lib/store";
-import { convertTemperature, formatTemperatureValue, getTemperatureUnitLabel } from "@/lib/weather-utils";
+import {
+  convertPrecipitation,
+  convertTemperature,
+  formatTemperatureValue,
+  getPrecipitationUnitLabel,
+  getTemperatureUnitLabel,
+} from "@/lib/weather-utils";
 import type { HourlyForecast } from "@/types/forecast";
 
 const INITIAL_CHART_DIMENSION = { width: 1, height: 1 };
@@ -22,6 +28,15 @@ function formatHour(value: string) {
   return value.slice(11, 16);
 }
 
+function formatChartPrecipitation(value: number | null, language: "pl" | "en", unit: string) {
+  if (value === null) return "—";
+  const formattedValue = new Intl.NumberFormat(language === "pl" ? "pl-PL" : "en-GB", {
+    minimumFractionDigits: unit === "in" ? 2 : 0,
+    maximumFractionDigits: unit === "mm" ? (value < 1 ? 2 : 1) : 2,
+  }).format(value);
+  return `${formattedValue} ${unit}`;
+}
+
 function ChartLegend({ items }: { items: ChartLegendItem[] }) {
   return (
     <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-[0.72rem] font-medium text-muted">
@@ -46,14 +61,16 @@ function ChartLegend({ items }: { items: ChartLegendItem[] }) {
 export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
   const { language, t } = useI18n();
   const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
+  const precipitationUnit = useWeatherStore((state) => state.precipitationUnit);
   const rows = hours.map((hour) => ({
     time: formatHour(hour.time),
     temperature: hour.temperature === null ? null : convertTemperature(hour.temperature, temperatureUnit),
     feelsLike: hour.feelsLike === null ? null : convertTemperature(hour.feelsLike, temperatureUnit),
-    precipitation: hour.precipitation,
+    precipitation: hour.precipitation === null ? null : convertPrecipitation(hour.precipitation, precipitationUnit),
     precipitationProbability: hour.precipitationProbability,
   }));
   const temperatureUnitLabel = getTemperatureUnitLabel(temperatureUnit);
+  const precipitationUnitLabel = getPrecipitationUnitLabel(precipitationUnit);
   const temperatureLegendItems: ChartLegendItem[] = [
     { color: CHART_COLORS.temperature, label: t("forecast.temperature"), marker: "line" },
     { color: CHART_COLORS.feelsLike, label: t("forecast.apparentTemperature"), marker: "dashed-line" },
@@ -153,7 +170,7 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
                 axisLine={false}
                 tickLine={false}
                 tick={{ fill: "currentColor", fontSize: 11 }}
-                unit=" mm"
+                unit={` ${precipitationUnitLabel}`}
               />
               <YAxis
                 yAxisId="probability"
@@ -170,7 +187,11 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
                   <ChartTooltip
                     valueFormatter={(entry) =>
                       entry.dataKey === "precipitation"
-                        ? formatForecastRainfall(typeof entry.value === "number" ? entry.value : null, language)
+                        ? formatChartPrecipitation(
+                            typeof entry.value === "number" ? entry.value : null,
+                            language,
+                            precipitationUnitLabel,
+                          )
                         : `${typeof entry.value === "number" ? entry.value : "—"}%`
                     }
                   />

components/charts/snapshot-chart.tsx

@@ -6,7 +6,13 @@ import { ChartTooltip } from "@/components/charts/chart-tooltip";
 import { Card } from "@/components/ui/card";
 import { useI18n } from "@/lib/i18n";
 import { useWeatherStore } from "@/lib/store";
-import { convertWindSpeed, getWindSpeedUnitLabel } from "@/lib/weather-utils";
+import {
+  convertPrecipitation,
+  convertWindSpeed,
+  convertWindSpeedToBeaufort,
+  getPrecipitationUnitLabel,
+  getWindSpeedUnitLabel,
+} from "@/lib/weather-utils";
 
 const INITIAL_CHART_DIMENSION = { width: 1, height: 1 };
 const SNAPSHOT_COLORS = ["hsl(var(--chart-temperature))", "hsl(var(--chart-feels-like))", "hsl(var(--chart-rainfall))"];
@@ -14,10 +20,17 @@ const SNAPSHOT_COLORS = ["hsl(var(--chart-temperature))", "hsl(var(--chart-feels
 export function SnapshotChart({ station }: { station: SynopStation }) {
   const { t } = useI18n();
   const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
+  const precipitationUnit = useWeatherStore((state) => state.precipitationUnit);
   const windDigits = windSpeedUnit === "ms" ? 1 : 0;
   const windSpeed =
-    station.windSpeed === null ? null : Number(convertWindSpeed(station.windSpeed, windSpeedUnit).toFixed(windDigits));
-  const windMax = windSpeedUnit === "ms" ? 20 : windSpeedUnit === "kmh" ? 72 : 45;
+    station.windSpeed === null
+      ? null
+      : windSpeedUnit === "bft"
+        ? convertWindSpeedToBeaufort(station.windSpeed)
+        : Number(convertWindSpeed(station.windSpeed, windSpeedUnit).toFixed(windDigits));
+  const windMax = windSpeedUnit === "ms" ? 20 : windSpeedUnit === "kmh" ? 72 : windSpeedUnit === "bft" ? 12 : 45;
+  const rainfall =
+    station.rainfall === null ? null : Number(convertPrecipitation(station.rainfall, precipitationUnit).toFixed(2));
   const rows = [
     { name: t("weather.humidity"), value: station.humidity, unit: "%", max: 100, color: SNAPSHOT_COLORS[0] },
     {
@@ -27,7 +40,13 @@ export function SnapshotChart({ station }: { station: SynopStation }) {
       max: windMax,
       color: SNAPSHOT_COLORS[1],
     },
-    { name: t("weather.rainfall"), value: station.rainfall, unit: "mm", max: 30, color: SNAPSHOT_COLORS[2] },
+    {
+      name: t("weather.rainfall"),
+      value: rainfall,
+      unit: getPrecipitationUnitLabel(precipitationUnit),
+      max: convertPrecipitation(30, precipitationUnit),
+      color: SNAPSHOT_COLORS[2],
+    },
   ]
     .filter((row) => row.value !== null)
     .map((row) => ({ ...row, normalized: Math.min(100, ((row.value ?? 0) / row.max) * 100) }));