@raruto/leaflet-elevation 2.2.7 → 2.3.0

package/package.json

@@ -1,71 +1,74 @@
 {
-	"name": "@raruto/leaflet-elevation",
-	"version": "2.2.7",
-	"description": "A Leaflet plugin that allows to add elevation profiles using d3js",
-	"type": "module",
-	"main": "dist/leaflet-elevation.min.js",
-	"browser": "dist/leaflet-elevation.min.js",
-	"module": "src/index.js",
-	"scripts": {
-		"test": "node spec/index.js",
-		"build": "rollup -c build/rollup.config.js",
-		"watch": "rollup -c build/rollup.config.js --watch",
-		"dev": "npm run watch",
-		"version": "npm run build && git add -A"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/Raruto/leaflet-elevation.git"
-	},
-	"keywords": [
-		"leaflet",
-		"d3js",
-		"javascript",
-		"elevation",
-		"highchart",
-		"kml",
-		"altitude",
-		"gpx",
-		"gps-visualizer",
-		"tcx"
-	],
-	"author": {
-		"name": "Felix “MrMufflon” Bache",
-		"url": "https: //github.com/MrMufflon/Leaflet.Elevation"
-	},
-	"contributors": [
-		{
-			"name": "Raruto",
-			"url": "https://github.com/Raruto/leaflet-elevation"
-		},
-		{
-			"name": "Felix Bache",
-			"web": "https://github.com/HostedDinner/Leaflet.Elevation"
-		}
-	],
-	"license": "GPL-3.0",
-	"bugs": {
-		"url": "https://github.com/Raruto/leaflet-elevation/issues"
-	},
-	"homepage": "https://github.com/Raruto/leaflet-elevation#readme",
-	"devDependencies": {
-		"jsdom": "^20.0.0",
-		"leaflet": "^1.7.1",
-		"postcss": "^8.4.16",
-		"postcss-copy": "^7.1.0",
-		"postcss-import": "^15.0.0",
-		"rollup": "^2.79.0",
-		"rollup-plugin-commonjs": "^10.1.0",
-		"rollup-plugin-git-version": "^0.3.1",
-		"rollup-plugin-node-resolve": "^5.2.0",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-terser": "^7.0.2",
-		"uvu": "^0.5.6"
-	},
-	"peerDependencies": {
-		"leaflet": "^1.7.0",
-		"leaflet-i18n": "^0.3.1",
-		"d3": "6.5.0",
-		"@tmcw/togeojson": "4.6.0"
-	}
+  "name": "@raruto/leaflet-elevation",
+  "version": "2.3.0",
+  "description": "A Leaflet plugin that allows to add elevation profiles using d3js",
+  "type": "module",
+  "main": "dist/leaflet-elevation.min.js",
+  "browser": "dist/leaflet-elevation.min.js",
+  "module": "src/index.js",
+  "scripts": {
+    "test": "uvu . ^(examples)?(src)?\\.*\\.spec\\.js$",
+    "build": "rollup -c build/rollup.config.js",
+    "watch": "rollup -c build/rollup.config.js --watch",
+    "dev": "npm-run-all --print-label --parallel serve watch",
+    "serve": "http-server",
+    "version": "npm run build && git add -A"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Raruto/leaflet-elevation.git"
+  },
+  "keywords": [
+    "leaflet",
+    "d3js",
+    "javascript",
+    "elevation",
+    "highchart",
+    "kml",
+    "altitude",
+    "gpx",
+    "gps-visualizer",
+    "tcx"
+  ],
+  "author": {
+    "name": "Felix “MrMufflon” Bache",
+    "url": "https: //github.com/MrMufflon/Leaflet.Elevation"
+  },
+  "contributors": [
+    {
+      "name": "Raruto",
+      "url": "https://github.com/Raruto/leaflet-elevation"
+    },
+    {
+      "name": "Felix Bache",
+      "web": "https://github.com/HostedDinner/Leaflet.Elevation"
+    }
+  ],
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/Raruto/leaflet-elevation/issues"
+  },
+  "homepage": "https://github.com/Raruto/leaflet-elevation#readme",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.1",
+    "http-server": "^14.1.1",
+    "jsdom": "^20.0.0",
+    "leaflet": "^1.7.1",
+    "npm-run-all": "^4.1.5",
+    "playwright": "^1.32.3",
+    "postcss": "^8.4.22",
+    "postcss-copy": "^7.1.0",
+    "postcss-import": "^15.1.0",
+    "rollup": "^3.20.6",
+    "rollup-plugin-postcss": "^4.0.2",
+    "uvu": "^0.5.6"
+  },
+  "peerDependencies": {
+    "@tmcw/togeojson": "4.6.0",
+    "d3": "6.5.0",
+    "leaflet": "^1.7.0",
+    "leaflet-i18n": "^0.3.1"
+  }
 }

package/src/components/d3.js

@@ -268,7 +268,7 @@ export const LegendSmall = ({
 			// 	.merge(label.data([{ idx: id }]))
 			// 	.text(d => items.length ? (items[idx][0].toUpperCase() + items[idx].slice(1)) : '')
 			// 	.on("mousedown", (e, d) => setIdx(L.Util.wrapNum((idx + 1), [0, items.length])));
-			label.text(items.length ? (items[idx][0].toUpperCase() + items[idx].slice(1)) : '');
+			label.text(items.length ? L._((items[idx][0].toUpperCase() + items[idx].slice(1))) : '');
 			onClick(items[idx]);
 		};
 		setIdx(0);

package/src/control.js

@@ -22,6 +22,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__LALMOSTOVER:   'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
 	__LHOTLINE:      '../libs/leaflet-hotline.min.js',
 	__LDISTANCEM:    '../libs/leaflet-distance-marker.min.js',
+	__LEDGESCALE:    '../libs/leaflet-edgescale.min.js',
 	__LCHART:        '../src/components/chart.js',
 	__LMARKER:       '../src/components/marker.js',
 	__LSUMMARY:      '../src/components/summary.js',
@@ -173,7 +174,10 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 */
 	initialize: function(opts) {
 
-		opts = L.setOptions(this, opts);
+		// opts = L.setOptions(this, opts);
+
+		// Fixes: https://github.com/Raruto/leaflet-elevation/pull/240
+		opts = L.setOptions(this, L.extend({}, structuredClone(Options), opts)); // "deep copy" nested objects (multiple charts)
 
 		this._data           = [];
 		this._layers         = L.featureGroup();
@@ -218,6 +222,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			case this.__LGEOMUTIL:   condition = typeof L.GeometryUtil !== 'object'; break;
 			case this.__LALMOSTOVER: condition = typeof L.Handler.AlmostOver  !== 'function'; break;
 			case this.__LDISTANCEM:  condition = typeof L.DistanceMarkers  !== 'function'; break;
+			case this.__LEDGESCALE:  condition = typeof L.Control.EdgeScale !== 'function'; break;
 			case this.__LHOTLINE:    condition = typeof L.Hotline  !== 'function'; break;
 		}
 		src = (src.startsWith('../') || src.startsWith('./') ? baseURL : '') + src;
@@ -420,6 +425,16 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		return this.options.distanceMarkers ? Promise.all([this.import(this.__LGEOMUTIL), this.import(this.__LDISTANCEM)]) : Promise.resolve();
 	},
 
+	/**
+	 * Initialize "L.Control.EdgeScale" integration
+	 */
+	_initEdgeScale: function(map) {
+		return this.options.edgeScale ? Promise.all([this.import(this.__LEDGESCALE)])
+			.then(() => {
+				map.edgeScaleControl = map.edgeScaleControl || L.control.edgeScale('boolean' !== typeof this.options.edgeScale ? this.options.edgeScale : {}).addTo(map);
+			}) : Promise.resolve();
+	},
+
 	_initHotLine: function(layer) {
 		let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
 		return this.options.hotline ? this.import(this.__LHOTLINE)
@@ -465,6 +480,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				this._initHotLine(layer),
 				this._initAlmostOverHandler(map, layer),
 				this._initDistanceMarkers(),
+				this._initEdgeScale(map),
 			]).then(() => {
 				if	(this.options.polyline) {
 					layer.addTo(map);
@@ -990,10 +1006,10 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		}
 
 		// prevent excessive variabile instanstations
-		let i, curr, prev, attr;
+		let i, curr, prev, attr = props.attr || props.name;
 
 		// save here a reference to last used point
-		let lastValid = null; 
+		let lastValid = {};
 
 		// iteration
 		this.on("elepoint_added", ({index, point}) => {
@@ -1001,42 +1017,33 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 
 			prev = curr ?? this._data[i]; // same as: this._data[i > 0 ? i - 1 : i]
 			curr = this._data[i];
-			attr = props.attr || props.name;
+
+			// retrieve point value
+			curr[attr] = props.pointToAttr.call(this, point, i);
 
 			// check and fix missing data on last added point
-			if (props.skipNull === false) {
-				let curr = this._data[i][attr];
-				if(i > 0) {
-					let prev = this._data[i - 1][attr];
-					if (isNaN(prev)) {
-						if (!isNaN(lastValid) && !isNaN(curr)) {
-							prev   = (lastValid + curr) / 2;
-						} else if (!isNaN(lastValid)) {
-							prev   = lastValid;
-						} else if (!isNaN(curr)) {
-							prev   = curr;
-						}
-						if (!isNaN(prev)) return this._data.splice(i - 1, 1);
-						this._data[i - 1][attr] = prev;
-					}
+			if (i > 0 && isNaN(prev[attr])) {
+				if (!isNaN(lastValid[attr]) && !isNaN(curr[attr])) {
+					prev[attr]   = (lastValid[attr] + curr[attr]) / 2;
+				} else if (!isNaN(lastValid[attr])) {
+					prev[attr]   = lastValid[attr];
+				} else if (!isNaN(curr[attr])) {
+					prev[attr]   = curr[attr];
 				}
-				// update reference to last used point (ie. if it has data)
-				if (!isNaN(curr)) {
-					lastValid = curr;
+				// update "yAttr" and "xAttr"
+				if (props.meta) {
+					prev[props.meta] = prev[attr];
 				}
 			}
 
-			// retrieve point value
-			curr[attr] = props.pointToAttr.call(this, point, i);
-
-			// update "track_info" stats (min, max, avg, ...)
-			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], this._data.length);
-				}
+			// skip to next iteration for invalid or missing data (eg. i == 0)
+			if (isNaN(curr[attr])) {
+				return;
 			}
 
+			// update reference to last used point
+			lastValid[attr] = curr[attr];
+
 			// Limit "crazy" delta values.
 			if (props.deltaMax) {
 				curr[attr] =_.wrapDelta(curr[attr], prev[attr], props.deltaMax);
@@ -1052,8 +1059,16 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				curr[attr] = _.round(curr[attr], props.decimals);
 			}
 
+			// update "track_info" stats (min, max, avg, ...)
+			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], this._data.length);
+				}
+			}
+
 			// update here some mixins (eg. complex "track_info" stuff)
-			if(props.onPointAdded) props.onPointAdded.call(this, curr[attr], i, point);
+			if (props.onPointAdded) props.onPointAdded.call(this, curr[attr], i, point);
 		});
 	},
 
@@ -1071,7 +1086,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			name,
 			attr,
 			required,
-			skipNull,
 			deltaMax,
 			clampRange,
 			decimals,
@@ -1096,7 +1110,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			this._registerDataAttribute({
 				name,
 				attr,
-				skipNull,
+				meta,
 				deltaMax,
 				clampRange,
 				decimals,

package/src/handlers/acceleration.js

@@ -17,7 +17,7 @@ export function Acceleration() {
 		pointToAttr: (_, i) => {
 			let dv     = (this._data[i].speed - this._data[i > 0 ? i - 1 : i].speed) * (1000 / opts.timeFactor);
 			let dt     = (this._data[i].time - this._data[i > 0 ? i - 1 : i].time) / 1000;
-			return dt > 0 ? Math.abs((dv / dt)) * opts.accelerationFactor : 0;
+			return dt > 0 ? Math.abs((dv / dt)) * opts.accelerationFactor : NaN;
 		},
 		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
 		scale: {

package/src/handlers/altitude.js

@@ -17,7 +17,6 @@ export function Altitude() {
 		meta: 'z',
 		unit: altitude.label,
 		statsName: 'elevation',
-		skipNull: this.options.skipNullZCoords,
 		deltaMax: this.options.altitudeDeltaMax,
 		clampRange: this.options.altitudeRange,
 		// init: ({point}) => {

package/src/handlers/pace.js

@@ -17,7 +17,7 @@ export function Pace() {
 		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;
+			return dx > 0 ? Math.abs((dt / dx) / opts.paceFactor) : NaN;
 		},
 		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
 		scale : (this.options.pace && this.options.pace != "summary") && {

package/src/handlers/slope.js

@@ -17,7 +17,7 @@ export function Slope() {
 		pointToAttr: (_, i) => { // slope in % = ( dy / dx ) * 100;
 			let dx    = (this._data[i].dist - this._data[i > 0 ? i - 1 : i].dist) * 1000;
 			let dy    = this._data[i][this.options.yAttr] - this._data[i > 0 ? i - 1 : i][this.options.yAttr];
-			return (!isNaN(dy) && dx !== 0) ? (dy / dx) * 100 : 0; 
+			return dx !== 0 ? (dy / dx) * 100 : NaN; 
 		},
 		onPointAdded: (_, i) => {
 			let dz = this._data[i][this.options.yAttr] - this._data[i > 0 ? i - 1 : i][this.options.yAttr];

package/src/handlers/speed.js

@@ -18,7 +18,7 @@ export function Speed() {
 		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 dt > 0 ? Math.abs((dx / dt) * opts.timeFactor) * opts.speedFactor : 0;
+			return dt > 0 ? Math.abs((dx / dt) * opts.timeFactor) * opts.speedFactor : NaN;
 		},
 		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
 		scale : (this.options.speed && this.options.speed != "summary") && {

package/src/options.js

@@ -14,6 +14,7 @@ export var Options = {
 	dragging: !L.Browser.mobile,
 	downloadLink: 'link',
 	elevationDiv: "#elevation-div",
+	edgeScale: { bar: true, icon: false, coords: false },
 	followMarker: true,
 	imperial: false,
 	legend: true,
@@ -79,7 +80,6 @@ export var Options = {
 	decimalsY: 0,
 	forceAxisBounds: false,
 	interpolation: "curveLinear",
-	skipNullZCoords: false,
 	yAxisMax: undefined,
 	yAxisMin: undefined,
 };

package/src/utils.spec.js

@@ -0,0 +1,50 @@
+/**
+ * src/utils.js
+ */
+
+import { suite } from 'uvu';
+import * as assert from 'uvu/assert';
+import '../test/setup/jsdom.js'
+import { iAvg, iMin, iMax, iSum } from "../src/utils.js";
+
+const toFixed = (n) => +n.toFixed(2);
+
+const test = suite('src/utils.js');
+
+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
+    avg = iAvg(NaN, avg, 5);       assert.ok(isNaN(avg));           // average for [100, 100, 200, 200, NaN] is NaN
+});
+
+test('iMin()', () => {
+    let min;
+    min = iMin(100, undefined); assert.is(toFixed(min), 100);  // min for [100] is 100
+    min = iMin(NaN, min);       assert.is(toFixed(min), 100);  // min for [100, NaN] is 100
+    min = iMin(0, min);         assert.is(toFixed(min), 0);    // min for [100, NaN, 0] is 100
+    min = iMin(-200, min);      assert.is(toFixed(min), -200); // min for [100, NaN, 0, -200] is -200
+    min = iMin(200, min);       assert.is(toFixed(min), -200); // min for [100, NaN, -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(NaN, max);       assert.is(toFixed(max), 100); // max for [100, NaN] is 100
+    max = iMax(0, max);         assert.is(toFixed(max), 100); // max for [100, NaN, 0] is 100
+    max = iMax(-200, max);      assert.is(toFixed(max), 100); // max for [100, NaN, 0, -200] is 100
+    max = iMax(200, max);       assert.is(toFixed(max), 200); // max for [100, NaN, -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 [10.25, 0, -0.25] is 10
+    sum = iSum(-10, sum);         assert.is(toFixed(sum), 0);     // sum for [10.25, 0, -0.25, -10] is 0
+    sum = iSum(NaN, sum);         assert.ok(isNaN(sum));          // sum for [10.25, 0, -0.25, -10, NaN] is NaN
+});
+
+test.run();