responsive chartjs elevation profile

gpx/src/gpx.ts

@@ -19,6 +19,7 @@ abstract class GPXTreeElement<T extends GPXTreeElement<any>> {
 
     abstract getStartTimestamp(): Date;
     abstract getEndTimestamp(): Date;
+    abstract getTrackPointsAndStatistics(): { points: TrackPoint[], statistics: TrackPointStatistics };
 
     abstract toGeoJSON(): any;
 }
@@ -70,6 +71,35 @@ abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement
     getEndTimestamp(): Date {
         return this.getChildren()[this.getChildren().length - 1].getEndTimestamp();
     }
+
+    getTrackPointsAndStatistics(): { points: TrackPoint[]; statistics: TrackPointStatistics; } {
+        let points: TrackPoint[] = [];
+        let statistics: TrackPointStatistics = {
+            distance: [],
+            time: [],
+            speed: [],
+            elevation: {
+                smoothed: [],
+                gain: [],
+                loss: [],
+            },
+            slope: [],
+        };
+
+        for (let child of this.getChildren()) {
+            let childData = child.getTrackPointsAndStatistics();
+            points = points.concat(childData.points);
+            statistics.distance = statistics.distance.concat(childData.statistics.distance);
+            statistics.time = statistics.time.concat(childData.statistics.time);
+            statistics.speed = statistics.speed.concat(childData.statistics.speed);
+            statistics.elevation.smoothed = statistics.elevation.smoothed.concat(childData.statistics.elevation.smoothed);
+            statistics.elevation.gain = statistics.elevation.gain.concat(childData.statistics.elevation.gain);
+            statistics.elevation.loss = statistics.elevation.loss.concat(childData.statistics.elevation.loss);
+            statistics.slope = statistics.slope.concat(childData.statistics.slope);
+        }
+
+        return { points, statistics };
+    }
 }
 
 // An abstract class that TrackSegment extends to implement the GPXTreeElement interface
@@ -351,6 +381,13 @@ export class TrackSegment extends GPXTreeLeaf {
         return this.trkpt[this.trkpt.length - 1].time;
     }
 
+    getTrackPointsAndStatistics(): { points: TrackPoint[], statistics: TrackPointStatistics } {
+        return {
+            points: this.trkpt,
+            statistics: this.trkptStatistics
+        };
+    }
+
     toGeoJSON(): any {
         return {
             type: "Feature",

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>