modular meteograms

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

@@ -25,7 +25,7 @@
 		fetchModelComparison
 	} from '$lib/services/weather';
 
-	import { hourly, modelGroups } from '../../options';
+	import { findModel, hourly, modelGroups } from '../../options';
 	import { defaultParameters } from '../../options';
 	import ModelPictogramTimeline from './ModelPictogramTimeline.svelte';
 
@@ -174,8 +174,11 @@
 				if (model === 'time') continue;
 				if (!model.startsWith(variable)) continue;
 
+				// strip the variable prefix and use the concise model label so the
+				// tooltip/legend stay readable (model ids are very long)
+				const modelId = model.slice(variable.length + 1);
 				series.push({
-					name: model,
+					name: findModel(modelId)?.label ?? modelId,
 					type: isColumn ? 'bar' : 'line',
 					color: SERIES_COLORS[modelIndex % SERIES_COLORS.length],
 					data: values as (number | null)[],
@@ -186,7 +189,7 @@
 
 			const { average } = calculateAverage(hourlyData, variable, timeLength);
 			series.push({
-				name: variable + '_average',
+				name: 'Average',
 				type: isColumn ? 'bar' : 'line',
 				color: CHART_COLORS.average,
 				data: average,