@raruto/leaflet-elevation 1.9.3 → 1.9.6

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.3/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.9.6/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);
 
@@ -163,7 +180,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (this.options.legend)                   this.options.margins.bottom += 30;
 		if (this.options.theme)                    this.options.polylineSegments.className += ' ' + this.options.theme;
 		if (this.options.wptIcons === true)        this.options.wptIcons = Options.wptIcons;
-		if (this.options.distanceMarkers === true) this.options.distanceMarkers = { lazy: true };
+		if (this.options.distanceMarkers === true) this.options.distanceMarkers = Options.distanceMarkers;
 
 		this._markedSegments.setStyle(this.options.polylineSegments);
 
@@ -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);
 			};
 		};
 	},

package/src/distance.js

@@ -16,62 +16,53 @@ Elevation.addInitHook(function() {
 		distance.label      = opts.xLabel;
 	}
 
-	this.on("eledata_updated", function(e) {
-		let data = this._data;
-		let i    = e.index;
-
-		let track = this.track_info;
-		let dist  = track.distance || 0;
-
-		let curr = data[i].latlng;
-		let prev = i > 0 ? data[i - 1].latlng : curr;
-
-		let delta = curr.distanceTo(prev) * opts.distanceFactor;
-
-		dist += Math.round(delta / 1000 * 100000) / 100000; // handles floating points calc
-
-		track.distance = dist;
-
-		data[i].dist = dist;
-	});
-
-	this.on("elechart_axis", function() {
-
-		this._chart._registerAxisGrid({
-			axis      : "x",
-			position  : "bottom",
-			scale     : this._chart._x,
-		});
-
+	this._registerDataAttribute({
+		name: 'dist',
+		init: () => {
+			// this.track_info.distance = 0;
+		},
+		fetch: (i) => {
+			let delta = this._data[i].latlng.distanceTo(this._data[i > 0 ? i - 1 : i].latlng) * opts.distanceFactor;
+			return Math.round(delta / 1000 * 100000) / 100000; // handles floating points calc
+		},
+		update: (distance) => {
+			this.track_info.distance = this.track_info.distance || 0;
+			this.track_info.distance += distance;
+			return this.track_info.distance;
+		}
 	});
 
 	if (this.options.distance != "summary") {
 
-		this.on("elechart_axis", function() {
-
-			this._chart._registerAxisScale({
-				axis    : "x",
-				position: "bottom",
-				scale   : this._chart._x,
-				label   : distance.label,
-				labelY  : 25,
-				labelX  : () => this._width() + 6,
-				name    : "distance",
-			});
-
+		this._registerAxisScale({
+			axis    : "x",
+			position: "bottom",
+			scale   : "x", // this._chart._x,
+			label   : distance.label,
+			labelY  : 25,
+			labelX  : () => this._width() + 6,
+			name    : "distance",
 		});
 
 	}
 
+	this._registerAxisGrid({
+		axis      : "x",
+		position  : "bottom",
+		scale     : "x" // this._chart._x,
+	});
+
 	this._registerTooltip({
 		name: 'x',
 		chart: (item) => L._("x: ") + d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + distance.label,
+		order: 20
 	});
 
 	this._registerSummary({
 		"totlen"  : {
 			label: "Total Length: ",
-			value: (track) => (track.distance || 0).toFixed(2) + ' ' + distance.label
+			value: (track) => (track.distance || 0).toFixed(2) + ' ' + distance.label,
+			order: 10
 		}
 	});
 

package/src/index.js

@@ -39,9 +39,9 @@ import * as _ from './utils';
 import * as D3 from './components';
 import { Chart } from './chart';
 import { Elevation } from './control';
-import './altitude';
 import './distance';
 import './time';
+import './altitude';
 import './slope';
 import './speed';
 import './acceleration';

package/src/options.js

@@ -9,7 +9,11 @@ export var Options = {
 	collapsed: false,
 	detached: true,
 	distance: true,
-	distanceMarkers: false,
+	distanceMarkers: {
+		lazy: true,
+		distance: true,
+		direction: true
+	},
 	decimalsX: 2,
 	decimalsY: 0,
 	dragging: !L.Browser.mobile,
@@ -55,15 +59,15 @@ export var Options = {
 	theme: "lightblue-theme",
 	summary: 'inline',
 	slope: false,
+	slopeDeltaMax: undefined,
+	slopeRange: undefined,
 	speed: false,
-	sLimit: undefined,
+	speedDeltaMax: undefined,
+	speedRange: undefined,
 	time: false,
 	timeFactor: 3600,
 	timeFormat: false,
 	timestamps: false,
-	sDeltaMax: undefined,
-	sInterpolation: "curveStepAfter",
-	sRange: undefined,
 	width: 600,
 	waypoints: true,
 	wptIcons: {

package/src/slope.js

@@ -12,100 +12,116 @@ Elevation.addInitHook(function() {
 
 	slope.label          = opts.slopeLabel || '%';
 
-	if (this.options.slope != "summary") {
-
-		this._registerAxisScale({
-			axis       : "y",
-			position   : "right",
-			scale      : {
-				min        : -1,
-				max        : +1,
-			},
-			tickPadding: 16,
-			label      : slope.label,
-			labelX     : 25,
-			labelY     : -8,
-			name       : 'slope'
-		});
-
-		this._registerAreaPath({
-			name         : 'slope',
-			label        : 'Slope',
-			yAttr        : 'slope',
-			scaleX       : 'distance',
-			scaleY       : 'slope',
-			color        : '#F00',
-			strokeColor  : '#000',
-			strokeOpacity: "0.5",
-			fillOpacity  : "0.25",
-		});
-
-	}
-
-	this.on("eledata_updated", function(e) {
-		let data  = this._data;
-		let i     = e.index;
-		let z     = data[i].z;
-		let delta = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
-
-		// Slope / Gain
-		let track = this.track_info;
-		let tAsc  = track.ascent    || 0; // Total Ascent
-		let tDes  = track.descent   || 0; // Total Descent
-		let sMax  = track.slope_max || 0; // Slope Max
-		let sMin  = track.slope_min || 0; // Slope Min
-		let slope = 0;
-
-		if (!isNaN(z)) {
-			let deltaZ  = i > 0 ? z - data[i - 1].z : 0;
-			if (deltaZ > 0)      tAsc += deltaZ;
-			else if (deltaZ < 0) tDes -= deltaZ;
-			// slope in % = ( height / length ) * 100
-			if (delta !== 0)     slope = (deltaZ / delta) * 100;
-		}
-
-		// Try to smooth "crazy" slope values.
-		if (this.options.sDeltaMax) {
-			let deltaS    = i > 0 ? slope - data[i - 1].slope : 0;
-			let maxDeltaS = this.options.sDeltaMax;
-			if (Math.abs(deltaS) > maxDeltaS) {
-				slope       = data[i - 1].slope + maxDeltaS * Math.sign(deltaS);
+	this._registerDataAttribute({
+		name: 'slope',
+		// init: () => {
+		// 	// this.track_info.ascent    = 0;         // Total Ascent
+		// 	// this.track_info.descent   = 0;         // Total Descent
+		// 	// this.track_info.slope_max = -Infinity; // Slope Max
+		// 	// this.track_info.slope_min = +Infinity; // Slope Min
+		// 	// this.track_info.slope_avg = 0;         // Acceleration Avg
+		// },
+		fetch: (i) => {
+			let data  = this._data;
+			let dx    = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
+			let dz    = data[i].z - data[i > 0 ? i - 1 : i].z;
+			return (!isNaN(dz) && dx !== 0) ? (dz / dx) * 100 : 0; // slope in % = ( height / length ) * 100;
+		},
+		update: (slope, i) => {
+			this.track_info.ascent    = this.track_info.ascent    || 0;         // Total Ascent
+			this.track_info.descent   = this.track_info.descent   || 0;         // Total Descent
+			this.track_info.slope_max = this.track_info.slope_max || -Infinity; // Slope Max
+			this.track_info.slope_min = this.track_info.slope_min || +Infinity; // Slope Min
+			this.track_info.slope_avg = this.track_info.slope_avg || 0;         // Acceleration Avg
+
+			let track = this.track_info;
+			let data  = this._data;
+			let dz    = data[i].z - data[i > 0 ? i - 1 : i].z;
+
+			// Try to smooth "crazy" acceleration values.
+			if (this.options.slopeDeltaMax) {
+				let delta    = slop - data[i > 0 ? i - 1 : i].slope;
+				let deltaMax = this.options.slopeDeltaMax;
+				if (Math.abs(delta) > deltaMax) {
+					slope = data[i - 1].slope + deltaMax * Math.sign(delta);
+				}
 			}
-		}
 
-		// Range of acceptable slope values.
-		slope = _.clamp(slope, this.options.sRange);
+			// Range of acceptable slope values.
+			slope = _.clamp(slope, this.options.slopeRange);
+
+			if (dz > 0)      this.track_info.ascent += dz;
+			else if (dz < 0) this.track_info.descent -= dz;
+
+			if (slope > track.slope_max) track.slope_max = slope;
+			if (slope < track.slope_min) track.slope_min = slope;
 
-		track.ascent    = tAsc;
-		track.descent   = tDes;
-		track.slope_max = slope > sMax ? slope : sMax;
-		track.slope_min = slope < sMin ? slope : sMin;
+			track.slope_avg = (slope + track.slope_avg) / 2.0;
 
-		data[i].slope   = L.Util.formatNum(slope, 2);
+			return L.Util.formatNum(slope, 2);;
+		}
+	});
+
+	this._registerAxisScale({
+		axis       : "y",
+		position   : "right",
+		scale      : {
+			min        : -1,
+			max        : +1,
+		},
+		tickPadding: 16,
+		label      : slope.label,
+		labelX     : 25,
+		labelY     : -8,
+		name       : 'slope',
+		visbile    : this.options.slope != "summary"
+	});
+
+	this._registerAreaPath({
+		name         : 'slope',
+		label        : 'Slope',
+		yAttr        : 'slope',
+		scaleX       : 'distance',
+		scaleY       : 'slope',
+		color        : '#F00',
+		strokeColor  : '#000',
+		strokeOpacity: "0.5",
+		fillOpacity  : "0.25",
+		visbile      : this.options.slope != "summary"
 	});
 
 	this._registerTooltip({
 		name: 'slope',
 		chart: (item) => L._("m: ") + item.slope + slope.label,
-		marker: (item) => Math.round(item.slope) + slope.label
+		marker: (item) => Math.round(item.slope) + slope.label,
+		order: 40,
 	});
 
 	this._registerSummary({
 		"ascent"  : {
 			label: "Total Ascent: ",
-			value: (track) => Math.round(track.ascent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm')
+			value: (track) => Math.round(track.ascent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm'),
+			order: 40
 		},
 		"descent"  : {
 			label: "Total Descent: ",
-			value: (track) => Math.round(track.descent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm')
+			value: (track) => Math.round(track.descent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm'),
+			order: 40
 		},
 		"minslope": {
 			label: "Min Slope: ",
-			value: (track) => Math.round(track.slope_min || 0) + '&nbsp;' + slope.label
+			value: (track) => Math.round(track.slope_min || 0) + '&nbsp;' + slope.label,
+			order: 40
 		},
 		"maxslope": {
 			label: "Max Slope: ",
-			value: (track) => Math.round(track.slope_max || 0) + '&nbsp;' + slope.label
+			value: (track) => Math.round(track.slope_max || 0) + '&nbsp;' + slope.label,
+			order: 40
+		},
+		"avgslope": {
+			label: "Avg Slope: ",
+			value: (track) => Math.round(track.slope_avg || 0) + '&nbsp;' + slope.label,
+			order: 40
 		}
 	});