i18n

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

@@ -13,6 +13,7 @@
 	import { ChartContainer, downloadChartsPng } from '$lib/components/charts';
 
 	import { CanvasChart, groupRange } from '$lib/charts';
+	import * as m from '$lib/paraglide/messages';
 
 	import { getWeatherIconName } from '../../utils/weather-codes';
 	import ChartCustomizer from './ChartCustomizer.svelte';
@@ -137,11 +138,13 @@
 	let rangePresets = $derived.by(() => {
 		const isToday = isSameDayInZone(now, selectedDay, data.timezone);
 		return [
-			{ label: 'Today', apply: () => setRangeDays(new Date(), 1) },
-			...(isToday ? [] : [{ label: 'Selected day', apply: () => setRangeDays(selectedDay, 1) }]),
-			{ label: '3 days', apply: () => setRangeDays(new Date(), 3) },
-			{ label: '5 days', apply: () => setRangeDays(new Date(), 5) },
-			{ label: 'All', apply: () => showFullRange() }
+			{ label: m.range_today(), apply: () => setRangeDays(new Date(), 1) },
+			...(isToday
+				? []
+				: [{ label: m.range_selected_day(), apply: () => setRangeDays(selectedDay, 1) }]),
+			{ label: m.range_3_days(), apply: () => setRangeDays(new Date(), 3) },
+			{ label: m.range_5_days(), apply: () => setRangeDays(new Date(), 5) },
+			{ label: m.range_all(), apply: () => showFullRange() }
 		];
 	});
 
@@ -215,7 +218,7 @@
 <section class="mt-8" transition:fade={{ duration: 200 }}>
 	<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
 		<h3 class="text-lg font-bold">
-			Meteograms
+			{m.meteograms_heading()}
 			<span class="font-semibold text-muted-foreground">
 				– {formatZoned(selectedDay, data.timezone, 'EEEE')}{getRelativeDayLabel(
 					selectedDay,
@@ -231,12 +234,12 @@
 				<kbd class="rounded border border-border bg-muted px-1 py-0.5 font-sans text-[10px]"
 					>Ctrl</kbd
 				>
-				+ scroll to zoom
+				{m.meteograms_zoom_hint_end()}
 			</span>
 			<div
 				class="inline-flex items-center rounded-lg bg-muted p-0.5 text-xs font-semibold"
 				role="group"
-				aria-label="Chart time range"
+				aria-label={m.range_group_aria()}
 			>
 				{#each rangePresets as preset (preset.label)}
 					<button
@@ -262,7 +265,7 @@
 				>
 					<path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16M8 4v4m8 2v4M6 16v4" />
 				</svg>
-				Customize
+				{m.meteograms_customize()}
 			</button>
 			<button
 				type="button"
@@ -316,7 +319,7 @@
 						<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v6h6M20 20v-6h-6" />
 						<path stroke-linecap="round" d="M20 10a8 8 0 0 0-14-4M4 14a8 8 0 0 0 14 4" />
 					</svg>
-					Reset zoom
+					{m.reset_zoom()}
 				</button>
 			{/if}
 		</div>