@raruto/leaflet-elevation 1.9.5 → 2.0.1

package/src/handlers/acceleration.js

@@ -0,0 +1,64 @@
+export function Acceleration() {
+
+	const _ = L.Control.Elevation.Utils;
+
+	let opts         = this.options;
+	let acceleration = {};
+
+	acceleration.label      = opts.accelerationLabel  || L._(opts.imperial ? 'ft/s²' : 'm/s²');
+	opts.accelerationFactor = opts.accelerationFactor || 1;
+
+	return {
+		name: 'acceleration',
+		unit: acceleration.label,
+		deltaMax: this.options.accelerationDeltaMax,
+		clampRange: this.options.accelerationRange,
+		decimals: 2,
+		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;
+		},
+		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
+		scale: {
+			axis       : "y",
+			position   : "right",
+			scale      : { min: 0, max: +1 },
+			tickPadding: 16,
+			labelX     : 25,
+			labelY     : -8,
+		},
+		path: {
+			label        : 'Acceleration',
+			yAttr        : 'acceleration',
+			scaleX       : 'distance',
+			scaleY       : 'acceleration',
+			color        : '#050402',
+			strokeColor  : '#000',
+			strokeOpacity: "0.5",
+			fillOpacity  : "0.25",
+		},
+		tooltip: {
+			chart: (item) => L._("a: ") + item.acceleration + " " + acceleration.label,
+			marker: (item) => Math.round(item.acceleration) + " " + acceleration.label,
+			order: 60,
+		},
+		summary: {
+			"minacceleration"  : {
+				label: "Min Acceleration: ",
+				value: (track, unit) => Math.round(track.acceleration_min || 0) + ' ' + unit,
+				order: 60
+			},
+			"maxacceleration"  : {
+				label: "Max Acceleration: ",
+				value: (track, unit) => Math.round(track.acceleration_max || 0) + ' ' + unit,
+				order: 61
+			},
+			"avgacceleration": {
+				label: "Avg Acceleration: ",
+				value: (track, unit) => Math.round(track.acceleration_avg || 0) + ' ' + unit,
+				order: 62
+			},
+		}
+	};
+}

package/src/handlers/altitude.js

@@ -0,0 +1,76 @@
+export function Altitude() {
+	
+	const _  = L.Control.Elevation.Utils;
+
+	let opts       = this.options;
+	let altitude   = {};
+
+	let theme           = opts.theme.replace('-theme', '');
+	let color           = _.Colors[theme] || {};
+
+	opts.altitudeFactor = opts.imperial ? this.__footFactor : (opts.altitudeFactor || 1); // 1 m = (1 m)
+	altitude.label      = opts.imperial ? "ft" : opts.yLabel;
+
+	return {
+		name: 'altitude',
+		required: this.options.slope,
+		meta: 'z',
+		unit: altitude.label,
+		statsName: 'elevation',
+		skipNull: this.options.skipNullZCoords,
+		deltaMax: this.options.altitudeDeltaMax,
+		clampRange: this.options.altitudeRange,
+		// init: ({point}) => {
+		// 	// "alt" property is generated inside "leaflet"
+		// 	if ("alt" in point) point.meta.ele = point.alt;
+		// },
+		pointToAttr: (_, i) => this._data[i].z * opts.altitudeFactor,
+		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
+		grid: {
+			axis      : "y",
+			position  : "left",
+			scale     : "y" // this._chart._y,
+		},
+		scale: {
+			axis    : "y",
+			position: "left",
+			scale   : "y", // this._chart._y,
+			labelX  : -3,
+			labelY  : -8,
+		},
+		path: {
+			label        : 'Altitude',
+			scaleX       : 'distance',
+			scaleY       : 'altitude',
+			className    : 'area',
+			color        : color.area || theme,
+			strokeColor  : opts.detached ? color.stroke : '#000',
+			strokeOpacity: "1",
+			fillOpacity  : opts.detached ? (color.alpha || '0.8') : 1,
+			preferCanvas : opts.preferCanvas,
+		},
+		tooltip: {
+			name: 'y',
+			chart: (item) => L._("y: ") + _.round(item[opts.yAttr], opts.decimalsY) + " " + altitude.label,
+			marker: (item) => _.round(item[opts.yAttr], opts.decimalsY) + " " + altitude.label,
+			order: 10,
+		},
+		summary: {
+			"minele"  : {
+				label: "Min Elevation: ",
+				value: (track, unit) => (track.elevation_min || 0).toFixed(2) + ' ' + unit,
+				order: 30,
+			},
+			"maxele"  : {
+				label: "Max Elevation: ",
+				value: (track, unit) => (track.elevation_max || 0).toFixed(2) + ' ' + unit,
+				order: 31,
+			},
+			"avgele"  : {
+				label: "Avg Elevation: ",
+				value: (track, unit) => (track.elevation_avg || 0).toFixed(2) + ' ' + unit,
+				order: 32,
+			},
+		}
+	};
+}

package/src/handlers/cadence.js

@@ -0,0 +1,54 @@
+export function Cadence() {
+
+    const _ = L.Control.Elevation.Utils;
+
+    return {
+        name: 'cadence',    // <-- Your custom option name (eg. "cadence: true")
+        unit: 'rpm',
+        meta: 'cad',        // <-- point.meta.cad
+        coordinateProperties: ["cads", "cadences", "cad", "cadence"], // List of GPX Extensions ("coordinateProperties") to be handled by "@tmcw/toGeoJSON"
+        pointToAttr: (point, i) => (point.cad ?? point.meta.cad ?? point.prev('cadence')) || 0,
+		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
+        scale: {
+            axis       : "y",
+            position   : "right",
+            scale      : { min: -1, max: +1 },
+            tickPadding: 16,
+            labelX     : 25,
+            labelY     : -8,
+        },
+        path: {
+            label        : 'RPM',
+            yAttr        : 'cadence',
+            scaleX       : 'distance',
+            scaleY       : 'cadence',
+            color        : '#FFF',
+            strokeColor  : 'blue',
+            strokeOpacity: "0.85",
+            fillOpacity  : "0.1",
+        },
+        tooltip: {
+            name: 'cadence',
+            chart: (item) => L._("cad: ") + item.cadence + " " +  'rpm',
+            marker: (item) => Math.round(item.cadence) + " "  + 'rpm',
+            order: 1
+        },
+        summary: {
+            "minrpm": {
+                label: "Min RPM: ",
+                value: (track, unit) =>  Math.round(track.cadence_min || 0) + '&nbsp;' + unit,
+                // order: 30
+            },
+            "maxrpm": {
+                label: "Max RPM: ",
+                value: (track, unit) => Math.round(track.cadence_max || 0) + '&nbsp;' + unit,
+                // order: 30
+            },
+            "avgrpm": {
+                label: "Avg RPM: ",
+                value: (track, unit) => Math.round(track.cadence_avg || 0) + '&nbsp;' + unit,
+                // order: 20
+            },
+        }
+    };
+}

package/src/handlers/distance.js

@@ -0,0 +1,45 @@
+export function Distance() {
+
+	const _ = L.Control.Elevation.Utils;
+
+	let opts     = this.options;
+	let distance = {};
+
+	opts.distanceFactor = opts.imperial ? this.__mileFactor : (opts.distanceFactor || 1); // 1 km = (1000 m)
+	distance.label      = opts.imperial ? "mi" : opts.xLabel;
+
+	return {
+		name: 'distance',
+		attr: 'dist',
+		unit: distance.label,
+		decimals: 5,
+		pointToAttr: (_, i) => (i > 0 ? this._data[i - 1].dist : 0) + (this._data[i].latlng.distanceTo(this._data[i > 0 ? i - 1 : i].latlng) * opts.distanceFactor) / 1000, // convert back km to meters
+		// stats: { total: _.iSum },
+		onPointAdded: (distance, i) => this.track_info.distance = distance,
+		scale: {
+			axis    : "x",
+			position: "bottom",
+			scale   : "x", // this._chart._x,
+			labelY  : 25,
+			labelX  : () => this._width() + 6,
+			ticks   : () => _.clamp(this._chart._xTicks() / 2, [4, +Infinity]),
+		},
+		grid: {
+			axis      : "x",
+			position  : "bottom",
+			scale     : "x" // this._chart._x,
+		},
+		tooltip: {
+			name: 'x',
+			chart: (item) => L._("x: ") + _.round(item[opts.xAttr], opts.decimalsX) + " " + distance.label,
+			order: 20
+		},
+		summary: {
+			"totlen"  : {
+				label: "Total Length: ",
+				value: (track) => (track.distance || 0).toFixed(2) + ' ' + distance.label,
+				order: 10
+			}
+		}
+	};
+}

package/src/handlers/heart.js

@@ -0,0 +1,53 @@
+export function Heart() {
+
+    const _ = L.Control.Elevation.Utils;
+
+    return {
+        name: 'heart',      // <-- Your custom option name (eg. "heart: true")
+        unit: 'bpm',
+        meta: 'hr',         // <-- point.meta.hr
+        coordinateProperties: ["heart", "heartRates", "heartRate"], // List of GPX Extensions ("coordinateProperties") to be handled by "@tmcw/toGeoJSON"
+        pointToAttr: (point, i) => (point.hr ?? point.meta.hr ?? point.prev('heart')) || 0,
+		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
+        scale: {
+            axis       : "y",
+            position   : "left",
+            scale      : { min: -1, max: +1 },
+            tickPadding: 16,
+            labelX     : -18,
+            labelY     : -8,
+        },
+        path: {
+            label        : 'ECG',
+            yAttr        : 'heart',
+            scaleX       : 'distance',
+            scaleY       : 'heart',
+            color        : 'white',
+            strokeColor  : 'red',
+            strokeOpacity: "0.85",
+            fillOpacity  : "0.1",
+        },
+        tooltip: {
+            chart: (item) => L._("hr: ") + item.heart + " " + 'bpm',
+            marker: (item) => Math.round(item.heart) + " " + 'bpm',
+            order: 1
+        },
+        summary: {
+            "minbpm": {
+                label: "Min BPM: ",
+                value: (track, unit) => Math.round(track.heart_min || 0) + '&nbsp;' + unit,
+                // order: 30
+            },
+            "maxbpm": {
+                label: "Max BPM: ",
+                value: (track, unit) => Math.round(track.heart_min || 0) + '&nbsp;' + unit,
+                // order: 30
+            },
+            "avgbpm": {
+                label: "Avg BPM: ",
+                value: (track, unit) => Math.round(track.heart_avg || 0) + '&nbsp;' + unit,
+                // order: 20
+            },
+        }
+    };
+};

package/src/handlers/slope.js

@@ -0,0 +1,79 @@
+export function Slope() {
+
+	const _ = L.Control.Elevation.Utils;
+
+	let opts  = this.options;
+	let slope = {};
+
+	slope.label          = opts.slopeLabel || '%';
+
+	return {
+		name: 'slope',
+		meta: 'slope',
+		unit: slope.label,
+		deltaMax: this.options.slopedDeltaMax,
+		clampRange: this.options.slopeRange,
+		decimals: 2,
+		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; 
+		},
+		onPointAdded: (_, i) => {
+			let dz = this._data[i][this.options.yAttr] - this._data[i > 0 ? i - 1 : i][this.options.yAttr];
+			if (dz > 0)      this.track_info.ascent  = (this.track_info.ascent || 0) + dz;  // Total Ascent
+			else if (dz < 0) this.track_info.descent = (this.track_info.descent || 0) - dz; // Total Descent
+		},
+		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg, },
+		scale: {
+			axis       : "y",
+			position   : "right",
+			scale      : { min: -1, max: +1 },
+			tickPadding: 16,
+			labelX     : 25,
+			labelY     : -8,
+		},
+		path: {
+			label        : 'Slope',
+			yAttr        : 'slope',
+			scaleX       : 'distance',
+			scaleY       : 'slope',
+			color        : '#F00',
+			strokeColor  : '#000',
+			strokeOpacity: "0.5",
+			fillOpacity  : "0.25",
+		},
+		tooltip: {
+			chart: (item) => L._("m: ") + item.slope + slope.label,
+			marker: (item) => Math.round(item.slope) + slope.label,
+			order: 40,
+		},
+		summary: {
+			"minslope": {
+				label: "Min Slope: ",
+				value: (track, unit) => Math.round(track.slope_min || 0) + '&nbsp;' + unit,
+				order: 40
+			},
+			"maxslope": {
+				label: "Max Slope: ",
+				value: (track, unit) => Math.round(track.slope_max || 0) + '&nbsp;' + unit,
+				order: 41
+			},
+			"avgslope": {
+				label: "Avg Slope: ",
+				value: (track, unit) => Math.round(track.slope_avg || 0) + '&nbsp;' + unit,
+				order: 42
+			},
+			"ascent"  : {
+				label: "Total Ascent: ",
+				value: (track, unit) => Math.round(track.ascent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm'),
+				order: 43
+			},
+			"descent"  : {
+				label: "Total Descent: ",
+				value: (track, unit) => Math.round(track.descent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm'),
+				order: 45
+			},
+		}
+	};
+}

package/src/handlers/speed.js

@@ -0,0 +1,66 @@
+export function Speed() {
+
+	const _ = L.Control.Elevation.Utils;
+
+	let opts = this.options;
+	let speed = {};
+
+	speed.label      = opts.speedLabel  || L._(opts.imperial ? 'mph' : 'km/h');
+	opts.speedFactor = opts.speedFactor || 1;
+
+	return {
+		name: 'speed',
+		required: (this.options.acceleration),
+		unit: speed.label,
+		deltaMax: this.options.speedDeltaMax,
+		clampRange: this.options.speedRange,
+		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 dt > 0 ? Math.abs((dx / dt) * opts.timeFactor) * opts.speedFactor : 0;
+		},
+		stats: { max: _.iMax, min: _.iMin, avg: _.iAvg },
+		scale : (this.options.speed && this.options.speed != "summary") && {
+			axis       : "y",
+			position   : "right",
+			scale      : { min : 0, max : +1 },
+			tickPadding: 16,
+			labelX     : 25,
+			labelY     : -8,
+		},
+		path: (this.options.speed && this.options.speed != "summary") && {
+			// name         : 'speed',
+			label        : 'Speed',
+			yAttr        : "speed",
+			scaleX       : 'distance',
+			scaleY       : 'speed',
+			color        : '#03ffff',
+			strokeColor  : '#000',
+			strokeOpacity: "0.5",
+			fillOpacity  : "0.25",
+		},
+		tooltip: (this.options.speed) && {
+			chart: (item) => L._('v: ') + item.speed + " " + speed.label,
+			marker: (item) => Math.round(item.speed) + " " + speed.label,
+			order: 50,
+		},
+		summary: (this.options.speed) && {
+			"minspeed"  : {
+				label: "Min Speed: ",
+				value: (track, unit) => Math.round(track.speed_min || 0) + ' ' + unit,
+				order: 51
+			},
+			"maxspeed"  : {
+				label: "Max Speed: ",
+				value: (track, unit) => Math.round(track.speed_max || 0) + ' ' + unit,
+				order: 51
+			},
+			"avgspeed": {
+				label: "Avg Speed: ",
+				value: (track, unit) => Math.round(track.speed_avg || 0) + ' ' + unit,
+				order: 52
+			},
+		}
+	};
+}

package/src/{time.js → handlers/time.js}

@@ -1,9 +1,6 @@
-import 'leaflet-i18n';
-import * as _        from './utils';
-import * as D3       from './components';
-import { Elevation } from './control';
+export function Time() {
 
-Elevation.addInitHook(function() {
+	const _ = L.Control.Elevation.Utils;
 
 	let opts = this.options;
 	let time = {};
@@ -33,45 +30,31 @@ Elevation.addInitHook(function() {
 
 	opts.xTimeFormat = opts.xTimeFormat || ((t) => _.formatTime(t).split("'")[0]);
 
-	this._registerDataAttribute({
+	return {
 		name: 'time',
-		init: function({ point, props, id }) {
-			// "coordinateProperties" property is generated inside "@tmcw/toGeoJSON"
-			if (props) {
-				if("coordTimes" in props)     point.meta.time = new Date(Date.parse(props.coordTimes[id]));
-				else if("times" in props)     point.meta.time = new Date(Date.parse(props.times[id]));
-				else if("time" in props)      point.meta.time = new Date(Date.parse((typeof props.time === 'object' ? props.time[id] : props.time)));
-			}
-		},
-		fetch: function(i, point) {
+		required: (this.options.speed || this.options.acceleration || this.options.timestamps),
+		coordinateProperties: ["coordTimes", "times", "time"],
+		coordPropsToMeta: _.parseDate,
+		pointToAttr: function(point, i) {
 			// Add missing timestamps (see: options.timeAVGSpeed)
 			if (!point.meta || !point.meta.time) {
 				point.meta = point.meta || {};
 				if(i > 0) {
 					let dx = (this._data[i].dist - this._data[i - 1].dist);
 					let t0 = this._data[i - 1].time.getTime();
-					let dt = ( dx / this._timeAVGSpeed) * this.options.timeFactor * 1000;
-					point.meta.time = new Date(t0 + dt);
+					point.meta.time = new Date(t0 + ( dx / this._timeAVGSpeed) * this.options.timeFactor * 1000);
 				} else {
 					point.meta.time = new Date(Date.now())
 				}
 			}
 			// Handle timezone offset
-			if (point.meta.time.getTime() - point.meta.time.getTimezoneOffset() * 60 * 1000 === 0) {
-				point.meta.time = 0;
-			}
-			return point.meta.time.getTime();
+			let time = (point.meta.time.getTime() - point.meta.time.getTimezoneOffset() * 60 * 1000 !== 0) ? point.meta.time : 0;
+			// Update duration
+			this._data[i].duration = i > 0 ? (this._data[i - 1].duration || 0) + Math.abs(time - this._data[i - 1].time) : 0;
+			return time;
 		},
-		update: function(time, i) {
-			this.track_info.time   = (this.track_info.time || 0) + Math.abs(this._data[i].time - this._data[i > 0 ? i - 1 : i].time);
-			this._data[i].duration = this.track_info.time;
-			return new Date(time);
-		}
-	});
-
-	if (opts.time && opts.time != "summary" && !L.Browser.mobile) {
-
-		this._registerAxisScale({
+		onPointAdded: (_, i) => this.track_info.time = this._data[i].duration,
+		scale: (opts.time && opts.time != "summary" && !L.Browser.mobile) && {
 			axis       : "x",
 			position   : "top",
 			scale      : {
@@ -82,6 +65,7 @@ Elevation.addInitHook(function() {
 			labelY     : -10,
 			labelX     : () => this._width(),
 			name       : "time",
+			ticks      : () => _.clamp(this._chart._xTicks() / 2, [4, +Infinity]),
 			tickFormat : (d)  => (d == 0 ? '' : opts.xTimeFormat(d)),
 			onAxisMount: axis => {
 				axis.select(".domain")
@@ -95,31 +79,25 @@ Elevation.addInitHook(function() {
 					.attr('stroke-dasharray', 2)
 					.attr('opacity', 0.75);
 				}
-		});
-
-	}
-
-	if (this.options.timestamps) {
-		this._registerTooltip({
-			name: 'date',
-			chart: (item) => L._("t: ") + this.options.timeFormat(item.time),
-			order: 20,
-		});
-	}
-
-	if (this.options.time) {
-		this._registerTooltip({
-			name: 'time',
-			chart: (item) => L._("T: ") + _.formatTime(item.duration || 0),
-			order: 20
-		});
-		this._registerSummary({
+		},
+		tooltips: [
+			(this.options.time) && {
+				name: 'time',
+				chart: (item) => L._("T: ") + _.formatTime(item.duration || 0),
+				order: 20
+			},
+			(this.options.timestamps) && {
+				name: 'date',
+				chart: (item) => L._("t: ") + this.options.timeFormat(item.time),
+				order: 21,
+			}
+		],
+		summary: (this.options.time) && {
 			"tottime"  : {
 				label: "Total Time: ",
 				value: (track) => _.formatTime(track.time || 0),
 				order: 20
 			}
-		});
-	}
-
-});
+		}
+	};
+}