remove echarts, use canvas

src/lib/services/weather.ts

@@ -13,7 +13,7 @@
 import { Unit } from '@openmeteo/sdk/unit';
 import { fetchWeatherApi } from 'openmeteo';
 
-import { buildDaylightMarkAreas } from '$lib/utils/echarts';
+import { type DaylightBand, buildDaylightBands } from '$lib/charts/bands';
 
 import type { VariableWithValues } from '@openmeteo/sdk/variable-with-values';
 import type { VariablesWithTime } from '@openmeteo/sdk/variables-with-time';
@@ -157,7 +157,7 @@ export interface WeatherUnitParams {
 	precipitation_unit?: 'mm' | 'inch';
 }
 
-export type MarkArea = [{ xAxis: number; itemStyle: { color: string } }, { xAxis: number }];
+export type { DaylightBand };
 
 // ─── Week Forecast Types ────────────────────────────────────────────────────────
 
@@ -201,7 +201,7 @@ export interface WeekForecastResult {
 	hourlyTimestamps: number[];
 	hourlyDates: Date[];
 	dailyDates: Date[];
-	markAreas: MarkArea[];
+	daylightBands: DaylightBand[];
 }
 
 // ─── Model Comparison Types ─────────────────────────────────────────────────────
@@ -221,7 +221,7 @@ export interface ModelCompareResult {
 	timestamps: number[];
 	utcOffsetSeconds: number;
 	timezone: string;
-	markAreas: MarkArea[];
+	daylightBands: DaylightBand[];
 	sunrise: number[];
 	sunset: number[];
 	units: Record<string, string>;
@@ -251,7 +251,7 @@ export interface EnsembleForecastResult {
 	timestamps: number[];
 	utcOffsetSeconds: number;
 	timezone: string;
-	markAreas: MarkArea[];
+	daylightBands: DaylightBand[];
 	/** Flat record compatible with existing chart utilities (keys like "temperature_2m_member00") */
 	hourlyFlat: Record<string, number[]>;
 	hourlyUnitsFlat: Record<string, string>;
@@ -360,7 +360,7 @@ export async function fetchWeekForecast(params: WeekForecastParams): Promise<Wee
 		winddirection_10m_dominant: getValues(dailyBlock.variables(9)!)
 	};
 
-	const markAreas = buildDaylightMarkAreas(daily.sunrise, daily.sunset);
+	const daylightBands = buildDaylightBands(daily.sunrise, daily.sunset);
 
 	return {
 		hourly,
@@ -370,7 +370,7 @@ export async function fetchWeekForecast(params: WeekForecastParams): Promise<Wee
 		hourlyTimestamps,
 		hourlyDates,
 		dailyDates,
-		markAreas
+		daylightBands
 	};
 }
 
@@ -409,7 +409,7 @@ export async function fetchModelComparison(
 	const timestamps = getTimestamps(hourlyBlock);
 
 	// Extract sunrise/sunset from the first response's daily block
-	let markAreas: MarkArea[] = [];
+	let daylightBands: DaylightBand[] = [];
 	let sunrise: number[] = [];
 	let sunset: number[] = [];
 	const dailyBlock = firstResponse.daily();
@@ -418,7 +418,7 @@ export async function fetchModelComparison(
 		const sunsetVar = dailyBlock.variables(1)!;
 		sunrise = getInt64Values(sunriseVar);
 		sunset = getInt64Values(sunsetVar);
-		markAreas = buildDaylightMarkAreas(sunrise, sunset);
+		daylightBands = buildDaylightBands(sunrise, sunset);
 	}
 
 	// Process each model's response
@@ -474,7 +474,7 @@ export async function fetchModelComparison(
 		timestamps,
 		utcOffsetSeconds,
 		timezone,
-		markAreas,
+		daylightBands,
 		sunrise,
 		sunset,
 		units,
@@ -531,15 +531,15 @@ export async function fetchEnsembleForecast(
 	const timestamps = getTimestamps(hourlyBlock);
 	const timeLength = timestamps.length;
 
-	// Extract sunrise/sunset for mark areas
-	let markAreas: MarkArea[] = [];
+	// Extract sunrise/sunset for daylight bands
+	let daylightBands: DaylightBand[] = [];
 	if (dailyResponses.length > 0) {
 		const dailyResponse = dailyResponses[0];
 		const dailyBlock = dailyResponse.daily();
 		if (dailyBlock) {
 			const sunrise = getInt64Values(dailyBlock.variables(0)!);
 			const sunset = getInt64Values(dailyBlock.variables(1)!);
-			markAreas = buildDaylightMarkAreas(sunrise, sunset);
+			daylightBands = buildDaylightBands(sunrise, sunset);
 		}
 	}
 
@@ -629,7 +629,7 @@ export async function fetchEnsembleForecast(
 		timestamps,
 		utcOffsetSeconds,
 		timezone,
-		markAreas,
+		daylightBands,
 		hourlyFlat,
 		hourlyUnitsFlat
 	};