feat: model comparison picto timeline

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

@@ -29,6 +29,7 @@
 
 	import { hourly, models as modelsFlat } from '../../options';
 	import { defaultParameters } from '../../options';
+	import ModelPictogramTimeline from './ModelPictogramTimeline.svelte';
 
 	import type * as echarts from 'echarts';
 
@@ -79,6 +80,8 @@
 		timezone: string;
 		markAreas: MarkArea[];
 		timestamps: number[];
+		sunrise: number[];
+		sunset: number[];
 	}
 
 	let fetchedData: FetchedData | null = $state(null);
@@ -119,7 +122,7 @@
 			const result: ModelCompareResult = await fetchModelComparison({
 				latitude: loc.latitude!,
 				longitude: loc.longitude!,
-				hourlyVariables: hourlyVars,
+				hourlyVariables: [...new Set([...hourlyVars, 'weather_code'])],
 				models: modelList,
 				temperature_unit: params.temperature_unit as 'celsius' | 'fahrenheit',
 				wind_speed_unit: params.wind_speed_unit as 'kmh' | 'ms' | 'mph' | 'kn',
@@ -132,7 +135,9 @@
 				hourly_units: result.hourlyUnitsFlat,
 				timezone: result.timezone,
 				markAreas: result.markAreas,
-				timestamps: result.timestamps
+				timestamps: result.timestamps,
+				sunrise: result.sunrise,
+				sunset: result.sunset
 			};
 
 			loading = false;
@@ -150,12 +155,13 @@
 		const _showLegend = showLegend;
 
 		const colors = getThemeColors();
-		const variableCount = params.hourly?.length || 0;
+		const chartVariables = params.hourly?.filter((v) => v !== 'weather_code') || [];
+		const variableCount = chartVariables.length;
 		const timeLength = timestamps.length;
 		const newOptions: Array<Record<string, unknown>> = [];
 
 		for (let vi = 0; vi < variableCount; vi++) {
-			const variable = params.hourly![vi];
+			const variable = chartVariables[vi];
 			const unit = findUnit(hourly_units, hourlyData, variable);
 
 			const series: Array<Record<string, unknown>> = [];
@@ -195,7 +201,7 @@
 				title: isFirst
 					? {
 							text: 'Model Compare',
-							subtext: `Compare ${params.hourly?.join(', ') || ''} in models: ${params.models?.join(', ') || ''}`
+							subtext: `Compare ${chartVariables.join(', ') || ''} in models: ${params.models?.join(', ') || ''}`
 						}
 					: null,
 				tooltip: { unit, timezone },
@@ -222,11 +228,7 @@
 
 <!-- ─── Chart Area ─────────────────────────────────────────────────────────── -->
 
-<ChartContainer
-	{loading}
-	chartCount={params.hourly?.length || 0}
-	chartHeight={showLegend ? 400 : 300}
->
+<ChartContainer {loading} chartCount={chartOptions.length} chartHeight={showLegend ? 400 : 300}>
 	{#each chartOptions as option, i (i)}
 		<EChart
 			{option}
@@ -237,6 +239,17 @@
 	{/each}
 </ChartContainer>
 
+{#if fetchedData && !loading}
+	<ModelPictogramTimeline
+		timestamps={fetchedData.timestamps}
+		hourlyFlat={fetchedData.hourly as Record<string, number[]>}
+		models={params.models || []}
+		sunrise={fetchedData.sunrise}
+		sunset={fetchedData.sunset}
+		timezone={fetchedData.timezone}
+	/>
+{/if}
+
 <!-- ─── Toolbar: Controls + Download ───────────────────────────────────────── -->
 
 <div class="mt-6 md:mt-10">