modular meteograms

src/routes/weather/week/[location]/+page.svelte

@@ -3,7 +3,12 @@
 	import { SvelteDate } from 'svelte/reactivity';
 	import { get } from 'svelte/store';
 
-	import { storedLocation, storedModel, storedVariablePrefs } from '$lib/stores/settings';
+	import {
+		storedChartLayout,
+		storedLocation,
+		storedModel,
+		storedVariablePrefs
+	} from '$lib/stores/settings';
 
 	import { ChartContainer } from '$lib/components/charts';
 
@@ -15,6 +20,7 @@
 	import MeteogramCharts from './MeteogramCharts.svelte';
 	import ModelSelector from './ModelSelector.svelte';
 	import VariableSidebar from './VariableSidebar.svelte';
+	import { neededHourlyApiVars } from './variables';
 
 	import type { PageData } from './$types';
 	import type { FetchedDaily, FetchedHourly } from './types';
@@ -28,16 +34,18 @@
 
 	let variableSidebarOpen = $state(false);
 
-	// Number of meteogram chart panels currently enabled: used to reserve the
-	// exact chart area height before data arrives (no layout shift)
-	let enabledChartCount = $derived.by(() => {
-		const on = (key: string) => $storedVariablePrefs.charts?.[key] ?? true;
-		return (
-			(on('temperature') || on('cloud_cover') ? 1 : 0) +
-			(on('precipitation') || on('precipitation_probability') ? 1 : 0) +
-			(on('wind') || on('humidity') ? 1 : 0)
-		);
-	});
+	// 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);
+
+	// Request only the hourly variables the table rows and meteograms actually
+	// show, so unused variables are never fetched.
+	let hourlyVars = $derived(
+		neededHourlyApiVars(
+			$storedVariablePrefs.table,
+			$storedChartLayout.flatMap((p) => p.variables)
+		)
+	);
 
 	// the URL is the source of truth: location comes from the load function,
 	// which is also correct on hydrated prerendered pages. The persisted store
@@ -72,6 +80,7 @@
 	$effect(() => {
 		const loc = location;
 		const modelList = params.models;
+		const requestVars = hourlyVars;
 
 		if (!mounted || !loc || !modelList?.length) return;
 
@@ -84,6 +93,7 @@
 			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',