historical weather

2026-07-25 15:24:03 +02:00
parent f8d7c7699f
commit 61d84e4450
15 changed files with 1653 additions and 25 deletions
@@ -0,0 +1,260 @@
+<script lang="ts">
+	import { formatZoned, isSameDayInZone } from '$lib/utils/date';
+
+	import {
+		type ClimateNormals,
+		type HistoricalDailyData,
+		monthDayToOrdinal
+	} from '$lib/services/weather';
+
+	import { getColor, getTempStyle } from '../../utils/colors';
+	import { getWeatherIconName } from '../../utils/weather-codes';
+	import { type WeatherUnits, getPrecipUnit, getTempUnit } from '../../week/[location]/types';
+
+	interface Props {
+		daily: HistoricalDailyData;
+		dailyDates: Date[];
+		timezone: string;
+		units: WeatherUnits;
+		normals: ClimateNormals | null;
+		selectedDay: Date;
+		onSelectDay: (date: Date) => void;
+	}
+
+	let { daily, dailyDates, timezone, units, normals, selectedDay, onSelectDay }: Props = $props();
+
+	const tempUnit = $derived(getTempUnit(units));
+	const precipUnit = $derived(getPrecipUnit(units));
+
+	// Day-of-year ordinal for each day, so we can look up its climate normal.
+	let ordinals = $derived(
+		dailyDates.map((d) =>
+			monthDayToOrdinal(
+				Number(formatZoned(d, timezone, 'M')),
+				Number(formatZoned(d, timezone, 'd'))
+			)
+		)
+	);
+
+	const finite = (v: number | undefined): v is number => v != null && Number.isFinite(v);
+	const mean = (xs: number[]): number =>
+		xs.length ? xs.reduce((a, b) => a + b, 0) / xs.length : NaN;
+
+	// ─── Range scaling for the min/max bars ─────────────────────────────────────
+	const BAR_H = 78;
+	let scale = $derived.by(() => {
+		const lo = Math.min(...daily.temperature_2m_min.filter(finite));
+		const hi = Math.max(...daily.temperature_2m_max.filter(finite));
+		const span = hi - lo || 1;
+		return { lo, hi, span };
+	});
+	const yOf = (v: number): number => (1 - (v - scale.lo) / scale.span) * BAR_H;
+
+	// ─── Summary statistics ─────────────────────────────────────────────────────
+	let stats = $derived.by(() => {
+		const means = daily.temperature_2m_mean.filter(finite);
+		const avg = mean(means);
+
+		// warmest / coldest day
+		let warm = { t: -Infinity, i: -1 };
+		let cold = { t: Infinity, i: -1 };
+		for (let i = 0; i < dailyDates.length; i++) {
+			const mx = daily.temperature_2m_max[i];
+			const mn = daily.temperature_2m_min[i];
+			if (finite(mx) && mx > warm.t) warm = { t: mx, i };
+			if (finite(mn) && mn < cold.t) cold = { t: mn, i };
+		}
+
+		const totalPrecip = daily.precipitation_sum.filter(finite).reduce((a, b) => a + b, 0);
+		const wetDays = daily.precipitation_sum.filter((p) => finite(p) && p >= 1).length;
+
+		// climate comparison (only when normals are available)
+		let tempAnomaly: number | null = null;
+		let normalPrecip: number | null = null;
+		if (normals) {
+			const normMeans: number[] = [];
+			let np = 0;
+			let npCount = 0;
+			for (let i = 0; i < ordinals.length; i++) {
+				const nm = normals.tmean[ordinals[i]];
+				if (finite(nm)) normMeans.push(nm);
+				const npv = normals.precip[ordinals[i]];
+				if (finite(npv)) {
+					np += npv;
+					npCount++;
+				}
+			}
+			if (normMeans.length && finite(avg)) tempAnomaly = avg - mean(normMeans);
+			if (npCount) normalPrecip = np;
+		}
+
+		return { avg, warm, cold, totalPrecip, wetDays, tempAnomaly, normalPrecip };
+	});
+
+	const fmtTemp = (v: number): string => (finite(v) ? `${v.toFixed(1)}°` : '–');
+	const fmtSigned = (v: number): string => `${v >= 0 ? '+' : ''}${v.toFixed(1)}°`;
+	const fmtPrecip = (v: number): string => `${v.toFixed(v < 10 ? 1 : 0)} ${precipUnit}`;
+
+	function anomalyColor(delta: number): string {
+		const a = Math.min(0.9, 0.25 + Math.abs(delta) / 12);
+		return delta >= 0 ? `rgba(220, 70, 60, ${a})` : `rgba(50, 110, 210, ${a})`;
+	}
+</script>
+
+<!-- ─── KPI tiles ────────────────────────────────────────────────────────────── -->
+<div class="grid grid-cols-2 gap-2.5 lg:grid-cols-4">
+	<div class="rounded-xl border border-border/70 bg-card p-3.5 shadow-sm">
+		<p class="text-xs font-medium text-muted-foreground">Average temperature</p>
+		<p class="mt-1 text-2xl font-bold tabular-nums">
+			{fmtTemp(stats.avg)}<span class="text-base font-semibold text-muted-foreground"
+				>{tempUnit.replace('°', '')}</span
+			>
+		</p>
+		{#if stats.tempAnomaly != null}
+			<p
+				class="mt-0.5 text-xs font-semibold"
+				class:text-red-600={stats.tempAnomaly >= 0}
+				class:text-blue-600={stats.tempAnomaly < 0}
+				class:dark:text-red-400={stats.tempAnomaly >= 0}
+				class:dark:text-blue-400={stats.tempAnomaly < 0}
+			>
+				{fmtSigned(stats.tempAnomaly)} vs normal
+			</p>
+		{:else}
+			<p class="mt-0.5 text-xs text-muted-foreground">1991–2020 normal loading…</p>
+		{/if}
+	</div>
+
+	<div class="rounded-xl border border-border/70 bg-card p-3.5 shadow-sm">
+		<p class="text-xs font-medium text-muted-foreground">Total precipitation</p>
+		<p class="mt-1 text-2xl font-bold tabular-nums">{fmtPrecip(stats.totalPrecip)}</p>
+		{#if stats.normalPrecip != null}
+			<p class="mt-0.5 text-xs font-semibold text-muted-foreground">
+				normal {fmtPrecip(stats.normalPrecip)} · {stats.wetDays} wet {stats.wetDays === 1
+					? 'day'
+					: 'days'}
+			</p>
+		{:else}
+			<p class="mt-0.5 text-xs text-muted-foreground">{stats.wetDays} wet days</p>
+		{/if}
+	</div>
+
+	<div class="rounded-xl border border-border/70 bg-card p-3.5 shadow-sm">
+		<p class="text-xs font-medium text-muted-foreground">Warmest day</p>
+		<p class="mt-1 text-2xl font-bold tabular-nums">{fmtTemp(stats.warm.t)}</p>
+		{#if stats.warm.i >= 0}
+			<p class="mt-0.5 text-xs font-semibold text-muted-foreground">
+				{formatZoned(dailyDates[stats.warm.i], timezone, 'EEE d LLL')}
+			</p>
+		{/if}
+	</div>
+
+	<div class="rounded-xl border border-border/70 bg-card p-3.5 shadow-sm">
+		<p class="text-xs font-medium text-muted-foreground">Coldest day</p>
+		<p class="mt-1 text-2xl font-bold tabular-nums">{fmtTemp(stats.cold.t)}</p>
+		{#if stats.cold.i >= 0}
+			<p class="mt-0.5 text-xs font-semibold text-muted-foreground">
+				{formatZoned(dailyDates[stats.cold.i], timezone, 'EEE d LLL')}
+			</p>
+		{/if}
+	</div>
+</div>
+
+<!-- ─── Daily strip: min/max range bars + anomaly + precip ─────────────────────── -->
+<section
+	class="mt-4 -mx-3 overflow-hidden border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border"
+>
+	<div class="flex items-center justify-between border-b border-border/70 bg-muted/40 px-4 py-2.5">
+		<h3 class="text-base font-bold">
+			Daily <span class="font-semibold text-muted-foreground">– select a day for hourly detail</span
+			>
+		</h3>
+		{#if normals}
+			<span class="hidden text-xs text-muted-foreground sm:inline">
+				normal band = 1991–2020 mean
+			</span>
+		{/if}
+	</div>
+
+	<div class="overflow-x-auto">
+		<div class="flex min-w-min">
+			{#each dailyDates as date, i (date.getTime())}
+				{@const selected = isSameDayInZone(date, selectedDay, timezone)}
+				{@const tMax = daily.temperature_2m_max[i]}
+				{@const tMin = daily.temperature_2m_min[i]}
+				{@const tMean = daily.temperature_2m_mean[i]}
+				{@const norm = normals ? normals.tmean[ordinals[i]] : NaN}
+				{@const anomaly = finite(tMean) && finite(norm) ? tMean - norm : null}
+				{@const precip = daily.precipitation_sum[i]}
+				<button
+					type="button"
+					class="flex w-[52px] shrink-0 cursor-pointer flex-col items-center gap-1 border-r border-border/40 px-1 py-2 text-center transition-colors hover:bg-muted/60 {selected
+						? 'bg-primary/10'
+						: ''}"
+					onclick={() => onSelectDay(date)}
+					aria-pressed={selected}
+				>
+					<span class="text-[11px] font-semibold {selected ? 'text-primary' : 'text-foreground'}">
+						{formatZoned(date, timezone, 'EEE')}
+					</span>
+					<span class="text-[10px] text-muted-foreground"
+						>{formatZoned(date, timezone, 'd MMM')}</span
+					>
+
+					<svg class="my-0.5" width="20" height="20" aria-hidden="true">
+						<use
+							xlink:href="/images/weather-icons/{getWeatherIconName(
+								daily.weather_code[i],
+								true
+							)}.svg#Layer_1"
+						></use>
+					</svg>
+
+					<!-- min/max range bar -->
+					<div class="relative w-3.5" style="height:{BAR_H}px">
+						{#if finite(norm)}
+							<!-- normal marker -->
+							<div
+								class="absolute -left-0.5 -right-0.5 border-t border-dashed border-muted-foreground/50"
+								style="top:{yOf(norm)}px"
+							></div>
+						{/if}
+						{#if finite(tMax) && finite(tMin)}
+							<div
+								class="absolute left-0 w-full rounded-full"
+								style="top:{yOf(tMax)}px;height:{Math.max(
+									3,
+									yOf(tMin) - yOf(tMax)
+								)}px;background:{getColor(tMean ?? (tMax + tMin) / 2, units.temperature_unit)}"
+							></div>
+						{/if}
+					</div>
+
+					<span
+						class="text-[11px] font-bold tabular-nums"
+						style="color:{getTempStyle(tMax, units.temperature_unit).bg}">{fmtTemp(tMax)}</span
+					>
+					<span class="text-[10px] font-medium text-muted-foreground tabular-nums"
+						>{fmtTemp(tMin)}</span
+					>
+
+					{#if anomaly != null}
+						<span
+							class="mt-0.5 inline-block h-1.5 w-6 rounded-full"
+							style="background:{anomalyColor(anomaly)}"
+							title="{fmtSigned(anomaly)} vs normal"
+						></span>
+					{/if}
+
+					{#if finite(precip) && precip >= 0.1}
+						<span
+							class="mt-0.5 text-[10px] font-semibold text-sky-600 dark:text-sky-400 tabular-nums"
+						>
+							{precip.toFixed(precip < 10 ? 1 : 0)}
+						</span>
+					{/if}
+				</button>
+			{/each}
+		</div>
+	</div>
+</section>