feat: canvas to echarts (#5)

Co-authored-by: terraputix <terraputix@mailbox.org>
Reviewed-on: useweb/ombrella#5

src/routes/weather/compare/+page.svelte

@@ -8,12 +8,10 @@
 	import {
 		buildAverageSeries,
 		buildCurrentTimeSeries,
-		buildDaylightMarkAreas,
 		buildDaylightSeries,
 		buildModelSeries,
 		calculateAverage,
 		composeChartOption,
-		convertTimestamps,
 		findUnit,
 		getThemeColors
 	} from '$lib/utils/echarts';
@@ -24,6 +22,12 @@
 	import { Label } from '$lib/components/ui/label';
 	import { Switch } from '$lib/components/ui/switch';
 
+	import {
+		type MarkArea,
+		type ModelCompareResult,
+		fetchModelComparison
+	} from '$lib/services/weather';
+
 	import { hourly, models as modelsFlat } from '../options';
 	import { defaultParameters } from '../options';
 
@@ -65,7 +69,7 @@
 		hourly: Record<string, unknown>;
 		hourly_units: Record<string, string>;
 		utc_offset_seconds: number;
-		markAreas: Array<[{ xAxis: number; itemStyle: { color: string } }, { xAxis: number }]>;
+		markAreas: MarkArea[];
 		timestamps: number[];
 	}
 
@@ -102,38 +106,22 @@
 			chartInstances = [];
 			chartComponents = [];
 
-			const dataReq = await fetch(
-				`https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}&hourly=${hourlyVars.join(',')}&models=${modelList.join(',')}&timeformat=unixtime&daily=sunset,sunrise`
-			);
-			const data = await dataReq.json();
-
-			let markAreas: FetchedData['markAreas'] = [];
-
-			if ('daily' in data) {
-				let dailyFirstModelKey: string[] | string = Object.keys(data.daily)[1].split('_');
-				dailyFirstModelKey.shift();
-				dailyFirstModelKey = dailyFirstModelKey.join('_');
-
-				const sunriseKey = 'sunrise_' + dailyFirstModelKey;
-				const sunsetKey = 'sunset_' + dailyFirstModelKey;
-
-				if (sunriseKey in data.daily && sunsetKey in data.daily) {
-					markAreas = buildDaylightMarkAreas(
-						data.daily[sunriseKey],
-						data.daily[sunsetKey],
-						data.utc_offset_seconds
-					);
-				}
-			}
-
-			const timestamps = convertTimestamps(data.hourly.time, data.utc_offset_seconds);
+			const result: ModelCompareResult = await fetchModelComparison({
+				latitude: location.latitude!,
+				longitude: location.longitude!,
+				hourlyVariables: hourlyVars,
+				models: modelList,
+				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'
+			});
 
 			fetchedData = {
-				hourly: data.hourly,
-				hourly_units: data.hourly_units,
-				utc_offset_seconds: data.utc_offset_seconds,
-				markAreas,
-				timestamps
+				hourly: result.hourlyFlat,
+				hourly_units: result.hourlyUnitsFlat,
+				utc_offset_seconds: result.utcOffsetSeconds,
+				markAreas: result.markAreas,
+				timestamps: result.timestamps
 			};
 
 			loading = false;
@@ -158,7 +146,7 @@
 
 		const colors = getThemeColors();
 		const variableCount = params.hourly?.length || 0;
-		const timeLength = (hourlyData.time as number[]).length;
+		const timeLength = timestamps.length;
 		const newOptions: Array<Record<string, unknown>> = [];
 
 		for (let vi = 0; vi < variableCount; vi++) {