@raruto/leaflet-elevation 2.1.1 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "2.1.1",
+	"version": "2.2.2",
 	"description": "A Leaflet plugin that allows to add elevation profiles using d3js",
 	"type": "module",
 	"main": "dist/leaflet-elevation.min.js",
@@ -23,9 +23,11 @@
 		"javascript",
 		"elevation",
 		"highchart",
+		"kml",
 		"altitude",
 		"gpx",
-		"gps-visualizer"
+		"gps-visualizer",
+		"tcx"
 	],
 	"author": {
 		"name": "Felix “MrMufflon” Bache",

package/src/components/chart.js

@@ -83,11 +83,11 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 		this.options.yTicks = this._yTicks();
 
 		this._updateScale();
-		this._updateArea();
 		this._updateAxis();
 		this._updateMargins();
 		this._updateLegend();
 		this._updateClipper();
+		this._updateArea();
 
 		return this;
 	},

package/src/control.js

@@ -30,10 +30,14 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	addData: function(d, layer) {
 		this.import(this.__D3)
 			.then(() => {
-				layer = layer ?? (d.on && d);
-				this._addData(d);
-				this._addLayer(layer);
-				this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
+				if (this._modulesLoaded) {
+					layer = layer ?? (d.on && d);
+					this._addData(d);
+					this._addLayer(layer);
+					this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
+				} else {
+					this.once('modules_loaded', () => this.addData(d,layer));
+				}
 			});
 	},
 
@@ -232,22 +236,14 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 
 		if (!this.eleDiv) this.eleDiv = container;
 
-		let modules = [
-			"Distance",
-			"Time",
-			"Altitude",
-			"Slope",
-			"Speed",
-			"Acceleration",
-			...this.options.handlers
-		].filter(m => false !== this.options[typeof m == "string" && m.toLowerCase()]);
-
-		this._loadModules(modules).then(() => { // Inject here required modules (data handlers)
+		this._loadModules(this.options.handlers).then(() => { // Inject here required modules (data handlers)
 			this._initChart(container);
 			this._initButton(container);
 			this._initSummary(container);
 			this._initMarker(map);
 			this._initLayer(map);
+			this._modulesLoaded = true;
+			this.fire('modules_loaded');
 		});
 
 		this.fire('add');
@@ -316,7 +312,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			if (geom) {
 				switch (geom.type) {
 					case 'LineString':		return this._addGeoJSONData(geom.coordinates, d.properties);
-					case 'MultiLineString': return _.each(geom.coordinates, (coords, i) => this._addGeoJSONData(coords, d.properties, i));
+					case 'MultiLineString':	return _.each(geom.coordinates, (coords, i) => this._addGeoJSONData(coords, d.properties, i));
 					case 'Point':
 					default:				return console.warn('Unsopperted GeoJSON feature geometry type:' + geom.type);
 				}
@@ -730,14 +726,12 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		// First map known classnames (eg. "Altitude" --> L.Control.Elevation.Altitude)
 		handlers = handlers.map((h) => typeof h === 'string' && typeof Elevation[h] !== "undefined" ? Elevation[h] : h);
 		// Then load optional classes and custom imports (eg. "Cadence" --> import('../src/handlers/cadence.js'))
-		let modules = handlers
-			.filter(h => typeof h === 'string' || h instanceof Promise)
-			.map(file => file instanceof Promise ? file : this.import(this.__modulesFolder + file.toLowerCase() + '.js'));
+		let modules = handlers.map(file => (typeof file === 'string' && this.import(this.__modulesFolder + file.toLowerCase() + '.js')) || (file instanceof Promise && file) || Promise.resolve());
 		return Promise.all(modules).then((m) => {
-			_.each(m, (exported) => {
-				let fn = Object.keys(exported)[0];
+			_.each(m, (exported, i) => {
+				let fn = exported && Object.keys(exported)[0];
 				if (fn) {
-					handlers[fn] = Elevation[fn] = (Elevation[fn] ?? exported[fn]);
+					handlers[i] = Elevation[fn] = (Elevation[fn] ?? exported[fn]);
 				}
 			});
 			_.each(handlers, h => ["function", "object"].includes(typeof h) && this._registerHandler(h));
@@ -1031,7 +1025,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			if (props.stats) {
 				for (const key in props.stats) {
 					let sname = (props.statsName || attr) + (key != '' ? '_' : '');
-					this.track_info[sname + key] = props.stats[key].call(this, curr[attr], this.track_info[sname + key], index);
+					this.track_info[sname + key] = props.stats[key].call(this, curr[attr], this.track_info[sname + key], this._data.length);
 				}
 			}
 

package/src/handlers/pace.js

@@ -0,0 +1,65 @@
+export function Pace() {
+
+	const _ = L.Control.Elevation.Utils;
+
+	let opts = this.options;
+	let pace = {};
+
+	pace.label      = opts.paceLabel  || L._(opts.imperial ? 'min/mi' : 'min/km');
+	opts.paceFactor = opts.paceFactor || 60; // 1 min = 60 sec
+
+	return {
+		name: 'pace',
+		unit: pace.label,
+		deltaMax: this.options.paceDeltaMax,
+		clampRange: this.options.paceRange,
+		decimals: 2,
+		pointToAttr: (_, i) => {
+			let dx   = (this._data[i].dist - this._data[i > 0 ? i - 1 : i].dist) * 1000;
+			let dt   = this._data[i].time - this._data[ i > 0 ? i - 1 : i].time;
+			return dx > 0 ? Math.abs((dt / dx) / opts.paceFactor) : 0;
+		},
+		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
+		scale : (this.options.pace && this.options.pace != "summary") && {
+			axis       : "y",
+			position   : "right",
+			scale      : { min : 0, max : +1 },
+			tickPadding: 16,
+			labelX     : 25,
+			labelY     : -8,
+		},
+		path: (this.options.pace && this.options.pace != "summary") && {
+			// name         : 'pace',
+			label        : 'Pace',
+			yAttr        : "pace",
+			scaleX       : 'distance',
+			scaleY       : 'pace',
+			color        : '#03ffff',
+			strokeColor  : '#000',
+			strokeOpacity: "0.5",
+			fillOpacity  : "0.25",
+		},
+		tooltip: (this.options.pace) && {
+			chart: (item) => L._('pace: ') + item.pace + " " + pace.label,
+			marker: (item) => Math.round(item.pace) + " " + pace.label,
+			order: 50,
+		},
+		summary: (this.options.pace) && {
+			"minpace"  : {
+				label: "Min Pace: ",
+				value: (track, unit) => Math.round(track.pace_min || 0) + ' ' + unit,
+				order: 51
+			},
+			"maxpace"  : {
+				label: "Max Pace: ",
+				value: (track, unit) => Math.round(track.pace_max || 0) + ' ' + unit,
+				order: 51
+			},
+			"avgpace": {
+				label: "Avg Pace: ",
+				value: (track, unit) => Math.round(track.pace_avg || 0) + ' ' + unit,
+				order: 52
+			},
+		}
+	};
+}

package/src/options.js

@@ -17,7 +17,7 @@ export var Options = {
 	followMarker: true,
 	imperial: false,
 	legend: true,
-	handlers: [],
+	handlers: ["Distance", "Time", "Altitude", "Slope", "Speed", "Acceleration"],
 	hotline: 'elevation',
 	marker: 'elevation-line',
 	markerIcon: L.divIcon({
@@ -46,7 +46,7 @@ export var Options = {
 	summary: 'inline',
 	slope: false,
 	speed: false,
-	time: false,
+	time: true,
 	timeFactor: 3600,
 	timestamps: false,
 	trkStart: L.circleMarker([0,0], { className: 'start-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#00d800', fillOpacity: 1, interactive: false }),

package/spec/index.js

@@ -1,2 +0,0 @@
-import './mock.js';
-import './utils.test.js';

package/spec/index.min.js

@@ -1 +0,0 @@
-import"./mock.js";import"./utils.test.js";

package/spec/mock.js

@@ -1,26 +0,0 @@
-import { JSDOM } from 'jsdom';
-
-const { window } = new JSDOM('<main></main>');
-
-global.window = window;
-global.document = window.document;
-global.navigator = window.navigator;
-global.getComputedStyle = window.getComputedStyle;
-global.requestAnimationFrame = null;
-
-global.L = {
-    DomEvent: {
-        on: () => {},
-        off: () => {}
-    },
-    Util: {
-        throttle: () => {},
-        wrapNum: () => {},
-        formatNum: () => {}
-    },
-    DomUtil: {
-        hasClass: () => {}
-    }
-};
-
-

package/spec/mock.min.js

@@ -1 +0,0 @@
-import{JSDOM}from"jsdom";const{window:window}=new JSDOM("<main></main>");global.window=window,global.document=window.document,global.navigator=window.navigator,global.getComputedStyle=window.getComputedStyle,global.requestAnimationFrame=null,global.L={DomEvent:{on:()=>{},off:()=>{}},Util:{throttle:()=>{},wrapNum:()=>{},formatNum:()=>{}},DomUtil:{hasClass:()=>{}}};

package/spec/utils.test.js

@@ -1,41 +0,0 @@
-import { suite } from 'uvu';
-import * as assert from 'uvu/assert';
-import { iAvg, iMin, iMax, iSum } from "../src/utils.js";
-
-const toFixed = (n) => +n.toFixed(2);
-
-const test = suite('stats');
-
-test('iAvg()', () => {
-    let avg;
-    avg = iAvg(100, undefined, 1); assert.is(toFixed(avg), 100);    // average for [100] is 100
-    avg = iAvg(100, avg, 2);       assert.is(toFixed(avg), 100);    // average for [100, 100] is 100
-    avg = iAvg(200, avg, 3);       assert.is(toFixed(avg), 133.33); // average for [100, 100, 200] is 133.33
-    avg = iAvg(200, avg, 4);       assert.is(toFixed(avg), 150);    // average for [100, 100, 200, 200] is 150
-});
-
-test('iMin()', () => {
-    let min;
-    min = iMin(100, undefined); assert.is(toFixed(min), 100);  // min for [100] is 100
-    min = iMin(0, min);         assert.is(toFixed(min), 0);    // min for [100, 0] is 100
-    min = iMin(-200, min);      assert.is(toFixed(min), -200); // min for [100, 0, -200] is -200
-    min = iMin(200, min);       assert.is(toFixed(min), -200); // min for [100, -100, -200, 200] is -200
-});
-
-test('iMax()', () => {
-    let max;
-    max = iMax(100, undefined); assert.is(toFixed(max), 100); // max for [100] is 100
-    max = iMax(0, max);         assert.is(toFixed(max), 100); // max for [100, 0] is 100
-    max = iMax(-200, max);      assert.is(toFixed(max), 100); // max for [100, 0, -200] is 100
-    max = iMax(200, max);       assert.is(toFixed(max), 200); // max for [100, -100, -200, 200] is 200
-});
-
-test('iSum()', () => {
-    let sum;
-    sum = iSum(10.25, undefined); assert.is(toFixed(sum), 10.25); // sum for [10.25] is 10.25
-    sum = iSum(0, sum);           assert.is(toFixed(sum), 10.25); // sum for [10.25, 0] is 10.25
-    sum = iSum(-0.25, sum);       assert.is(toFixed(sum), 10);    // sum for [100, 0, -0.25] is 10
-    sum = iSum(-10, sum);         assert.is(toFixed(sum), 0);     // sum for [100, 0, -0.25, -10] is 0
-});
-
-test.run();

package/spec/utils.test.min.js

@@ -1 +0,0 @@
-import{suite}from"uvu";import*as assert from"uvu/assert";import{iAvg,iMin,iMax,iSum}from"../src/utils.js";const toFixed=n=>+n.toFixed(2),test=suite("stats");test("iAvg()",()=>{let avg;avg=iAvg(100,void 0,1),assert.is(toFixed(avg),100),avg=iAvg(100,avg,2),assert.is(toFixed(avg),100),avg=iAvg(200,avg,3),assert.is(toFixed(avg),133.33),avg=iAvg(200,avg,4),assert.is(toFixed(avg),150)}),test("iMin()",()=>{let min;min=iMin(100,void 0),assert.is(toFixed(min),100),min=iMin(0,min),assert.is(toFixed(min),0),min=iMin(-200,min),assert.is(toFixed(min),-200),min=iMin(200,min),assert.is(toFixed(min),-200)}),test("iMax()",()=>{let max;max=iMax(100,void 0),assert.is(toFixed(max),100),max=iMax(0,max),assert.is(toFixed(max),100),max=iMax(-200,max),assert.is(toFixed(max),100),max=iMax(200,max),assert.is(toFixed(max),200)}),test("iSum()",()=>{let sum;sum=iSum(10.25,void 0),assert.is(toFixed(sum),10.25),sum=iSum(0,sum),assert.is(toFixed(sum),10.25),sum=iSum(-.25,sum),assert.is(toFixed(sum),10),sum=iSum(-10,sum),assert.is(toFixed(sum),0)}),test.run();