600 lines
22 KiB
Svelte
600 lines
22 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { SvelteDate } from 'svelte/reactivity';
|
|
import { get } from 'svelte/store';
|
|
import { fade } from 'svelte/transition';
|
|
|
|
import { page } from '$app/stores';
|
|
|
|
import { reportPageReady } from '$lib/stores/page-transition.svelte';
|
|
import {
|
|
storedChartLayout,
|
|
storedLocation,
|
|
storedModel,
|
|
storedUnits,
|
|
storedVariablePrefs
|
|
} from '$lib/stores/settings';
|
|
|
|
import { formatZoned } from '$lib/utils/date';
|
|
import { daySwap, runDayTransition } from '$lib/utils/day-swap';
|
|
import { buildLocationRoute } from '$lib/utils/location';
|
|
import { skeletonOut } from '$lib/utils/skeleton-fade';
|
|
import { syncSearchParams, unlessDefault } from '$lib/utils/url-state';
|
|
|
|
import { ChartContainer } from '$lib/components/charts';
|
|
|
|
import { href } from '$lib/i18n';
|
|
import * as m from '$lib/paraglide/messages';
|
|
import {
|
|
type FriendlyWeatherError,
|
|
type WeekForecastResult,
|
|
fetchWeekForecast,
|
|
humanizeWeatherError
|
|
} from '$lib/services/weather';
|
|
|
|
import { useHeroActions } from '../../hero.svelte';
|
|
import { defaultParameters, inDomainCity } from '../../options';
|
|
import { computeDayNightWeatherCodes } from '../../utils/weather-codes';
|
|
import DailyStripSticky from './DailyStripSticky.svelte';
|
|
import DaySummary from './DaySummary.svelte';
|
|
import HourlyTable from './HourlyTable.svelte';
|
|
import MeteogramCharts from './MeteogramCharts.svelte';
|
|
import ModelSelector from './ModelSelector.svelte';
|
|
import NearbyCities from './NearbyCities.svelte';
|
|
import VariableSidebar from './VariableSidebar.svelte';
|
|
import { neededHourlyApiVars } from './variables';
|
|
|
|
import type { PageData } from './$types';
|
|
import type { FetchedDaily, FetchedHourly } from './types';
|
|
|
|
let { data }: { data: PageData } = $props();
|
|
|
|
// the page cross-fade waits for this before revealing the new page
|
|
reportPageReady(() => (fetchedDaily != null && fetchedHourly != null) || loadError != null);
|
|
|
|
useHeroActions(heroActions);
|
|
|
|
let params = $state({
|
|
models: ['best_match'],
|
|
...defaultParameters
|
|
});
|
|
|
|
// units live in a persisted store; mirror them into params so a change
|
|
// re-runs the fetch effect below (which reads params.*_unit)
|
|
$effect(() => {
|
|
params.temperature_unit = $storedUnits.temperature_unit;
|
|
params.wind_speed_unit = $storedUnits.wind_speed_unit;
|
|
params.precipitation_unit = $storedUnits.precipitation_unit;
|
|
});
|
|
|
|
let variableSidebarOpen = $state(false);
|
|
|
|
// Meteogram canvases are shorter on phones, where a 300px plot eats most of
|
|
// the viewport. The placeholder below uses the same number, so the reserved
|
|
// space still matches exactly.
|
|
let narrowViewport = $state(false);
|
|
onMount(() => {
|
|
const mq = window.matchMedia('(max-width: 767px)');
|
|
const apply = () => (narrowViewport = mq.matches);
|
|
apply();
|
|
mq.addEventListener('change', apply);
|
|
return () => mq.removeEventListener('change', apply);
|
|
});
|
|
let chartHeight = $derived(narrowViewport ? 215 : 300);
|
|
|
|
// Number of meteogram panels: reserves the chart area height before data
|
|
// arrives (no layout shift)
|
|
let enabledChartCount = $derived($storedChartLayout.filter((p) => p.variables.length > 0).length);
|
|
|
|
// The hourly table is a header row, the time/daylight row, then one row per
|
|
// enabled variable, so the placeholder below reserves exactly that and
|
|
// nothing under it jumps when the real table arrives. Rows are shorter below
|
|
// lg, where the cells sit tighter - measured, not guessed: 36px against 55px,
|
|
// and the time row is 48px at every width.
|
|
let compactRows = $state(false);
|
|
onMount(() => {
|
|
const mq = window.matchMedia('(max-width: 1023px)');
|
|
const apply = () => (compactRows = mq.matches);
|
|
apply();
|
|
mq.addEventListener('change', apply);
|
|
return () => mq.removeEventListener('change', apply);
|
|
});
|
|
let tableRowPx = $derived(compactRows ? 36 : 55);
|
|
const TABLE_TIME_ROW_PX = 48;
|
|
let enabledTableRows = $derived(Object.values($storedVariablePrefs.table).filter(Boolean).length);
|
|
|
|
// Request only the hourly variables the table rows and meteograms actually
|
|
// show, so unused variables are never fetched. weather_code is always
|
|
// included: the day cards / strip derive their day- and night-period icons
|
|
// from the hourly codes locally.
|
|
let hourlyVars = $derived([
|
|
...new Set([
|
|
...neededHourlyApiVars(
|
|
$storedVariablePrefs.table,
|
|
$storedChartLayout.flatMap((p) => p.variables)
|
|
),
|
|
'weather_code'
|
|
])
|
|
]);
|
|
|
|
// the URL is the source of truth: location comes from the load function,
|
|
// which is also correct on hydrated prerendered pages. The persisted store
|
|
// only mirrors it so the header and bare /weather/* redirects follow along.
|
|
let location = $derived(data.location);
|
|
$effect(() => {
|
|
storedLocation.set(data.location);
|
|
});
|
|
|
|
// Lets the strip's side buttons hand over to the archive / seasonal outlook
|
|
// for the same place once their range is exhausted.
|
|
let locationRoute = $derived(buildLocationRoute(location));
|
|
|
|
// When a regional model has no data here, point at a place it does cover
|
|
// rather than only offering to abandon the model.
|
|
let suggestedCity = $derived.by(() => {
|
|
const city = inDomainCity(params.models?.[0] ?? '');
|
|
// pointless to offer the place we are already on
|
|
return city && city.slug !== locationRoute ? city : null;
|
|
});
|
|
|
|
let mounted = $state(false);
|
|
let loading = $state(true);
|
|
let loadError = $state<FriendlyWeatherError | null>(null);
|
|
let requestVersion = 0;
|
|
// bumped by the "Try again" button to re-run the fetch effect
|
|
let retryNonce = $state(0);
|
|
|
|
/** Back to the model that always has data (also what ModelSelector does). */
|
|
function resetToBestMatch() {
|
|
params.models = ['best_match'];
|
|
storedModel.set('best_match');
|
|
forecastDays = 7;
|
|
pastDays = 0;
|
|
}
|
|
|
|
// A request can succeed yet contain nothing usable: regional models return
|
|
// all-NaN outside their coverage area. Detect that so the page can say so
|
|
// instead of silently rendering an empty strip.
|
|
let noData = $derived.by((): boolean => {
|
|
const fd = fetchedDaily;
|
|
if (loading || !fd) return false;
|
|
return !fd.daily.temperature_2m_max.some(
|
|
(v, i) => v != null && !isNaN(v) && !(v === 0 && fd.daily.temperature_2m_min[i] === 0)
|
|
);
|
|
});
|
|
|
|
// 7 by default; the user can extend to the model's longer range (up to 16 days)
|
|
let forecastDays = $state(7);
|
|
// 0 by default; the user can pull in a few recent past days
|
|
let pastDays = $state(0);
|
|
|
|
const selectedDay = new SvelteDate();
|
|
|
|
let fetchedHourly: FetchedHourly | null = $state(null);
|
|
let fetchedDaily: FetchedDaily | null = $state(null);
|
|
|
|
// Stable per-day key: the fade only replays when the day actually changes,
|
|
// not on every clock tick or refetch.
|
|
let selectedDayKey = $derived.by(() => {
|
|
const fd = fetchedDaily;
|
|
return fd ? formatZoned(selectedDay, fd.timezone, 'yyyy-MM-dd') : '';
|
|
});
|
|
|
|
// A model swap can leave the open day outside what the new model covers (a
|
|
// short-range model after a 15-day one, say). Rather than showing an empty
|
|
// day, fall back to the nearest day that does have data - searching forward
|
|
// first, then back.
|
|
$effect(() => {
|
|
const fd = fetchedDaily;
|
|
if (!fd || wantedDay) return;
|
|
const days = fd.dailyDates;
|
|
if (days.length === 0) return;
|
|
|
|
const covered = (i: number) => {
|
|
const max = fd.daily.temperature_2m_max[i];
|
|
return max != null && Number.isFinite(max);
|
|
};
|
|
const current = days.findIndex(
|
|
(d) => formatZoned(d, fd.timezone, 'yyyy-MM-dd') === selectedDayKey
|
|
);
|
|
if (current >= 0 && covered(current)) return;
|
|
|
|
const from = current >= 0 ? current : 0;
|
|
for (let step = 0; step < days.length; step++) {
|
|
for (const i of [from + step, from - step]) {
|
|
if (i >= 0 && i < days.length && covered(i)) {
|
|
selectedDay.setTime(days[i].getTime());
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Charts intentionally keep their current range: they show the full week
|
|
// unless the user narrows it via the range presets or Ctrl+scroll.
|
|
// A model that answers with a broken timestamp must not be able to park an
|
|
// unreadable date in `selectedDay`: everything downstream formats it, and a
|
|
// date that cannot be formatted takes the page with it.
|
|
const switchDay = (date: Date) => {
|
|
const time = date?.getTime();
|
|
if (!Number.isFinite(time)) return;
|
|
runDayTransition(() => selectedDay.setTime(time));
|
|
};
|
|
|
|
onMount(() => {
|
|
// the URL wins over the persisted choice, so a shared link opens on the
|
|
// same model the sender was looking at
|
|
const fromUrl = get(page).url.searchParams.get('model');
|
|
params.models = [fromUrl || get(storedModel)];
|
|
mounted = true;
|
|
});
|
|
|
|
// Apply ?day= once the forecast is in: the parameter is a plain calendar date,
|
|
// which only means something against the location's own timezone.
|
|
// A `?day=` outside what this page can ever show (more than 3 days back, or
|
|
// beyond the 15-day horizon) is dropped and we open on today. A day that IS
|
|
// reachable but sits outside the default 7-day window widens the request up
|
|
// front, so the link loads straight into the right day instead of showing
|
|
// today and making the visitor click.
|
|
let wantedDay: string | null = $state(null);
|
|
onMount(() => {
|
|
const param = get(page).url.searchParams.get('day');
|
|
if (!param || !/^\d{4}-\d{2}-\d{2}$/.test(param)) return;
|
|
|
|
const target = Date.parse(`${param}T12:00:00Z`);
|
|
if (Number.isNaN(target)) return;
|
|
const now = new Date();
|
|
const todayNoon = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 12);
|
|
const offset = Math.round((target - todayNoon) / 86_400_000);
|
|
|
|
if (offset < -3 || offset > 15) return; // out of reach: stay on today
|
|
wantedDay = param;
|
|
if (offset < 0) pastDays = 3;
|
|
if (offset >= 7) forecastDays = 15;
|
|
});
|
|
|
|
// Select it as soon as a fetch arrives that actually covers the day.
|
|
$effect(() => {
|
|
const fd = fetchedDaily;
|
|
const wanted = wantedDay;
|
|
if (!fd || !wanted) return;
|
|
const match = fd.dailyDates.find((d) => formatZoned(d, fd.timezone, 'yyyy-MM-dd') === wanted);
|
|
if (match) {
|
|
selectedDay.setTime(match.getTime());
|
|
wantedDay = null;
|
|
}
|
|
});
|
|
|
|
// Mirror the open day and the plotted model back into the URL.
|
|
$effect(() => {
|
|
const dayKey = selectedDayKey;
|
|
const model = params.models?.[0];
|
|
if (!mounted || !dayKey) return;
|
|
const isToday = fetchedDaily
|
|
? dayKey === formatZoned(new Date(), fetchedDaily.timezone, 'yyyy-MM-dd')
|
|
: false;
|
|
syncSearchParams({
|
|
day: isToday ? null : dayKey,
|
|
model: unlessDefault(model, 'best_match')
|
|
});
|
|
});
|
|
|
|
$effect(() => {
|
|
const loc = location;
|
|
const modelList = params.models;
|
|
const requestVars = hourlyVars;
|
|
void retryNonce; // re-run on "Try again"
|
|
|
|
if (!mounted || !loc || !modelList?.length) return;
|
|
|
|
// versioned so a slow stale response can never overwrite a newer one
|
|
const version = ++requestVersion;
|
|
loading = true;
|
|
loadError = null;
|
|
|
|
fetchWeekForecast({
|
|
latitude: loc.latitude!,
|
|
longitude: loc.longitude!,
|
|
model: modelList[0],
|
|
hourlyVariables: requestVars,
|
|
temperature_unit: params.temperature_unit as 'celsius' | 'fahrenheit',
|
|
wind_speed_unit: params.wind_speed_unit as 'kmh' | 'ms' | 'mph' | 'kn',
|
|
precipitation_unit: params.precipitation_unit as 'mm' | 'inch',
|
|
forecast_days: forecastDays,
|
|
past_days: pastDays,
|
|
timezone: loc.timezone
|
|
})
|
|
.then((result: WeekForecastResult) => {
|
|
if (version !== requestVersion) return;
|
|
|
|
fetchedHourly = {
|
|
hourly: result.hourly,
|
|
utc_offset_seconds: result.utcOffsetSeconds,
|
|
timezone: result.timezone,
|
|
timestamps: result.hourlyTimestamps,
|
|
hourlyDates: result.hourlyDates,
|
|
daylightBands: result.daylightBands
|
|
};
|
|
|
|
// Split the hourly codes into daylight / following-night buckets so
|
|
// the night badge shows the actual night conditions instead of a
|
|
// night-styled copy of the day icon.
|
|
const parts = computeDayNightWeatherCodes(
|
|
result.hourlyTimestamps,
|
|
result.hourly.weather_code,
|
|
result.daily.sunrise,
|
|
result.daily.sunset
|
|
);
|
|
fetchedDaily = {
|
|
daily: result.daily,
|
|
timezone: result.timezone,
|
|
dailyDates: result.dailyDates,
|
|
dayCodes: parts.day.map((c, i) => c ?? result.daily.weather_code[i]),
|
|
nightCodes: parts.night.map((c, i) => c ?? parts.day[i] ?? result.daily.weather_code[i])
|
|
};
|
|
|
|
loading = false;
|
|
})
|
|
.catch((err: unknown) => {
|
|
if (version !== requestVersion) return;
|
|
loadError = humanizeWeatherError(err);
|
|
loading = false;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Drizz.li | {m.page_week_title()}</title>
|
|
<link rel="canonical" href="https://drizz.li/weather/week" />
|
|
<meta name="description" content="Weekly weather forecast with detailed hourly data" />
|
|
</svelte:head>
|
|
|
|
<!-- the model picker rides in the layout's location row (see weather/+layout) -->
|
|
{#snippet heroActions()}
|
|
<div class="flex w-full min-w-0 items-center gap-3 sm:w-auto">
|
|
<ModelSelector
|
|
selectedModel={params.models?.[0] ?? 'best_match'}
|
|
onModelChange={(model) => {
|
|
params.models = [model];
|
|
storedModel.set(model);
|
|
// a new model may not support the extended / past range
|
|
forecastDays = 7;
|
|
pastDays = 0;
|
|
}}
|
|
/>
|
|
</div>
|
|
{/snippet}
|
|
|
|
<div class="week-page">
|
|
<div class="weather-content" style="min-height: 50vh">
|
|
<VariableSidebar open={variableSidebarOpen} onClose={() => (variableSidebarOpen = false)} />
|
|
|
|
{#if loadError}
|
|
<div class="mb-4 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm">
|
|
<p class="font-semibold text-destructive">{loadError.title}</p>
|
|
{#if loadError.hint}
|
|
<p class="mt-0.5 text-destructive/90">{loadError.hint}</p>
|
|
{/if}
|
|
<div class="mt-2.5 flex flex-wrap gap-2">
|
|
<button
|
|
class="cursor-pointer rounded-md border border-destructive/40 bg-background px-3 py-1 text-xs font-semibold text-destructive transition-colors hover:bg-destructive/10"
|
|
onclick={() => retryNonce++}
|
|
>
|
|
{m.action_try_again()}
|
|
</button>
|
|
{#if suggestedCity}
|
|
<a
|
|
class="cursor-pointer rounded-md border border-border bg-background px-3 py-1 text-xs font-semibold text-foreground transition-colors hover:bg-muted"
|
|
href={href('/weather/week/[location]', { location: suggestedCity.slug })}
|
|
>
|
|
{m.no_data_try_city({ city: suggestedCity.label })}
|
|
</a>
|
|
{/if}
|
|
{#if params.models?.[0] !== 'best_match'}
|
|
<button
|
|
class="cursor-pointer rounded-md border border-border bg-background px-3 py-1 text-xs font-semibold text-foreground transition-colors hover:bg-muted"
|
|
onclick={resetToBestMatch}
|
|
>
|
|
{m.no_data_best_match()}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{#if loadError.detail}
|
|
<details class="mt-2 text-xs text-destructive/70">
|
|
<summary class="cursor-pointer select-none">{m.error_technical_details()}</summary>
|
|
<p class="mt-1 font-mono break-all">{loadError.detail}</p>
|
|
</details>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if noData && !loadError}
|
|
<!-- the request succeeded but every value is NaN: the selected (regional)
|
|
model doesn't cover this location -->
|
|
<div
|
|
class="mb-4 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-md border border-amber-300/60 bg-amber-50 px-3.5 py-2.5 text-sm text-amber-800 dark:border-amber-800/50 dark:bg-amber-950/30 dark:text-amber-200"
|
|
>
|
|
<svg
|
|
class="h-4 w-4 shrink-0"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 9v4m0 4h.01M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z"
|
|
/>
|
|
</svg>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="font-semibold">{m.no_data_title()}</p>
|
|
<p class="text-[13px] opacity-90">
|
|
{m.no_data_body({ location: location.name ?? '' })}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
{#if suggestedCity}
|
|
<a
|
|
class="cursor-pointer rounded-md border border-amber-500/50 bg-background/60 px-3 py-1 text-xs font-semibold transition-colors hover:bg-background"
|
|
href={href('/weather/week/[location]', { location: suggestedCity.slug })}
|
|
>
|
|
{m.no_data_try_city({ city: suggestedCity.label })}
|
|
</a>
|
|
{/if}
|
|
<button
|
|
class="cursor-pointer rounded-md border border-amber-500/50 bg-background/60 px-3 py-1 text-xs font-semibold transition-colors hover:bg-background"
|
|
onclick={resetToBestMatch}
|
|
>
|
|
{m.no_data_best_match()}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- The sticky day strip, the hourly table AND the meteograms share this
|
|
wrapper, so the strip stays stuck for the entire page: the full day
|
|
cards collapse into the compact strip as it sticks (on md+ the bar
|
|
docks under the topbar at its exact height). timeline-scope hoists
|
|
the strip's sentinel view-timeline so the sticky strip (a sibling of
|
|
the sentinel) can scrub its collapse from it. -->
|
|
<div style="timeline-scope: --daystrip-sentinel">
|
|
<!-- rendered even before the data lands: the strip's box is a fixed
|
|
height, so keeping it mounted reserves its space (it shows skeleton
|
|
tiles meanwhile) instead of shoving the page down on arrival -->
|
|
<DailyStripSticky
|
|
daily={fetchedDaily}
|
|
{selectedDay}
|
|
units={params}
|
|
onSelectDay={switchDay}
|
|
canExtend={forecastDays < 15}
|
|
onExtend={() => (forecastDays = 15)}
|
|
canExtendPast={pastDays < 3}
|
|
onExtendPast={() => (pastDays = 3)}
|
|
{locationRoute}
|
|
/>
|
|
|
|
<!-- `relative` is what lets the placeholder fade out on top of the table
|
|
instead of holding a second slot in the layout (see skeletonOut). -->
|
|
<div class="relative">
|
|
{#if fetchedHourly && fetchedDaily}
|
|
<div class="day-region-table" use:daySwap={selectedDayKey}>
|
|
<HourlyTable
|
|
data={fetchedHourly}
|
|
daily={fetchedDaily}
|
|
{selectedDay}
|
|
units={params}
|
|
locationName={location.name ?? ''}
|
|
onCustomize={() => (variableSidebarOpen = true)}
|
|
/>
|
|
</div>
|
|
{:else}
|
|
<!-- Mirrors the real table: same header bar and the same body height,
|
|
so the heading doesn't pop in and nothing below moves. -->
|
|
<div
|
|
in:fade={{ duration: 200 }}
|
|
out:skeletonOut
|
|
class="-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 gap-2 border-b border-border/70 bg-muted/40 px-4 py-2.5"
|
|
>
|
|
<div class="h-6 w-44 animate-pulse rounded bg-muted"></div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="h-8 w-24 animate-pulse rounded-lg bg-muted"></div>
|
|
<div class="h-8 w-20 animate-pulse rounded-lg bg-muted"></div>
|
|
</div>
|
|
</div>
|
|
<!-- one placeholder per row the real table will render, so the body
|
|
reads as a loading table rather than a blank panel -->
|
|
<div class="divide-y divide-border/50">
|
|
<!-- the time + daylight row, which is taller than the variable rows -->
|
|
<div class="flex items-center gap-4 px-4" style="height: {TABLE_TIME_ROW_PX}px">
|
|
<div class="h-3.5 w-14 shrink-0 animate-pulse rounded bg-muted"></div>
|
|
<div class="h-5 flex-1 animate-pulse rounded bg-muted/70"></div>
|
|
</div>
|
|
{#each { length: enabledTableRows } as _, i (i)}
|
|
<div class="flex items-center gap-4 px-4" style="height: {tableRowPx}px">
|
|
<div class="h-3.5 w-14 shrink-0 animate-pulse rounded bg-muted"></div>
|
|
<div class="h-3.5 flex-1 animate-pulse rounded bg-muted/70"></div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="relative">
|
|
{#if fetchedHourly && fetchedDaily}
|
|
<div class="day-region-summary" use:daySwap={selectedDayKey}>
|
|
<DaySummary data={fetchedHourly} daily={fetchedDaily} {selectedDay} units={params} />
|
|
</div>
|
|
{:else}
|
|
<!-- Same footprint as the written forecast, so it doesn't shove the
|
|
meteograms down when it arrives. The heights are measured from the
|
|
real card at each breakpoint: on phones the narrative is clamped to
|
|
five lines with a fixed toggle row, so that side is exact; from md
|
|
up the text runs free and this is the typical height. The sun/moon
|
|
grid reflows at sm, md and lg, which is why all four are needed. -->
|
|
<section class="mt-6" in:fade={{ duration: 200 }} out:skeletonOut>
|
|
<div
|
|
class="h-96.5 animate-pulse rounded-2xl border border-border/70 bg-card sm:h-85 md:h-73 lg:h-56"
|
|
></div>
|
|
</section>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="relative">
|
|
{#if fetchedHourly}
|
|
<div class="day-region-charts" use:daySwap={selectedDayKey}>
|
|
<MeteogramCharts
|
|
data={fetchedHourly}
|
|
{selectedDay}
|
|
units={params}
|
|
{loading}
|
|
{chartHeight}
|
|
/>
|
|
</div>
|
|
{:else}
|
|
<!-- reserve the exact chart area height before the first fetch resolves,
|
|
header row included -->
|
|
<section class="mt-8" in:fade={{ duration: 200 }} out:skeletonOut>
|
|
<!-- The real header wraps to two rows until the controls fit beside
|
|
the title, which happens at different widths than you would
|
|
expect because the sidebar takes its share from md up. These
|
|
min-heights follow the measured wrap points. -->
|
|
<div
|
|
class="mb-3 flex min-h-27 flex-wrap items-center justify-between gap-2 sm:min-h-16.5 md:min-h-27 lg:min-h-16.5 xl:min-h-7.5"
|
|
>
|
|
<div class="h-7 w-52 animate-pulse rounded bg-muted"></div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="h-7 w-56 animate-pulse rounded-lg bg-muted"></div>
|
|
<div class="h-7 w-24 animate-pulse rounded-lg bg-muted"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Each meteogram is its plot plus a title row and axis labels, so
|
|
the reserved box needs that chrome on top of the plot height or
|
|
everything below lands ~50px per chart too high. -->
|
|
<ChartContainer
|
|
loading
|
|
chartCount={enabledChartCount || 1}
|
|
chartHeight={chartHeight + (narrowViewport ? 43 : 62)}
|
|
/>
|
|
</section>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if selectedDayKey}
|
|
<NearbyCities
|
|
latitude={location.latitude}
|
|
longitude={location.longitude}
|
|
population={location.population}
|
|
countryCode={location.country_code}
|
|
{selectedDayKey}
|
|
units={$storedUnits}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|