responsive chartjs elevation profile

website/package-lock.json

@@ -10,6 +10,7 @@
             "dependencies": {
                 "@mapbox/mapbox-gl-geocoder": "^5.0.2",
                 "bits-ui": "^0.21.3",
+                "chart.js": "^4.4.2",
                 "clsx": "^2.1.0",
                 "gpx": "file:../gpx",
                 "lucide-svelte": "^0.365.0",
@@ -801,6 +802,11 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@kurkle/color": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+            "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+        },
         "node_modules/@mapbox/fusspot": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/@mapbox/fusspot/-/fusspot-0.4.0.tgz",
@@ -2038,6 +2044,17 @@
                 "url": "https://github.com/chalk/chalk?sponsor=1"
             }
         },
+        "node_modules/chart.js": {
+            "version": "4.4.2",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.2.tgz",
+            "integrity": "sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==",
+            "dependencies": {
+                "@kurkle/color": "^0.3.0"
+            },
+            "engines": {
+                "pnpm": ">=8"
+            }
+        },
         "node_modules/cheap-ruler": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/cheap-ruler/-/cheap-ruler-3.0.2.tgz",

website/package.json

@@ -43,6 +43,7 @@
     "dependencies": {
         "@mapbox/mapbox-gl-geocoder": "^5.0.2",
         "bits-ui": "^0.21.3",
+        "chart.js": "^4.4.2",
         "clsx": "^2.1.0",
         "gpx": "file:../gpx",
         "lucide-svelte": "^0.365.0",

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>