fix broken loading of chart handlers for "false" option values + add …

…pace example
Raruto · Apr 5, 2022 · 575b50c · 575b50c
1 parent 2589a93
commit 575b50c
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ _For a working example see one of the following demos:_
 - [loading multiple maps](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_multiple-maps.html)
 - [translating plugin labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)
 - [using custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
-- [using .gpx extensions (cadence + heart)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
+- [using .gpx extensions (cadence, heart, pace)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
 - [using .gpx waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html)
 - [using .geojson waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-waypoints.html)
 
@@ -124,15 +124,15 @@ _For a working example see one of the following demos:_
         // Speed chart profile: true || "summary" || "disabled" || false
         speed: false,
 
+        // Altitude chart profile: true || "summary" || "disabled" || false
+        altitude: true,
+
         // Display time info: true || "summary" || false
-        time: false,
+        time: true,
 
-        // Display distance info: true || "summary"
+        // Display distance info: true || "summary" || false
         distance: true,
 
-        // Display altitude info: true || "summary"
-        altitude: true,
-
         // Summary track info style: "inline" || "multiline" || false
         summary: 'multiline',
 

diff --git a/examples/leaflet-elevation_extended-ui.html b/examples/leaflet-elevation_extended-ui.html
@@ -29,7 +29,7 @@
 		}
 
 		/** Hide useful legend items */
-		.elevation-summary > :not(.totlen, .tottime, .avgspeed, .minbpm, .maxbpm, .avgbpm, .minrpm, .maxrpm, .avgrpm, .download) {
+		.elevation-summary > :not(.totlen, .tottime, .avgspeed, .minbpm, .maxbpm, .avgbpm, .minrpm, .maxrpm, .avgrpm, .minpace, .maxpace, .avgpace, .download) {
 			display: none !important;
 		}
 	</style>
@@ -152,6 +152,72 @@
 		// 		}
 		// 	};
 		// }
+
+		L.Control.Elevation.MyPace = function() {
+
+			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,
+				decimals: 2,
+				pointToAttr: (point, 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: (pace, max = -Infinity) => (pace > max ? pace : max),
+					min: (pace, min = +Infinity) => (pace < min ? pace : min),
+					avg: (pace, avg = 0, idx = 1) => (pace + avg * (idx - 1)) / idx,
+				},
+				scale : {
+					axis       : "y",
+					position   : "right",
+					scale      : { min : 0, max : +1 },
+					tickPadding: 16,
+					labelX     : 25,
+					labelY     : -8,
+				},
+				path: {
+					// name         : 'pace',
+					label        : 'Pace',
+					yAttr        : "pace",
+					scaleX       : 'distance',
+					scaleY       : 'pace',
+					color        : '#03ffff',
+					strokeColor  : '#000',
+					strokeOpacity: "0.5",
+					fillOpacity  : "0.25",
+				},
+				tooltip: {
+					chart: (item) => L._('pace: ') + item.pace + " " + pace.label,
+					marker: (item) => Math.round(item.pace) + " " + pace.label,
+					order: 55,
+				},
+				summary: {
+					"minpace"  : {
+						label: "Min Pace: ",
+						value: (track, unit) => Math.round(track.pace_min || 0) + '&nbsp;' + unit,
+						order: 55
+					},
+					"maxpace"  : {
+						label: "Max Pace: ",
+						value: (track, unit) => Math.round(track.pace_max || 0) + '&nbsp;' + unit,
+						order: 56
+					},
+					"avgpace": {
+						label: "Avg Pace: ",
+						value: (track, unit) => Math.round(track.pace_avg || 0) + '&nbsp;' + unit,
+						order: 57
+					},
+				}
+			};
+		}
+
 	</script>
 
 	<script>
@@ -178,6 +244,7 @@
 					slope: false,        // true || "disabled",
 					speed: "disabled",   // true || false,
 					time: true,
+					pace: true,
 					timestamps: true,
 					distance: true,
 					distanceMarkers: true,
@@ -186,12 +253,21 @@
 					heart: true,                              // <-- Intial state of your custom option (true || "summary" || false)
 					cadence: true,                            // <-- Intial state of your custom option (true || "summary" || false)
 					handlers: [                               // <-- A list of: Dynamic imports || "ClassName" || function Name() { return { /* a custom object definition */ } }
+						'Distance',                           // <-- same as: import("../src/handlers/distance.js")
+						'Time',                               // <-- same as: import("../src/handlers/time.js")
+						'Altitude',                           // <-- same as: import("../src/handlers/altitude.js")
+						'Slope',                              // <-- same as: import("../src/handlers/slope.js")
+						'Speed',                              // <-- same as: import("../src/handlers/speed.js")
+						'Acceleration',                       // <-- same as: import("../src/handlers/acceleration.js")
+						// 'Pace',                            // <-- same as: import("../src/handlers/pace.js")
 						// "Heart",                           // <-- same as: import("../src/handlers/heart.js")
 						// "Cadence",                         // <-- same as: import("../src/handlers/cadence.js")
 						// import('../src/handlers/heart.js'),
 						import('../src/handlers/cadence.js'),
-						L.Control.Elevation.MyHeart,          // <-- see custom functions declared above 
+						// import('../src/handlers/pace.js'),
+						L.Control.Elevation.MyHeart,          // <-- see custom functions declared above
 						// L.Control.Elevation.MyCadence,     // <-- see custom functions declared above
+						L.Control.Elevation.MyPace,           // <-- see custom functions declared above
 					],
 					// yAttr: 'heart',                        // <-- sometimes useful when (altitude: false)
 					// yScale: 'heart',                       // <-- sometimes useful when (altitude: false)

diff --git a/src/components/chart.js b/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;
 	},

diff --git a/src/control.js b/src/control.js
@@ -232,17 +232,7 @@ 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);
@@ -730,14 +720,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));

diff --git a/src/handlers/pace.js b/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) + '&nbsp;' + unit,
+				order: 51
+			},
+			"maxpace"  : {
+				label: "Max Pace: ",
+				value: (track, unit) => Math.round(track.pace_max || 0) + '&nbsp;' + unit,
+				order: 51
+			},
+			"avgpace": {
+				label: "Avg Pace: ",
+				value: (track, unit) => Math.round(track.pace_avg || 0) + '&nbsp;' + unit,
+				order: 52
+			},
+		}
+	};
+}
diff --git a/src/options.js b/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 }),

diff --git a/test/index.html b/test/index.html
@@ -130,10 +130,10 @@
 				// url: '{"name":"demo.geojson","type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"LineString","coordinates":[[169.13693,-44.696476,296],[169.134602,-44.69764,295],[169.129983,-44.701164,299],[169.131292,-44.702382,303],[169.13376,-44.704533,315],[169.135568,-44.705574,336],[169.136179,-44.70934,338],[169.137011,-44.714066,344],[169.136984,-44.719489,342],[169.136898,-44.725235,350],[169.136801,-44.730143,353],[169.135632,-44.734853,354],[169.131882,-44.738989,363],[169.129688,-44.744241,363],[169.123937,-44.746982,361],[169.118509,-44.750286,371],[169.112763,-44.753113,374],[169.107807,-44.755356,378],[169.103467,-44.758086,386],[169.098902,-44.760956,388],[169.096429,-44.764642,397],[169.094197,-44.768246,401],[169.091955,-44.773037,402],[169.089251,-44.777194,408],[169.086215,-44.780939,410],[169.083227,-44.785498,412],[169.079778,-44.788926,423],[169.076913,-44.7923,429],[169.074059,-44.795938,429],[169.071495,-44.800213,435],[169.069505,-44.804263,442],[169.067574,-44.809322,436],[169.065508,-44.812728,450],[169.063277,-44.817299,451],[169.062,-44.822073,447],[169.06023,-44.826622,464],[169.058905,-44.831729,459],[169.05553,-44.835645,460],[169.051888,-44.83933,467],[169.048626,-44.842817,476],[169.045467,-44.846106,480],[169.042028,-44.849287,485],[169.037672,-44.851776,493],[169.033477,-44.854367,495],[169.029974,-44.856373,502],[169.027324,-44.857559,514],[169.023832,-44.859275,518],[169.020587,-44.861743,524],[169.017615,-44.864414,526],[169.015748,-44.868888,520],[169.013119,-44.872059,529],[169.009879,-44.874521,536],[169.00798,-44.87598,553],[169.005073,-44.878158,556],[169.00452,-44.878609,557],[169.004488,-44.878619,554],[169.004477,-44.878619,553],[169.004483,-44.878619,552],[169.004477,-44.878619,551],[169.004477,-44.878619,550],[169.004477,-44.878619,551],[169.004483,-44.878614,551],[169.004488,-44.878614,551],[169.004488,-44.878614,552],[169.004558,-44.878598,556],[169.004011,-44.880808,556],[169.002584,-44.884032,570],[169.001033,-44.886172,583],[168.999703,-44.887546,600],[168.998732,-44.889235,606],[168.996801,-44.890893,609],[168.992279,-44.893452,608],[168.988915,-44.895941,613],[168.987783,-44.899117,616],[168.985283,-44.901563,625],[168.9834,-44.904835,629],[168.981164,-44.90755,639],[168.978138,-44.910441,647],[168.976008,-44.913166,649],[168.973165,-44.915371,656],[168.973358,-44.918332,657],[168.971502,-44.921905,670],[168.971454,-44.925504,676],[168.970628,-44.929104,687],[168.969887,-44.931856,701],[168.969448,-44.934672,710],[168.968155,-44.938567,713],[168.967575,-44.939463,731],[168.963912,-44.941855,726],[168.962141,-44.944918,738],[168.960376,-44.948287,746],[168.959813,-44.951527,757],[168.956793,-44.954156,766],[168.957008,-44.957117,782],[168.957351,-44.960684,791],[168.959025,-44.963624,805],[168.958794,-44.966269,815],[168.957614,-44.968683,832],[168.957571,-44.968801,833],[168.955221,-44.971097,839],[168.953274,-44.972958,863],[168.949771,-44.974363,877],[168.946869,-44.975699,888],[168.944911,-44.977614,911],[168.944825,-44.978489,928],[168.943709,-44.979846,951],[168.942373,-44.980634,964],[168.942277,-44.982217,978],[168.942153,-44.98329,993],[168.941799,-44.984363,1002],[168.941145,-44.985479,1021],[168.94115,-44.986535,1037],[168.940818,-44.987656,1054],[168.940104,-44.98889,1064],[168.939959,-44.990816,1082],[168.938634,-44.992345,1093],[168.938618,-44.992361,1087],[168.938608,-44.992361,1088],[168.938608,-44.992356,1090],[168.938608,-44.992345,1091],[168.938602,-44.992345,1091],[168.938608,-44.99235,1090],[168.938608,-44.992345,1090],[168.938742,-44.992179,1085],[168.920138,-44.995102,931],[168.908068,-44.99175,765],[168.903127,-44.985961,734],[168.903149,-44.985945,740],[168.903143,-44.98594,741],[168.903224,-44.985666,739],[168.899914,-44.981938,735],[168.892221,-44.976783,722],[168.876933,-44.976574,638],[168.869138,-44.976069,643],[168.865807,-44.975469,636],[168.864428,-44.975587,609],[168.860834,-44.977625,500],[168.85555,-44.981305,397],[168.853887,-44.978537,385],[168.84899,-44.976853,391],[168.848882,-44.972261,393],[168.850347,-44.96791,399],[168.851135,-44.962733,396],[168.848512,-44.959386,407],[168.845739,-44.956039,408],[168.843641,-44.952756,413],[168.841109,-44.948915,420],[168.840503,-44.947439,422],[168.839752,-44.944929,418],[168.835986,-44.939516,415],[168.833127,-44.938626,415],[168.832639,-44.938856,421],[168.832628,-44.93884,423],[168.832639,-44.938835,425],[168.832639,-44.93883,424],[168.832644,-44.938819,424],[168.832644,-44.938813,424],[168.832644,-44.938808,424],[168.832644,-44.938797,424],[168.832644,-44.938792,424],[168.832655,-44.938808,424],[168.83265,-44.938797,424],[168.832655,-44.938803,424],[168.83265,-44.938803,424],[168.83265,-44.938797,424],[168.83265,-44.938803,424],[168.83265,-44.938797,425],[168.833336,-44.93832,414],[168.833132,-44.93854,409],[168.834484,-44.938481,414],[168.834554,-44.93847,414],[168.83457,-44.938513,420],[168.834473,-44.938449,420],[168.834479,-44.938449,419],[168.83449,-44.938454,419],[168.834495,-44.938459,418],[168.834495,-44.938465,417],[168.834495,-44.938459,417]]},"properties":null}]}',
 				// url: `[{"type": "LineString","coordinates": [[-110, 55, 80], [-105, 45, 160], [-100, 40, 50]]}, {"type": "LineString","coordinates": [[-105, 40, 102], [-110, 45, 105], [-115, 55, 200]]}]`,
 				// url: "../examples/time.geojson",
-				// url: "../examples/time.gpx",
+				url: "../examples/time.gpx",
 				// url: "../examples/blue-hills.gpx",
 				// url: 'multi.gpx',
-				url: 'multi-2.gpx',
+				// url: 'multi-2.gpx',
 				// url: '../examples/demo.kml',
 				// url: "../examples/via-emilia.gpx",
 				// url: "../examples/sentiero-italia.gpx",
@@ -156,8 +156,8 @@
 					altitude: true,
 					distance: true,
 					slope: "summary",
-					speed: "summary",
-					acceleration: "summary",
+					speed: "disabled",
+					acceleration: true,
 					time: true, //"summary",
 					timestamps: true,
 					cadence: "disabled",