@raruto/leaflet-elevation 1.9.2 → 1.9.5

package/src/acceleration.js

@@ -13,6 +13,48 @@ Elevation.addInitHook(function() {
 	acceleration.label      = opts.accelerationLabel  || L._(opts.imperial ? 'ft/s²' : 'm/s²');
 	opts.accelerationFactor = opts.accelerationFactor || 1;
 
+	this._registerDataAttribute({
+		name: 'acceleration',
+		init: () => {
+			// this.track_info.acceleration_max = -Infinity; // Acceleration Max
+			// this.track_info.acceleration_min = +Infinity; // Acceleration Min
+			// this.track_info.acceleration_avg = 0;         // Acceleration Avg
+		},
+		fetch: (i) => {
+			let data   = this._data;
+			let dv     = (data[i].speed - data[i > 0 ? i - 1 : i].speed) * (1000 / opts.timeFactor);
+			let dt     = (data[i].time - data[i > 0 ? i - 1 : i].time) / 1000;
+			return dt > 0 ? Math.abs((dv / dt)) * opts.accelerationFactor : 0;
+		},
+		update: (acceleration, i) => {
+			this.track_info.acceleration_max = this.track_info.acceleration_max || -Infinity; // Acceleration Max
+			this.track_info.acceleration_min = this.track_info.acceleration_min || +Infinity; // Acceleration Min
+			this.track_info.acceleration_avg = this.track_info.acceleration_avg || 0;         // Acceleration Avg
+
+			let data  = this._data;
+			let track = this.track_info;
+
+			// Try to smooth "crazy" acceleration values.
+			if (this.options.accelerationDeltaMax) {
+				let delta    = acceleration - data[i > 0 ? i - 1 : i].acceleration;
+				let deltaMax = this.options.accelerationDeltaMax;
+				if (Math.abs(delta) > deltaMax) {
+					acceleration = data[i - 1].acceleration + deltaMax * Math.sign(delta);
+				}
+			}
+
+			// Range of acceptable acceleration values.
+			acceleration = _.clamp(acceleration, this.options.accelerationRange);
+	
+			if (acceleration > track.acceleration_max) track.acceleration_max = acceleration;
+			if (acceleration < track.acceleration_min) track.acceleration_min = acceleration;
+
+			track.acceleration_avg = (acceleration + track.acceleration_avg) / 2.0;
+
+			return L.Util.formatNum(acceleration, 2);
+		},
+	});
+
 	if (this.options.acceleration != "summary") {
 
 		this._registerAxisScale({
@@ -26,16 +68,16 @@ Elevation.addInitHook(function() {
 			label      : acceleration.label,
 			labelX     : 25,
 			labelY     : -8,
-			name       : 'acceleration'
+			name       : 'acceleration',
 		});
 
 		this._registerAreaPath({
-			name       : 'acceleration',
-			label      : 'Acceleration',
-			yAttr      : 'acceleration',
-			scaleX     : 'distance',
-			scaleY     : 'acceleration',
-			color      : '#050402',
+			name         : 'acceleration',
+			label        : 'Acceleration',
+			yAttr        : 'acceleration',
+			scaleX       : 'distance',
+			scaleY       : 'acceleration',
+			color        : '#050402',
 			strokeColor  : '#000',
 			strokeOpacity: "0.5",
 			fillOpacity  : "0.25",
@@ -43,65 +85,28 @@ Elevation.addInitHook(function() {
 
 	}
 
-	this.on('elepoint_added', function(e) {
-		let data   = this._data;
-		let i      = e.index;
-
-		let currT  = data[i].time;
-		let prevT  = i > 0 ? data[i - 1].time : currT;
-
-		let deltaT = (currT - prevT) / 1000;
-
-		let track  = this.track_info;
-		let sMax   = track.acceleration_max || -Infinity; // Acceleration Max
-		let sMin   = track.acceleration_min || +Infinity; // Acceleration Min
-		let sAvg   = track.acceleration_avg || 0; // Acceleration Avg
-		let acceleration = 0;
-
-		if (deltaT > 0) {
-			let curr     = data[i].speed;
-			let prev     = i > 0 ? data[i - 1].speed : curr;
-			let delta    = (curr - prev) * (1000 / opts.timeFactor);
-			acceleration = Math.abs((delta / deltaT)) * opts.accelerationFactor;
-		}
-
-		// Try to smooth "crazy" acceleration values.
-		if (this.options.accelerationDeltaMax) {
-			let deltaA     = i > 0 ? acceleration - data[i - 1].acceleration : 0;
-			let maxDeltaS  = this.options.accelerationDeltaMax;
-			if (Math.abs(deltaA) > maxDeltaS) {
-				acceleration = data[i - 1].acceleration + maxDeltaS * Math.sign(deltaA);
-			}
-		}
-
-		// Range of acceptable acceleration values.
-		acceleration = _.clamp(acceleration, this.options.accelerationRange);
-
-		track.acceleration_max = acceleration > sMax ? acceleration : sMax;
-		track.acceleration_min = acceleration < sMin ? acceleration : sMin;
-		track.acceleration_avg = (acceleration + sAvg) / 2.0;
-
-		data[i].acceleration = L.Util.formatNum(acceleration, 2);
-	});
-
 	this._registerTooltip({
 		name  : 'acceleration',
 		chart: (item) => L._("a: ") + item.acceleration + " " + acceleration.label,
 		marker: (item) => Math.round(item.acceleration) + " " + acceleration.label,
+		order: 60,
 	});
 
 	this._registerSummary({
 		"minacceleration"  : {
 			label: "Min Acceleration: ",
-			value: (track) => Math.round(track.acceleration_min || 0) + '&nbsp;' + acceleration.label
+			value: (track) => Math.round(track.acceleration_min || 0) + '&nbsp;' + acceleration.label,
+			order: 60
 		},
 		"maxacceleration"  : {
 			label: "Max Acceleration: ",
-			value: (track) => Math.round(track.acceleration_max || 0) + '&nbsp;' + acceleration.label
+			value: (track) => Math.round(track.acceleration_max || 0) + '&nbsp;' + acceleration.label,
+			order: 60
 		},
 		"avgacceleration": {
 			label: "Avg Acceleration: ",
-			value: (track) => Math.round(track.acceleration_avg || 0) + '&nbsp;' + acceleration.label
+			value: (track) => Math.round(track.acceleration_avg || 0) + '&nbsp;' + acceleration.label,
+			order: 60
 		}
 	});
 

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

@@ -116,9 +116,11 @@ export const PositionMarker = ({
 }) => {
 	return g => {
 
-		let line = g.select('.height-focus.line');
+		g.attr("class", "height-focus-group");
+
+		let line   = g.select('.height-focus.line');
 		let circle = g.select('.height-focus.circle-lower');
-		let text = g.select('.height-focus-label');
+		let text   = g.select('.height-focus-label');
 
 		if (!line.node()) line = g.append('svg:line');
 		if (!circle.node()) circle = g.append('svg:circle');
@@ -148,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()) {
@@ -158,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);
@@ -272,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);