@raruto/leaflet-elevation 1.9.4 → 1.9.5

package/src/altitude.js

@@ -5,8 +5,11 @@ import { Elevation } from './control';
 
 Elevation.addInitHook(function() {
 
-	let opts     = this.options;
-	let altitude = {};
+	let opts       = this.options;
+	let altitude   = {};
+
+	let theme      = opts.theme.replace('-theme', '');
+	let color      = D3.Colors[theme] || {};
 
 	if (opts.imperial) {
 		opts.altitudeFactor = this.__footFactor;
@@ -16,105 +19,101 @@ Elevation.addInitHook(function() {
 		altitude.label      = opts.yLabel;
 	}
 
-	this.on("eledata_updated", function(e) {
-		let data   = this._data;
-		let i      = e.index;
-		let z      = data[i].z * opts.altitudeFactor;
-
-		let track  = this.track_info;
-		let zMax = track.elevation_max || -Infinity;
-		let zMin = track.elevation_min || +Infinity;
-
-		// check and fix missing elevation data on last added point
-		if (!this.options.skipNullZCoords && i > 0) {
-			let prevZ = data[i - 1].z;
-			if (isNaN(prevZ)) {
-				let lastZ = this._lastValidZ;
-				let currZ = z;
-				if (!isNaN(lastZ) && !isNaN(currZ)) {
-					prevZ   = (lastZ + currZ) / 2;
-				} else if (!isNaN(lastZ)) {
-					prevZ   = lastZ;
-				} else if (!isNaN(currZ)) {
-					prevZ   = currZ;
+	this._registerDataAttribute({
+		name: 'z',
+		skipNull: this.options.skipNullZCoords,
+		init: ({point, }) => {
+			// "alt" property is generated inside "leaflet"
+			if ("alt" in point) point.meta.ele = point.alt;
+
+			// this.track_info.elevation_max = -Infinity;
+			// this.track_info.elevation_min = +Infinity;
+			// this.track_info.elevation_avg = 0;
+		},
+		fetch: (i) => {
+			return this._data[i].z * opts.altitudeFactor;
+		},
+		update: (z, i) => {
+			this.track_info.elevation_max = this.track_info.elevation_max || -Infinity;
+			this.track_info.elevation_min = this.track_info.elevation_max || +Infinity;
+			this.track_info.elevation_avg = this.track_info.elevation_avg || 0;
+
+			let data  = this._data;
+			let track = this.track_info;
+
+			// Try to smooth "crazy" elevation values.
+			if (this.options.altitudeDeltaMax) {
+				let delta    = z - data[i > 0 ? i - 1 : i].z;
+				let deltaMax = this.options.altitudeDeltaMax;
+				if (Math.abs(delta) > deltaMax) {
+					z = data[i - 1].z + deltaMax * Math.sign(delta);
 				}
-				if (!isNaN(prevZ)) return data.splice(i - 1, 1);
-				data[i - 1].z = prevZ;
 			}
-		}
-		// skip point if it has not elevation
-		if (!isNaN(z)) {
-			this._lastValidZ = z;
-		}
 
-		track.elevation_max = z > zMax ? z : zMax;
-		track.elevation_min = z < zMin ? z : zMin;
+			// Range of acceptable elevation values.
+			z = _.clamp(z, this.options.altitudeRange);
 
-		data[i].z = z;
-	});
-
-	this.on("elechart_axis", function() {
+			if (z > track.elevation_max) track.elevation_max = z;
+			if (z < track.elevation_min) track.elevation_min = z;
 
-		this._chart._registerAxisGrid({
-			axis      : "y",
-			position  : "left",
-			scale     : this._chart._y,
-		});
+			track.elevation_avg = (z + track.elevation_avg) / 2.0;
 
+			return z;
+		}
 	});
 
-	if (this.options.altitude != "summary") {
-
-		this.on("elechart_axis", function() {
-
-			this._chart._registerAxisScale({
-				axis    : "y",
-				position: "left",
-				scale   : this._chart._y,
-				label   : altitude.label,
-				labelX  : -3,
-				labelY  : -8,
-				name    : "altitude",
-			});
-
-		});
-
-		this.on("elechart_init", function() {
-
-			let theme      = this.options.theme.replace('-theme', '');
-			let color      = D3.Colors[theme] || {};
-
-			this._chart._registerAreaPath({
-				name         : 'altitude',
-				label        : 'Altitude',
-				scaleX       : 'distance',
-				scaleY       : 'altitude',
-				color        : color.area || theme,
-				strokeColor  : this.options.detached ? color.stroke : '#000',
-				strokeOpacity: "1",
-				fillOpacity  : this.options.detached ? (color.alpha || '0.8') : 1,
-				preferCanvas : this.options.preferCanvas,
-			});
+	this._registerAxisScale({
+		axis    : "y",
+		position: "left",
+		scale   : "y", // this._chart._y,
+		label   : altitude.label,
+		labelX  : -3,
+		labelY  : -8,
+		name    : "altitude",
+		visbile : this.options.altitude != "summary"
+	});
 
-		});
+	this._registerAxisGrid({
+		axis      : "y",
+		position  : "left",
+		scale     : "y" // this._chart._y,
+	});
 
-	}
+	this._registerAreaPath({
+		name         : 'altitude',
+		label        : 'Altitude',
+		scaleX       : 'distance',
+		scaleY       : 'altitude',
+		color        : color.area || theme,
+		strokeColor  : opts.detached ? color.stroke : '#000',
+		strokeOpacity: "1",
+		fillOpacity  : opts.detached ? (color.alpha || '0.8') : 1,
+		preferCanvas : opts.preferCanvas,
+		visbile      : this.options.altitude != "summary"
+	});
 
 	this._registerTooltip({
 		name: 'y',
 		chart: (item) => L._("y: ") + d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + altitude.label,
 		marker: (item) => d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + altitude.label,
+		order: 10,
 	});
 
 	this._registerSummary({
 		"maxele"  : {
 			label: "Max Elevation: ",
-			value: (track) => (track.elevation_max || 0).toFixed(2) + '&nbsp;' + altitude.label
+			value: (track) => (track.elevation_max || 0).toFixed(2) + '&nbsp;' + altitude.label,
+			order: 30,
 		},
 		"minele"  : {
 			label: "Min Elevation: ",
-			value: (track) => (track.elevation_min || 0).toFixed(2) + '&nbsp;' + altitude.label
+			value: (track) => (track.elevation_min || 0).toFixed(2) + '&nbsp;' + altitude.label,
+			order: 30,
+		},
+		"avgele"  : {
+			label: "Avg Elevation: ",
+			value: (track) => (track.elevation_avg || 0).toFixed(2) + '&nbsp;' + altitude.label,
+			order: 30,
 		},
 	});
-
-});
+});

package/src/chart.js

@@ -344,6 +344,9 @@ export var Chart = L.Class.extend({
 	},
 
 	_registerAreaPath: function(props) {
+		if (props.scale == 'y') props.scale = this._y;
+		else if (props.scale == 'x') props.scale = this._x;
+
 		let opts = this.options;
 
 		if (!props.xAttr) props.xAttr = opts.xAttr;
@@ -368,10 +371,16 @@ export var Chart = L.Class.extend({
 	},
 
 	_registerAxisGrid: function(props) {
+		if (props.scale == 'y') props.scale = this._y;
+		else if(props.scale == 'x') props.scale = this._x;
+
 		this._props.grids[props.name || props.axis] = props;
 	},
 
 	_registerAxisScale: function(props) {
+		if (props.scale == 'y') props.scale = this._y;
+		else if(props.scale == 'x') props.scale = this._x;
+
 		let opts  = this.options;
 		let scale = props.scale;
 
@@ -433,6 +442,7 @@ export var Chart = L.Class.extend({
 	},
 
 	_registerTooltip: function(props) {
+		props.order = props.order ?? 100;
 		this._props.tooltipItems[props.name] = props;
 	},
 

package/src/components.js

@@ -150,7 +150,10 @@ export const PositionMarker = ({
 
 		let label;
 
-		for (var i in labels) {
+		Object
+		.keys(labels)
+		.sort((a, b) => labels[a].order - labels[b].order) // TODO: any performance issues?
+		.forEach((i)=> {
 			label = text.select(".height-focus-" + labels[i].name);
 
 			if (!label.size()) {
@@ -160,7 +163,8 @@ export const PositionMarker = ({
 			}
 
 			label.text(typeof labels[i].value !== "function" ? labels[i].value : labels[i].value(item));
-		}
+
+		});
 
 		text.select('tspan').attr("dy", text.selectAll('tspan').size() > 1 ? "-1.5em" : "0em" );
 		text.selectAll('tspan').attr("x", xCoord + 5);
@@ -274,17 +278,20 @@ export const Tooltip = ({
 
 		let label;
 
-		for (let i in labels) {
-			label = text.select(".mouse-focus-label-" + labels[i].name);
+		Object
+			.keys(labels)
+			.sort((a, b) => labels[a].order - labels[b].order) // TODO: any performance issues?
+			.forEach((i)=> {
+				label = text.select(".mouse-focus-label-" + labels[i].name);
 
-			if (!label.size()) {
-				label = text.append("svg:tspan", ".mouse-focus-label-x")
-					.attr("class", "mouse-focus-label-" + labels[i].name)
-					.attr("dy", "1.5em");
-			}
+				if (!label.size()) {
+					label = text.append("svg:tspan", ".mouse-focus-label-x")
+						.attr("class", "mouse-focus-label-" + labels[i].name)
+						.attr("dy", "1.5em");
+				}
 
-			label.text(typeof labels[i].value !== "function" ? labels[i].value : labels[i].value(item));
-		}
+				label.text(typeof labels[i].value !== "function" ? labels[i].value : labels[i].value(item));
+			});
 
 		text.select('tspan').attr("dy", "1em");
 		text.selectAll('tspan').attr("x", xAlign);

package/src/control.js

@@ -17,7 +17,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__TOGEOJSON:   'https://unpkg.com/@tmcw/togeojson@4.5.0/dist/togeojson.umd.js',
 	__LGEOMUTIL:   'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
 	__LALMOSTOVER: 'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
-	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.9.4/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.9.5/libs/leaflet-distance-marker.min.js',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -89,6 +89,22 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		}
 	},
 
+	/**
+	 * TODO: Create a base class to handle custom data attributes (heart rate, cadence, temperature, ...)
+	 * 
+	 * @link https://leafletjs.com/examples/extending/extending-3-controls.html#handlers
+	 */
+	// addHandler: function (name, HandlerClass) {
+	// 	if (HandlerClass) {
+	// 		let handler = this[name] = new HandlerClass(this);
+	// 		this.handlers.push(handler);
+	// 		if (this.options[name]) {
+	// 			handler.enable();
+	// 		}
+	// 	}
+	// 	return this;
+	// },
+
 	/**
 	 * Disable chart brushing.
 	 */
@@ -133,7 +149,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	},
 
 	/**
-	 * Get default zoom level when "followMarker" is true.
+	 * Get default zoom level (followMarker: true).
 	 */
 	getZFollow: function() {
 		return this.options.zFollow;
@@ -156,6 +172,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._markedSegments = L.polyline([]);
 		this._chartEnabled   = true,
 		this.track_info      = {};
+		this.handlers        = [];
 
 		L.setOptions(this, options);
 
@@ -208,7 +225,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	},
 
 	/**
-	 * Load elevation data (GPX, GeoJSON or KML).
+	 * Load elevation data (GPX, GeoJSON, KML or TCX).
 	 */
 	load: function(data) {
 		this._parseFromString(data).then( geojson => geojson ? this._loadLayer(geojson) : this._loadFile(data));
@@ -283,7 +300,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	},
 
 	/**
-	 * Set default zoom level when "followMarker" is true.
+	 * Set default zoom level (followMarker: true).
 	 */
 	setZFollow: function(zoom) {
 		this.options.zFollow = zoom;
@@ -343,20 +360,10 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			// Inspired by L.GPX layer properties
 			point.meta = point.meta ?? { time: null, ele: null, hr: null, cad: null, atemp: null };
 			
-			// "alt" property is generated inside "leaflet"
-			if ("alt" in point) point.meta.ele = point.alt;
-
 			// "coordinateProperties" property is generated inside "@tmcw/toGeoJSON"
 			let props = (properties && properties.coordinateProperties) || properties;
-			if (props) {
-				if("coordTimes" in props)     point.meta.time = new Date(Date.parse(props.coordTimes[i]));
-				else if("times" in props)     point.meta.time = new Date(Date.parse(props.times[i]));
-				else if("time" in props)      point.meta.time = new Date(Date.parse((typeof props.time === 'object' ? props.time[i] : props.time)));
-				if ("heartRates" in props)    point.meta.hr   = parseInt(props.heartRates[i]);
-				else if("heartRate" in props) point.meta.hr   = parseInt((typeof props.heartRate === 'object' ? props.heartRate[i] : props.heartRate));
-				else if("heart" in props)     point.meta.hr   = parseInt((typeof props.heart === 'object' ? props.heart[i] : props.heart));
-				// TODO: ask to "@tmcw/toGeoJSON" for "cadence" and "temperature" implementation
-			}
+
+			this.fire("elepoint_init", { point: point, props: props, id: i });
 
 			this._addPoint(
 				point.lat ?? point[1], 
@@ -364,10 +371,10 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				point.alt ?? point.meta.ele ?? point[2]
 			);
 
-			this._fireEvt("elepoint_added", { point: point, index: this._data.length - 1 });
+			this.fire("elepoint_added", { point: point, index: this._data.length - 1 });
 		});
 
-		this._fireEvt("eletrack_added", { coords: coords, index: this._data.length - 1 });
+		this.fire("eletrack_added", { coords: coords, index: this._data.length - 1 });
 	},
 
 	/*
@@ -385,7 +392,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			latlng: L.latLng(x, y, z)
 		});
 
-		this._fireEvt("eledata_updated", { index: this._data.length - 1 });
+		this.fire("eledata_updated", { index: this._data.length - 1 });
 	},
 
 	_addLayer: function(layer) {
@@ -572,7 +579,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	},
 
 	/**
-	 * Generate "svg" chart DOM element.
+	 * Generate "svg" chart (DOM element).
 	 */
 	_initChart: function(container) {
 		let opts    = this.options;
@@ -602,7 +609,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 
 		chart
 			.on('reset_drag',     this._hideMarker,                     this)
-			.on('mouse_enter',    this._fireEvt.bind('elechart_enter'), this)
+			.on('mouse_enter',    this._mouseenterHandler,              this)
 			.on('dragged',        this._dragendHandler,                 this)
 			.on('mouse_move',     this._mousemoveHandler,               this)
 			.on('mouse_out',      this._mouseoutHandler,                this)
@@ -612,10 +619,11 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			.on('margins_updated',this._resizeChart,                    this);
 
 
-		this._fireEvt("elechart_axis");
-		if (this.options.legend) this._fireEvt("elechart_legend");
+		this.fire("elechart_axis");
+
+		if (this.options.legend) this.fire("elechart_legend");
 
-		this._fireEvt("elechart_init");
+		this.fire("elechart_init");
 	},
 
 	_initLayer: function() {
@@ -641,7 +649,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._renderer               = L.svg({ pane: "elevationPane" }).addTo(this._map); // default leaflet svg renderer
 		this._marker                 = new Marker(this.options);
 
-		this._fireEvt("elechart_marker");
+		this.fire("elechart_marker");
 	},
 
 	/**
@@ -772,7 +780,14 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._hideMarker();
 		this.fitBounds(L.latLngBounds([e.dragstart.latlng, e.dragend.latlng]));
 
-		this._fireEvt("elechart_dragged");
+		this.fire("elechart_dragged");
+	},
+
+	/**
+	 * Trigger mouseenter event
+	 */
+	_mouseenterHandler: function(e) {
+		this.fire('elechart_enter');
 	},
 
 	/*
@@ -796,8 +811,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				_.addClass(this._map.getContainer(), 'elechart-hover');
 			}
 
-			this._fireEvt("elechart_change", { data: item, xCoord: xCoord });
-			this._fireEvt("elechart_hover",  { data: item, xCoord: xCoord });
+			this.fire("elechart_change", { data: item, xCoord: xCoord });
+			this.fire("elechart_hover",  { data: item, xCoord: xCoord });
 		}
 	},
 
@@ -817,7 +832,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 
 			this._updateMarker(item);
 
-			this._fireEvt("elechart_change", { data: item, xCoord: xCoord });
+			this.fire("elechart_change", { data: item, xCoord: xCoord });
 		}
 	},
 
@@ -834,7 +849,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			_.removeClass(this._map.getContainer(), 'elechart-hover');
 		}
 
-		this._fireEvt("elechart_leave");
+		this.fire("elechart_leave");
 	},
 
 	/**
@@ -919,13 +934,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		return geojson.features.filter(feauture => feauture.geometry.type != "MultiLineString");
 	},
 
-	/**
-	 * Add a point of interest over the diagram
-	 */
-	_registerCheckPoint: function(props) {
-		this.on("elechart_updated", () => this._chart._registerCheckPoint(props));
-	},
-
 	/**
 	 * Add chart profile to diagram
 	 */
@@ -947,6 +955,60 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this.on("elechart_axis", () => this._chart._registerAxisScale(props));
 	},
 
+	/**
+	 * Add a point of interest over the diagram
+	 */
+	_registerCheckPoint: function(props) {
+		this.on("elechart_updated", () => this._chart._registerCheckPoint(props));
+	},
+
+
+	/**
+	 * Base handler for iterative track statistics (dist, time, z, slope, speed, acceleration, ...)
+	 */
+	 _registerDataAttribute: function(props) {
+		// save here a reference to last used point
+		let lastValid = null; 
+
+		// parse of "coordinateProperties" for later usage
+		if (props.init) {
+			this.on("elepoint_init", (e) => props.init.call(this, e));
+		}
+
+		// iteration
+		this.on("elepoint_added", (e) => {
+
+			// check and fix missing data on last added point
+			if (props.skipNull === false) {
+				let curr = this._data[e.index][props.name];
+				if(e.index > 0) {
+					let prev = this._data[e.index - 1][props.name];
+					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(e.index - 1, 1);
+						this._data[e.index - 1][props.name] = prev;
+					}
+				}
+				// update reference to last used point (ie. if it has data)
+				if (!isNaN(curr)) {
+					lastValid = curr;
+				}
+			}
+
+			// retrieve point value
+			this._data[e.index][props.name] = props.fetch.call(this, e.index, e.point);
+
+			// update here some mixins (eg. "track_info", value validators, ...)
+			if(props.update) this._data[e.index][props.name] = props.update.call(this, this._data[e.index][props.name], e.index, e.point)
+		});
+	},
+	
 	/**
 	 * Add chart or marker tooltip info
 	 */
@@ -1030,7 +1092,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	},
 
 	/**
-	 * Collapse or Expand current chart control.
+	 * Collapse or Expand chart control.
 	 */
 	_toggle: function() {
 		if (_.hasClass(this._container, "elevation-expanded"))
@@ -1040,7 +1102,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	},
 
 	/**
-	 * Sets the view of the map (center and zoom). Useful when "followMarker" is true.
+	 * Update map center and zoom (followMarker: true)
 	 */
 	_setMapView: function(item) {
 		if (!this.options.followMarker || !this._map) return;
@@ -1080,15 +1142,15 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	_updateChart: function() {
 		if (/*!this._data.length ||*/ !this._chart || !this._container) return;
 
-		this._fireEvt("elechart_axis");
-		this._fireEvt("elechart_area");
+		this.fire("elechart_axis");
+		this.fire("elechart_area");
 
 		this._chart.update({ data: this._data, options: this.options });
 
 		this._x     = this._chart._x;
 		this._y     = this._chart._y;
 
-		this._fireEvt('elechart_updated');
+		this.fire('elechart_updated');
 	},
 
 	/*
@@ -1131,7 +1193,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._summary.reset();
 
 		if (this.options.summary) {
-			this._fireEvt("elechart_summary");
+			this.fire("elechart_summary");
+			this._summary.update();
 		}
 		if (this.options.downloadLink && this._downloadURL) { // TODO: generate dynamically file content instead of using static file urls.
 			this._summary._container.innerHTML += '<span class="download"><a href="#">' + L._('Download') + '</a></span>'
@@ -1143,7 +1206,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				} else if (this.options.downloadLink == 'link' || this.options.downloadLink === true) {
 					event.confirm();
 				}
-				this._fireEvt('eletrack_download', event);
+				this.fire('eletrack_download', event);
 			};
 		};
 	},