steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-01 08:12:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

store stats outside of gpx object

Browse Source
This commit is contained in:
vcoppe
2024-05-03 22:15:47 +02:00
parent 22884b3a8b
commit 619849f987
6 changed files with 170 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/lib/components/App.svelte
View File

@@ -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>

34
website/src/lib/components/ElevationProfile.svelte
View File

@@ -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)) {

22
website/src/lib/components/GPXData.svelte → website/src/lib/components/GPXStatistics.svelte
View File

@@ -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

3
website/src/lib/components/gpx-layer/GPXLayer.ts
View File

@@ -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;

37
website/src/lib/stores.ts
View File

@@ -1,12 +1,11 @@
import { writable, get, type Writable } from 'svelte/store';
import mapboxgl from 'mapbox-gl';
import { GPXFile, buildGPX, parseGPX, GPXFiles } from 'gpx';
import { GPXFile, buildGPX, parseGPX, GPXStatistics } from 'gpx';
import { tick } from 'svelte';
import { _ } from 'svelte-i18n';
import type { GPXLayer } from '$lib/components/gpx-layer/GPXLayer';
import { dbUtils, fileObservers } from './db';
import type { FreezedObject } from 'structurajs';
export const map = writable<mapboxgl.Map | null>(null);
@@ -29,18 +28,15 @@ fileObservers.subscribe((files) => { // Update selectedFiles automatically when
}
});
export const gpxData = writable(new GPXFiles([]).getTrackPointsAndStatistics());
const fileStatistics: Map<string, GPXStatistics> = new Map();
export const gpxStatistics: Writable<GPXStatistics> = writable(new GPXStatistics());
function updateGPXData() {
let fileIds: string[] = get(fileOrder).filter((f) => get(selectedFiles).has(f));
let files: GPXFile[] = fileIds
.map((id) => {
let fileObserver = get(fileObservers).get(id);
return fileObserver ? get(fileObserver) : null;
})
.filter((f) => f) as GPXFile[];
let gpxFiles = new GPXFiles(files);
gpxData.set(gpxFiles.getTrackPointsAndStatistics());
let fileIds: string[] = get(fileOrder).filter((f) => fileStatistics.has(f) && get(selectedFiles).has(f));
gpxStatistics.set(fileIds.reduce((stats: GPXStatistics, fileId: string) => {
stats.mergeWith(fileStatistics.get(fileId) ?? new GPXStatistics());
return stats;
}, new GPXStatistics()));
}
let selectedFilesUnsubscribe: Function[] = [];
@@ -49,8 +45,11 @@ selectedFiles.subscribe((selectedFiles) => {
selectedFiles.forEach((fileId) => {
let fileObserver = get(fileObservers).get(fileId);
if (fileObserver) {
let unsubscribe = fileObserver.subscribe(() => {
updateGPXData();
let unsubscribe = fileObserver.subscribe((file) => {
if (file) {
fileStatistics.set(fileId, file.getStatistics());
updateGPXData();
}
});
selectedFilesUnsubscribe.push(unsubscribe);
}
@@ -116,23 +115,23 @@ export async function loadFiles(list: FileList) {
if (file) {
files.push(file);
let fileBounds = file.getStatistics().bounds;
/*let fileBounds = file.getStatistics().bounds;
bounds.extend(fileBounds.southWest);
bounds.extend(fileBounds.northEast);
bounds.extend([fileBounds.southWest.lon, fileBounds.northEast.lat]);
bounds.extend([fileBounds.northEast.lon, fileBounds.southWest.lat]);
bounds.extend([fileBounds.northEast.lon, fileBounds.southWest.lat]);*/
}
}
dbUtils.addMultiple(files);
if (!mapBounds.contains(bounds.getSouthWest()) || !mapBounds.contains(bounds.getNorthEast()) || !mapBounds.contains(bounds.getSouthEast()) || !mapBounds.contains(bounds.getNorthWest())) {
/*if (!mapBounds.contains(bounds.getSouthWest()) || !mapBounds.contains(bounds.getNorthEast()) || !mapBounds.contains(bounds.getSouthEast()) || !mapBounds.contains(bounds.getNorthWest())) {
get(map)?.fitBounds(bounds, {
padding: 80,
linear: true,
easing: () => 1
});
}
}*/
selectFileWhenLoaded(files[0]._data.id);
}
@@ -190,7 +189,7 @@ export function exportAllFiles() {
});
}
export function exportFile(file: FreezedObject<GPXFile>) {
export function exportFile(file: GPXFile) {
let blob = new Blob([buildGPX(file)], { type: 'application/gpx+xml' });
let url = URL.createObjectURL(blob);
let a = document.createElement('a');