src/routes/weather/compare/[location]/ModelPictogramTimeline.svelte

@@ -45,6 +45,11 @@
 		x: number;
 	}
 
+	interface SunlightSegment {
+		x1: number;
+		x2: number;
+	}
+
 	interface TooltipRow {
 		modelId: string;
 		label: string;
@@ -75,6 +80,7 @@
 	const ICON_BOX_WIDTH = 20;
 	const ICON_BOX_HEIGHT = 30;
 	const MIN_ICON_GAP = 20;
+	const SUNLIGHT_STRIP_H = 4;
 	const EXPORT_TITLE_H = 30;
 	const SAMPLE_STEPS = [1, 2, 3, 4, 6, 8, 12, 24] as const;
 
@@ -212,6 +218,16 @@
 		}
 		return separators;
 	});
+	let sunlightSegments = $derived.by((): SunlightSegment[] => {
+		const segments: SunlightSegment[] = [];
+		for (let index = 0; index < sunrise.length; index++) {
+			const start = Math.max(viewStart, sunrise[index]);
+			const end = Math.min(viewEnd, sunset[index] ?? sunrise[index]);
+			if (end <= start) continue;
+			segments.push({ x1: xForTime(start), x2: xForTime(end) });
+		}
+		return segments;
+	});
 
 	let hoverX = $derived(
 		sharedHover !== null && sharedHover >= viewStart && sharedHover <= viewEnd
@@ -498,6 +514,7 @@
 		const foreground = color('--foreground', '#1f2937');
 		const muted = color('--muted-foreground', '#6b7280');
 		const grid = color('--border', 'rgba(0, 0, 0, 0.12)');
+		const sunlight = color('--chart-3', '#f6c453');
 
 		context.fillStyle = background;
 		context.fillRect(0, 0, width, height + titleHeight);
@@ -513,6 +530,16 @@
 		context.beginPath();
 		context.rect(plotInsetLeft, yOffset, plotWidth, height);
 		context.clip();
+		const sunlightY = yOffset + HEADER_H - SUNLIGHT_STRIP_H;
+		context.fillStyle = muted;
+		context.globalAlpha = 0.12;
+		context.fillRect(plotInsetLeft, sunlightY, plotWidth, SUNLIGHT_STRIP_H);
+		context.fillStyle = sunlight;
+		context.globalAlpha = 0.9;
+		for (const segment of sunlightSegments) {
+			context.fillRect(segment.x1, sunlightY, segment.x2 - segment.x1, SUNLIGHT_STRIP_H);
+		}
+		context.globalAlpha = 1;
 		context.strokeStyle = grid;
 		context.lineWidth = 1;
 		for (const separator of daySeparators) {
@@ -522,13 +549,6 @@
 			context.stroke();
 		}
 		context.restore();
-		context.fillStyle = muted;
-		context.font = '600 9px system-ui, -apple-system, sans-serif';
-		context.textAlign = 'left';
-		context.textBaseline = 'middle';
-		context.fillText(m.var_cloud(), 8, yOffset + 11, Math.max(20, plotInsetLeft - 16));
-		context.font = '9px system-ui, -apple-system, sans-serif';
-		context.fillText('0–100%', 8, yOffset + 27);
 
 		context.font = '600 10px system-ui, -apple-system, sans-serif';
 		context.textAlign = 'center';
@@ -637,6 +657,7 @@
 		void themeVersion;
 		void visiblePoints;
 		void daySeparators;
+		void sunlightSegments;
 		void displayModels;
 		if (!target || currentWidth <= 0 || currentHeight <= 0) return;