responsive chartjs elevation profile

website/src/lib/components/ElevationProfile.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import Chart from 'chart.js/auto';
+
+	import { selectedFiles } from '$lib/stores';
+
+	import { onMount } from 'svelte';
+
+	let canvas: HTMLCanvasElement;
+	let chart: Chart;
+
+	Chart.defaults.font.family =
+		'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'; // Tailwind CSS font
+	onMount(() => {
+		chart = new Chart(canvas, {
+			type: 'line',
+			data: {
+				datasets: []
+			},
+			options: {
+				animation: false,
+				parsing: false,
+				maintainAspectRatio: false,
+				scales: {
+					x: {
+						type: 'linear',
+						title: {
+							display: true,
+							text: 'Distance (km)'
+						}
+					},
+					y: {
+						type: 'linear',
+						title: {
+							display: true,
+							text: 'Elevation (m)'
+						}
+					}
+				},
+				datasets: {
+					line: {
+						pointRadius: 0
+					}
+				},
+				interaction: {
+					mode: 'index',
+					intersect: false
+				},
+				plugins: {
+					legend: {
+						position: 'right'
+					},
+					decimation: {
+						enabled: true
+					}
+				}
+			}
+		});
+	});
+
+	$: {
+		if ($selectedFiles.size == 1) {
+			$selectedFiles.forEach((file) => {
+				const trackPointsAndStatistics = file.getTrackPointsAndStatistics();
+				chart.data.datasets[0] = {
+					label: 'Elevation',
+					data: trackPointsAndStatistics.points.map((point, index) => {
+						return {
+							x: trackPointsAndStatistics.statistics.distance[index],
+							y: point.ele ? point.ele : 0
+						};
+					}),
+					normalized: true
+				};
+				chart.options.scales.x['min'] = 0;
+				chart.options.scales.x['max'] = file.statistics.distance.total;
+			});
+			chart.update();
+		}
+	}
+</script>
+
+<div class="h-full grow min-w-0 p-4">
+	<canvas bind:this={canvas}> </canvas>
+</div>

website/src/lib/components/GPXData.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <Card.Root class="h-full overflow-hidden border-none">
-	<Card.Content class="flex flex-col flex-wrap gap-4 p-2">
+	<Card.Content class="h-full flex flex-col flex-wrap gap-4 p-4 justify-center">
 		<GPXDataItem>
 			<span slot="data" class="flex flex-row items-center">
 				<Ruler size="18" class="mr-1" />

website/src/lib/components/Menu.svelte

@@ -35,7 +35,7 @@
 
 <div class="absolute top-2 left-0 right-0 z-10 flex flex-row justify-center pointer-events-none">
 	<div
-		class="w-fit flex flex-row items-center p-1 bg-background rounded-md pointer-events-auto shadow-md"
+		class="w-fit flex flex-row flex-wrap mx-16 items-center justify-center p-1 bg-background rounded-md pointer-events-auto shadow-md"
 	>
 		<Logo class="h-5 mt-0.5 mx-2" />
 		<Menubar.Root class="border-none h-fit p-0">

website/src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Data from '$lib/components/Data.svelte';
+	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
 	import FileList from '$lib/components/FileList.svelte';
 	import GPXData from '$lib/components/GPXData.svelte';
 	import Map from '$lib/components/Map.svelte';
@@ -16,8 +17,9 @@
 		<LayerControl />
 		<Data />
 	</div>
-	<div class="h-60 flex flex-row">
+	<div class="h-60 flex flex-row overflow-hidden">
 		<FileList />
 		<GPXData />
+		<ElevationProfile />
 	</div>
 </div>