store stats outside of gpx object

website/src/lib/components/App.svelte

@@ -2,7 +2,7 @@
 	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
 	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
 	import FileList from '$lib/components/FileList.svelte';
-	import GPXData from '$lib/components/GPXData.svelte';
+	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
 	import Map from '$lib/components/Map.svelte';
 	import Menu from '$lib/components/Menu.svelte';
 	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
@@ -21,7 +21,7 @@
 		<Toaster richColors />
 	</div>
 	<div class="h-48 flex flex-row gap-2 overflow-hidden">
-		<GPXData />
+		<GPXStatistics />
 		<ElevationProfile />
 	</div>
 </div>

website/src/lib/components/ElevationProfile.svelte

@@ -6,7 +6,7 @@
 	import Chart from 'chart.js/auto';
 	import mapboxgl from 'mapbox-gl';
 
-	import { map, settings, gpxData } from '$lib/stores';
+	import { map, settings, gpxStatistics } from '$lib/stores';
 
 	import { onDestroy, onMount } from 'svelte';
 	import {
@@ -233,16 +233,16 @@
 	});
 
 	$: if (chart && $settings) {
-		let data = $gpxData;
+		let data = $gpxStatistics;
 
 		// update data
 		chart.data.datasets[0] = {
 			label: $_('quantities.elevation'),
-			data: data.points.map((point, index) => {
+			data: data.local.points.map((point, index) => {
 				return {
-					x: getConvertedDistance(data.point_statistics.distance[index]),
+					x: getConvertedDistance(data.local.distance[index]),
 					y: point.ele ? getConvertedElevation(point.ele) : 0,
-					slope: data.point_statistics.slope[index],
+					slope: data.local.slope[index],
 					surface: point.getSurface(),
 					coordinates: point.getCoordinates()
 				};
@@ -253,10 +253,10 @@
 		};
 		chart.data.datasets[1] = {
 			label: datasets.speed.getLabel(),
-			data: data.points.map((point, index) => {
+			data: data.local.points.map((point, index) => {
 				return {
-					x: getConvertedDistance(data.point_statistics.distance[index]),
-					y: getConvertedVelocity(data.point_statistics.speed[index])
+					x: getConvertedDistance(data.local.distance[index]),
+					y: getConvertedVelocity(data.local.speed[index])
 				};
 			}),
 			normalized: true,
@@ -265,9 +265,9 @@
 		};
 		chart.data.datasets[2] = {
 			label: datasets.hr.getLabel(),
-			data: data.points.map((point, index) => {
+			data: data.local.points.map((point, index) => {
 				return {
-					x: getConvertedDistance(data.point_statistics.distance[index]),
+					x: getConvertedDistance(data.local.distance[index]),
 					y: point.getHeartRate()
 				};
 			}),
@@ -277,9 +277,9 @@
 		};
 		chart.data.datasets[3] = {
 			label: datasets.cad.getLabel(),
-			data: data.points.map((point, index) => {
+			data: data.local.points.map((point, index) => {
 				return {
-					x: getConvertedDistance(data.point_statistics.distance[index]),
+					x: getConvertedDistance(data.local.distance[index]),
 					y: point.getCadence()
 				};
 			}),
@@ -289,9 +289,9 @@
 		};
 		chart.data.datasets[4] = {
 			label: datasets.atemp.getLabel(),
-			data: data.points.map((point, index) => {
+			data: data.local.points.map((point, index) => {
 				return {
-					x: getConvertedDistance(data.point_statistics.distance[index]),
+					x: getConvertedDistance(data.local.distance[index]),
 					y: getConvertedTemperature(point.getTemperature())
 				};
 			}),
@@ -301,9 +301,9 @@
 		};
 		chart.data.datasets[5] = {
 			label: datasets.power.getLabel(),
-			data: data.points.map((point, index) => {
+			data: data.local.points.map((point, index) => {
 				return {
-					x: getConvertedDistance(data.point_statistics.distance[index]),
+					x: getConvertedDistance(data.local.distance[index]),
 					y: point.getPower()
 				};
 			}),
@@ -312,7 +312,7 @@
 			hidden: true
 		};
 		chart.options.scales.x['min'] = 0;
-		chart.options.scales.x['max'] = getConvertedDistance(data.statistics.distance.total);
+		chart.options.scales.x['max'] = getConvertedDistance(data.global.distance.total);
 
 		// update units
 		for (let [id, dataset] of Object.entries(datasets)) {

website/src/lib/components/GPXStatistics.svelte

@@ -3,17 +3,11 @@
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import WithUnits from '$lib/components/WithUnits.svelte';
 
-	import { GPXStatistics } from 'gpx';
-
-	import { gpxData, settings } from '$lib/stores';
+	import { gpxStatistics, settings } from '$lib/stores';
 
 	import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
 
 	import { _ } from 'svelte-i18n';
-
-	let data: GPXStatistics;
-
-	$: data = $gpxData.statistics;
 </script>
 
 <Card.Root class="h-full overflow-hidden border-none shadow-none min-w-48 pl-4">
@@ -21,25 +15,25 @@
 		<Tooltip>
 			<span slot="data" class="flex flex-row items-center">
 				<Ruler size="18" class="mr-1" />
-				<WithUnits value={data.distance.total} type="distance" />
+				<WithUnits value={$gpxStatistics.global.distance.total} type="distance" />
 			</span>
 			<span slot="tooltip">{$_('quantities.distance')}</span>
 		</Tooltip>
 		<Tooltip>
 			<span slot="data" class="flex flex-row items-center">
 				<MoveUpRight size="18" class="mr-1" />
-				<WithUnits value={data.elevation.gain} type="elevation" />
+				<WithUnits value={$gpxStatistics.global.elevation.gain} type="elevation" />
 				<MoveDownRight size="18" class="mx-1" />
-				<WithUnits value={data.elevation.loss} type="elevation" />
+				<WithUnits value={$gpxStatistics.global.elevation.loss} type="elevation" />
 			</span>
 			<span slot="tooltip">{$_('quantities.elevation')}</span>
 		</Tooltip>
 		<Tooltip>
 			<span slot="data" class="flex flex-row items-center">
 				<Zap size="18" class="mr-1" />
-				<WithUnits value={data.speed.total} type="speed" showUnits={false} />
+				<WithUnits value={$gpxStatistics.global.speed.total} type="speed" showUnits={false} />
 				<span class="mx-1">/</span>
-				<WithUnits value={data.speed.moving} type="speed" />
+				<WithUnits value={$gpxStatistics.global.speed.moving} type="speed" />
 			</span>
 			<span slot="tooltip"
 				>{$settings.velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
@@ -50,9 +44,9 @@
 		<Tooltip>
 			<span slot="data" class="flex flex-row items-center">
 				<Timer size="18" class="mr-1" />
-				<WithUnits value={data.time.total} type="time" />
+				<WithUnits value={$gpxStatistics.global.time.total} type="time" />
 				<span class="mx-1">/</span>
-				<WithUnits value={data.time.moving} type="time" />
+				<WithUnits value={$gpxStatistics.global.time.moving} type="time" />
 			</span>
 			<span slot="tooltip"
 				>{$_('quantities.time')} ({$_('quantities.total')} / {$_('quantities.moving')})</span

website/src/lib/components/gpx-layer/GPXLayer.ts

@@ -1,8 +1,7 @@
 import type { GPXFile } from "gpx";
 import { map, selectFiles, currentTool, Tool } from "$lib/stores";
-import { get, type Readable, type Writable } from "svelte/store";
+import { get, type Readable } from "svelte/store";
 import mapboxgl from "mapbox-gl";
-import type { FreezedObject } from "structurajs";
 
 let defaultWeight = 6;
 let defaultOpacity = 1;