chore: add prettier formatting

2026-06-14 20:26:56 +02:00
parent 8bbd9397a1
commit ee55521803
79 changed files with 2451 additions and 969 deletions
--- a/components/charts/day-forecast-charts.tsx
+++ b/components/charts/day-forecast-charts.tsx
@@ -33,13 +33,35 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
        <h3 className="text-sm font-semibold">{t("forecast.temperatureChart")}</h3>
        <p className="mt-1 text-xs leading-5 text-muted">{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}>
+          <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={temperatureUnitLabel} />
+              <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={temperatureUnitLabel}
+              />
              <Tooltip
-                contentStyle={{ borderRadius: 14, border: `1px solid ${CHART_COLORS.tooltipBorder}`, background: CHART_COLORS.tooltipBackground, color: CHART_COLORS.tooltipText }}
+                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)
@@ -47,8 +69,25 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
                ]}
              />
              <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 />
+              <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>
@@ -58,14 +97,45 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
        <h3 className="text-sm font-semibold">{t("forecast.rainfallChart")}</h3>
        <p className="mt-1 text-xs leading-5 text-muted">{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}>
+          <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="%" />
+              <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 }}
+                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)
@@ -74,8 +144,23 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
                ]}
              />
              <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 />
+              <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>
--- a/components/charts/snapshot-chart.tsx
+++ b/components/charts/snapshot-chart.tsx
@@ -8,23 +8,28 @@ import { useWeatherStore } from "@/lib/store";
 import { convertWindSpeed, 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))",
-];
+const SNAPSHOT_COLORS = ["hsl(var(--chart-temperature))", "hsl(var(--chart-feels-like))", "hsl(var(--chart-rainfall))"];

 export function SnapshotChart({ station }: { station: SynopStation }) {
  const { t } = useI18n();
  const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
  const windDigits = windSpeedUnit === "ms" ? 1 : 0;
-  const windSpeed = station.windSpeed === null ? null : Number(convertWindSpeed(station.windSpeed, windSpeedUnit).toFixed(windDigits));
+  const windSpeed =
+    station.windSpeed === null ? null : Number(convertWindSpeed(station.windSpeed, windSpeedUnit).toFixed(windDigits));
  const windMax = windSpeedUnit === "ms" ? 20 : windSpeedUnit === "kmh" ? 72 : 45;
  const rows = [
    { name: t("weather.humidity"), value: station.humidity, unit: "%", max: 100, color: SNAPSHOT_COLORS[0] },
-    { name: t("weather.wind"), value: windSpeed, unit: getWindSpeedUnitLabel(windSpeedUnit), max: windMax, color: SNAPSHOT_COLORS[1] },
+    {
+      name: t("weather.wind"),
+      value: windSpeed,
+      unit: getWindSpeedUnitLabel(windSpeedUnit),
+      max: windMax,
+      color: SNAPSHOT_COLORS[1],
+    },
    { name: t("weather.rainfall"), value: station.rainfall, unit: "mm", max: 30, color: SNAPSHOT_COLORS[2] },
-  ].filter((row) => row.value !== null).map((row) => ({ ...row, normalized: Math.min(100, ((row.value ?? 0) / row.max) * 100) }));
+  ]
+    .filter((row) => row.value !== null)
+    .map((row) => ({ ...row, normalized: Math.min(100, ((row.value ?? 0) / row.max) * 100) }));

  return (
    <Card className="p-5">
@@ -32,13 +37,31 @@ export function SnapshotChart({ station }: { station: SynopStation }) {
      <h2 className="mt-2 text-xl font-semibold tracking-tight">{t("snapshot.title")}</h2>
      <p className="mt-1 text-sm leading-6 text-muted">{t("snapshot.description")}</p>
      <div className="mt-5 h-52 min-w-0">
-        <ResponsiveContainer width="100%" height="100%" minWidth={0} minHeight={0} initialDimension={INITIAL_CHART_DIMENSION}>
+        <ResponsiveContainer
+          width="100%"
+          height="100%"
+          minWidth={0}
+          minHeight={0}
+          initialDimension={INITIAL_CHART_DIMENSION}
+        >
          <BarChart data={rows} layout="vertical" margin={{ left: 0, right: 16 }}>
            <XAxis type="number" hide domain={[0, 100]} />
-            <YAxis type="category" dataKey="name" width={86} axisLine={false} tickLine={false} tick={{ fill: "currentColor", fontSize: 12 }} />
-            <Tooltip cursor={{ fill: "hsl(var(--border) / 0.22)" }} formatter={(_, __, item) => [`${item.payload.value} ${item.payload.unit}`, item.payload.name]} />
+            <YAxis
+              type="category"
+              dataKey="name"
+              width={86}
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: "currentColor", fontSize: 12 }}
+            />
+            <Tooltip
+              cursor={{ fill: "hsl(var(--border) / 0.22)" }}
+              formatter={(_, __, item) => [`${item.payload.value} ${item.payload.unit}`, item.payload.name]}
+            />
            <Bar dataKey="normalized" radius={[0, 8, 8, 0]} barSize={14}>
-              {rows.map((row) => <Cell fill={row.color} key={row.name} />)}
+              {rows.map((row) => (
+                <Cell fill={row.color} key={row.name} />
+              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>