modular meteograms

src/routes/weather/week/[location]/VariableSidebar.svelte

@@ -23,15 +23,6 @@
 		{ key: 'precipitation', label: 'Precipitation' }
 	];
 
-	const chartVariables = [
-		{ key: 'temperature', label: 'Temperature' },
-		{ key: 'cloud_cover', label: 'Cloud cover' },
-		{ key: 'precipitation', label: 'Precipitation' },
-		{ key: 'precipitation_probability', label: 'Precipitation probability' },
-		{ key: 'wind', label: 'Wind speed' },
-		{ key: 'humidity', label: 'Humidity' }
-	];
-
 	function toggle(section: 'table' | 'charts', key: string) {
 		storedVariablePrefs.update((prefs) => {
 			const current = { ...defaultVariablePrefs[section], ...prefs[section] };
@@ -107,26 +98,10 @@
 					</div>
 				</section>
 
-				<section>
-					<h3 class="mb-2 text-[11px] font-bold tracking-wider text-primary uppercase">
-						Meteogram charts
-					</h3>
-					<div class="flex flex-col gap-1">
-						{#each chartVariables as variable (variable.key)}
-							<div class="flex items-center gap-2.5 rounded-md px-1 py-1 hover:bg-muted/60">
-								<Checkbox
-									id="chart_var_{variable.key}"
-									class="cursor-pointer"
-									checked={$storedVariablePrefs.charts?.[variable.key] ?? true}
-									onCheckedChange={() => toggle('charts', variable.key)}
-								/>
-								<Label class="flex-1 cursor-pointer text-sm" for="chart_var_{variable.key}">
-									{variable.label}
-								</Label>
-							</div>
-						{/each}
-					</div>
-				</section>
+				<p class="text-xs text-muted-foreground">
+					Meteogram variables are configured with the <span class="font-semibold">Customize</span>
+					button above the charts.
+				</p>
 			</div>
 
 			<div class="border-t border-border px-5 py-3">