elevation profile for all selected files (in order)

gpx/src/gpx.ts

@@ -9,6 +9,7 @@ function cloneJSON<T>(obj: T): T {
 
 // An abstract class that groups functions that need to be computed recursively in the GPX file hierarchy
 abstract class GPXTreeElement<T extends GPXTreeElement<any>> {
+    statistics: GPXStatistics;
 
     abstract isLeaf(): boolean;
     abstract getChildren(): T[];
@@ -26,8 +27,6 @@ abstract class GPXTreeElement<T extends GPXTreeElement<any>> {
 
 // An abstract class that can be extended to facilitate functions working similarly with Tracks and TrackSegments
 abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement<T> {
-    statistics: GPXStatistics;
-
     isLeaf(): boolean {
         return false;
     }
@@ -86,16 +85,21 @@ abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement
             slope: [],
         };
 
+        let current = new GPXStatistics();
         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.distance = statistics.distance.concat(childData.statistics.distance.map((distance) => distance + current.distance.total));
+            statistics.time = statistics.time.concat(childData.statistics.time.map((time) => time + current.time.total));
+            statistics.elevation.gain = statistics.elevation.gain.concat(childData.statistics.elevation.gain.map((gain) => gain + current.elevation.gain));
+            statistics.elevation.loss = statistics.elevation.loss.concat(childData.statistics.elevation.loss.map((loss) => loss + current.elevation.loss));
+
             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);
+
+            current.mergeWith(child.statistics);
         }
 
         return { points, statistics };
@@ -113,6 +117,26 @@ abstract class GPXTreeLeaf extends GPXTreeElement<GPXTreeLeaf> {
     }
 }
 
+// A class that represents a set of GPX files
+export class GPXFiles extends GPXTreeNode<GPXFile> {
+    files: GPXFile[];
+
+    constructor(files: GPXFile[]) {
+        super();
+        this.files = files;
+
+        this.computeStatistics();
+    }
+
+    getChildren(): GPXFile[] {
+        return this.files;
+    }
+
+    toGeoJSON(): any {
+        return this.getChildren().map((child) => child.toGeoJSON());
+    }
+}
+
 // A class that represents a GPX file
 export class GPXFile extends GPXTreeNode<Track>{
     attributes: GPXFileAttributes;
@@ -305,6 +329,7 @@ export class TrackSegment extends GPXTreeLeaf {
 
         trkptStatistics.speed = distanceWindowSmoothingWithDistanceAccumulator(points, 200, (accumulated, start, end) => 3600 * accumulated / (points[end].time.getTime() - points[start].time.getTime()));
 
+        this.statistics = statistics;
         this.trkptStatistics = trkptStatistics;
 
         return statistics;

website/src/lib/components/ElevationProfile.svelte

@@ -5,7 +5,7 @@
 
 	import Chart from 'chart.js/auto';
 
-	import { selectedFiles } from '$lib/stores';
+	import { files, fileOrder, selectedFiles } from '$lib/stores';
 
 	import { onDestroy, onMount } from 'svelte';
 	import {
@@ -17,6 +17,7 @@
 		Thermometer,
 		Zap
 	} from 'lucide-svelte';
+	import { GPXFiles } from 'gpx';
 
 	let canvas: HTMLCanvasElement;
 	let chart: Chart;
@@ -125,86 +126,88 @@
 		});
 	});
 
-	$: {
+	$: if (chart) {
-		if ($selectedFiles.size == 1) {
+		let gpxFiles = new GPXFiles(Array.from($selectedFiles));
-			$selectedFiles.forEach((file) => {
+		let order = $fileOrder.length == 0 ? $files : $fileOrder;
-				const trackPointsAndStatistics = file.getTrackPointsAndStatistics();
+		gpxFiles.files.sort(function (a, b) {
-				chart.data.datasets[0] = {
+			return order.indexOf(a) - order.indexOf(b);
-					label: 'Elevation',
+		});
-					data: trackPointsAndStatistics.points.map((point, index) => {
+
-						return {
+		let trackPointsAndStatistics = gpxFiles.getTrackPointsAndStatistics();
-							x: trackPointsAndStatistics.statistics.distance[index],
+		chart.data.datasets[0] = {
-							y: point.ele ? point.ele : 0
+			label: 'Elevation',
-						};
+			data: trackPointsAndStatistics.points.map((point, index) => {
-					}),
+				return {
-					normalized: true,
+					x: trackPointsAndStatistics.statistics.distance[index],
-					fill: true
+					y: point.ele ? point.ele : 0
 				};
-				chart.data.datasets[1] = {
+			}),
-					label: datasets.speed.label,
+			normalized: true,
-					data: trackPointsAndStatistics.points.map((point, index) => {
+			fill: true
-						return {
+		};
-							x: trackPointsAndStatistics.statistics.distance[index],
+		chart.data.datasets[1] = {
-							y: trackPointsAndStatistics.statistics.speed[index]
+			label: datasets.speed.label,
-						};
+			data: trackPointsAndStatistics.points.map((point, index) => {
-					}),
+				return {
-					normalized: true,
+					x: trackPointsAndStatistics.statistics.distance[index],
-					yAxisID: `y${datasets.speed.id}`,
+					y: trackPointsAndStatistics.statistics.speed[index]
-					hidden: true
 				};
-				chart.data.datasets[2] = {
+			}),
-					label: datasets.hr.label,
+			normalized: true,
-					data: trackPointsAndStatistics.points.map((point, index) => {
+			yAxisID: `y${datasets.speed.id}`,
-						return {
+			hidden: true
-							x: trackPointsAndStatistics.statistics.distance[index],
+		};
-							y: point.getHeartRate()
+		chart.data.datasets[2] = {
-						};
+			label: datasets.hr.label,
-					}),
+			data: trackPointsAndStatistics.points.map((point, index) => {
-					normalized: true,
+				return {
-					yAxisID: `y${datasets.hr.id}`,
+					x: trackPointsAndStatistics.statistics.distance[index],
-					hidden: true
+					y: point.getHeartRate()
 				};
-				chart.data.datasets[3] = {
+			}),
-					label: datasets.cad.label,
+			normalized: true,
-					data: trackPointsAndStatistics.points.map((point, index) => {
+			yAxisID: `y${datasets.hr.id}`,
-						return {
+			hidden: true
-							x: trackPointsAndStatistics.statistics.distance[index],
+		};
-							y: point.getCadence()
+		chart.data.datasets[3] = {
-						};
+			label: datasets.cad.label,
-					}),
+			data: trackPointsAndStatistics.points.map((point, index) => {
-					normalized: true,
+				return {
-					yAxisID: `y${datasets.cad.id}`,
+					x: trackPointsAndStatistics.statistics.distance[index],
-					hidden: true
+					y: point.getCadence()
 				};
-				chart.data.datasets[4] = {
+			}),
-					label: datasets.atemp.label,
+			normalized: true,
-					data: trackPointsAndStatistics.points.map((point, index) => {
+			yAxisID: `y${datasets.cad.id}`,
-						return {
+			hidden: true
-							x: trackPointsAndStatistics.statistics.distance[index],
+		};
-							y: point.getTemperature()
+		chart.data.datasets[4] = {
-						};
+			label: datasets.atemp.label,
-					}),
+			data: trackPointsAndStatistics.points.map((point, index) => {
-					normalized: true,
+				return {
-					yAxisID: `y${datasets.atemp.id}`,
+					x: trackPointsAndStatistics.statistics.distance[index],
-					hidden: true
+					y: point.getTemperature()
 				};
-				chart.data.datasets[5] = {
+			}),
-					label: datasets.power.label,
+			normalized: true,
-					data: trackPointsAndStatistics.points.map((point, index) => {
+			yAxisID: `y${datasets.atemp.id}`,
-						return {
+			hidden: true
-							x: trackPointsAndStatistics.statistics.distance[index],
+		};
-							y: point.getPower()
+		chart.data.datasets[5] = {
-						};
+			label: datasets.power.label,
-					}),
+			data: trackPointsAndStatistics.points.map((point, index) => {
-					normalized: true,
+				return {
-					yAxisID: `y${datasets.power.id}`,
+					x: trackPointsAndStatistics.statistics.distance[index],
-					hidden: true
+					y: point.getPower()
 				};
-				chart.options.scales.x['min'] = 0;
+			}),
-				chart.options.scales.x['max'] = file.statistics.distance.total;
+			normalized: true,
-			});
+			yAxisID: `y${datasets.power.id}`,
-			chart.update();
+			hidden: true
-		}
+		};
+		chart.options.scales.x['min'] = 0;
+		chart.options.scales.x['max'] = gpxFiles.statistics.distance.total;
+		chart.update();
 	}
 
 	$: console.log(elevationFill);

website/src/lib/components/FileList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { files, selectedFiles, selectFiles } from '$lib/stores';
+	import { fileOrder, files, selectedFiles, selectFiles } from '$lib/stores';
 
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index';
 
@@ -57,6 +57,9 @@
 			onDeselect: (e) => {
 				const index = parseInt(e.item.getAttribute('data-id'));
 				deselectFile($files[index]);
+			},
+			onSort: () => {
+				$fileOrder = sortable.toArray().map((index) => $files[parseInt(index)]);
 			}
 		});
 	});

website/src/lib/stores.ts

@@ -5,6 +5,7 @@ import { GPXFile, buildGPX, parseGPX } from 'gpx';
 
 export const map = writable<mapboxgl.Map | null>(null);
 export const files = writable<GPXFile[]>([]);
+export const fileOrder = writable<GPXFile[]>([]);
 export const selectedFiles = writable<Set<GPXFile>>(new Set());
 export const selectFiles = writable<{ [key: string]: (file: GPXFile) => void }>({});