@raruto/leaflet-elevation 1.9.2 → 1.9.5

package/dist/leaflet-elevation.js

@@ -394,6 +394,7 @@
           _ref4$length = _ref4.length,
           length = _ref4$length === void 0 ? 0 : _ref4$length;
       return function (g) {
+        g.attr("class", "height-focus-group");
         var line = g.select('.height-focus.line');
         var circle = g.select('.height-focus.circle-lower');
         var text = g.select('.height-focus-label');
@@ -405,8 +406,10 @@
         line.attr("class", theme + " height-focus line").attr("x1", xCoord).attr("x2", xCoord).attr("y1", yCoord).attr("y2", length);
         text.attr("class", theme + " height-focus-label").style("pointer-events", "none").attr("x", xCoord + 5).attr("y", length);
         var label;
-
-        for (var i in labels) {
+        Object.keys(labels).sort(function (a, b) {
+          return labels[a].order - labels[b].order;
+        }) // TODO: any performance issues?
+        .forEach(function (i) {
           label = text.select(".height-focus-" + labels[i].name);
 
           if (!label.size()) {
@@ -414,8 +417,7 @@
           }
 
           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);
         return g;
@@ -486,8 +488,10 @@
         rect.attr("class", "mouse-focus-label-rect").attr("x", xAlign - 5).attr("y", yAlign - 5).attr("width", bbox.width + 10).attr("height", bbox.height + 10).attr("rx", 3).attr("ry", 3);
         text.attr("class", "mouse-focus-label-text").style("font-weight", "700").attr("y", yAlign);
         var label;
-
-        for (var i in labels) {
+        Object.keys(labels).sort(function (a, b) {
+          return labels[a].order - labels[b].order;
+        }) // TODO: any performance issues?
+        .forEach(function (i) {
           label = text.select(".mouse-focus-label-" + labels[i].name);
 
           if (!label.size()) {
@@ -495,8 +499,7 @@
           }
 
           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);
         return g;
@@ -1172,6 +1175,7 @@
         this._y = this._scales.altitude;
       },
       _registerAreaPath: function _registerAreaPath(props) {
+        if (props.scale == 'y') props.scale = this._y;else if (props.scale == 'x') props.scale = this._x;
         var opts = this.options;
         if (!props.xAttr) props.xAttr = opts.xAttr;
         if (!props.yAttr) props.yAttr = opts.yAttr;
@@ -1191,9 +1195,11 @@
         }
       },
       _registerAxisGrid: function _registerAxisGrid(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 _registerAxisScale(props) {
+        if (props.scale == 'y') props.scale = this._y;else if (props.scale == 'x') props.scale = this._x;
         var opts = this.options;
         var scale = props.scale;
 
@@ -1247,6 +1253,9 @@
         }));
       },
       _registerTooltip: function _registerTooltip(props) {
+        var _props$order;
+
+        props.order = (_props$order = props.order) !== null && _props$order !== void 0 ? _props$order : 100;
         this._props.tooltipItems[props.name] = props;
       },
       _updateArea: function _updateArea() {
@@ -1557,7 +1566,6 @@
         switch (this.options.marker) {
           case 'elevation-line':
             // this._container = d3.create("g").attr("class", "height-focus-group");
-            this._container = d3.select(map.getPane('elevationPane')).select("svg > g").attr("class", "height-focus-group");
             break;
 
           case 'position-marker':
@@ -1578,8 +1586,7 @@
 
         switch (this.options.marker) {
           case 'elevation-line':
-            this._container.call(PositionMarker({}));
-
+            this._container = d3.select(map.getPane('elevationPane')).select("svg > g").call(PositionMarker({}));
             break;
 
           case 'position-marker':
@@ -1605,21 +1612,23 @@
 
         switch (this.options.marker) {
           case 'elevation-line':
-            var point = this._map.latLngToLayerPoint(this._latlng);
+            if (this._container) {
+              var point = this._map.latLngToLayerPoint(this._latlng);
 
-            point = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
+              point = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
 
-            this._container.classed("leaflet-hidden", false);
+              this._container.classed("leaflet-hidden", false);
 
-            this._container.call(PositionMarker({
-              theme: this.options.theme,
-              xCoord: point.x,
-              yCoord: point.y,
-              length: point.y - this._height() / props.maxElevation * point.z,
-              // normalized Y
-              labels: this._labels,
-              item: point
-            }));
+              this._container.call(PositionMarker({
+                theme: this.options.theme,
+                xCoord: point.x,
+                yCoord: point.y,
+                length: point.y - this._height() / props.maxElevation * point.z,
+                // normalized Y
+                labels: this._labels,
+                item: point
+              }));
+            }
 
             break;
 
@@ -1669,6 +1678,7 @@
       initialize: function initialize(opts, control) {
         this.options = opts;
         this.control = control;
+        this.labels = {};
 
         var summary = this._container = create("div", "elevation-summary " + (opts.summary ? opts.summary + "-summary" : ''));
 
@@ -1690,9 +1700,22 @@
         this._container.innerHTML += "<span class=\"".concat(className, "\"><span class=\"summarylabel\">").concat(label, "</span><span class=\"summaryvalue\">").concat(value, "</span></span>");
         return this;
       },
+      update: function update() {
+        var _this2 = this;
+
+        Object.keys(this.labels).sort(function (a, b) {
+          return _this2.labels[a].order - _this2.labels[b].order;
+        }) // TODO: any performance issues?
+        .forEach(function (i) {
+          _this2.append(i, L._(_this2.labels[i].label), typeof _this2.labels[i].value !== "function" ? _this2.labels[i].value : _this2.labels[i].value(_this2.control.track_info));
+        });
+      },
       _registerSummary: function _registerSummary(data) {
         for (var i in data) {
-          this.append(i, L._(data[i].label), typeof data[i].value !== "function" ? data[i].value : data[i].value(this.control.track_info));
+          var _data$i$order;
+
+          data[i].order = (_data$i$order = data[i].order) !== null && _data$i$order !== void 0 ? _data$i$order : 100;
+          this.labels[i] = data[i];
         }
       }
     });
@@ -1706,7 +1729,11 @@
       collapsed: false,
       detached: true,
       distance: true,
-      distanceMarkers: false,
+      distanceMarkers: {
+        lazy: true,
+        distance: true,
+        direction: true
+      },
       decimalsX: 2,
       decimalsY: 0,
       dragging: !L.Browser.mobile,
@@ -1752,15 +1779,15 @@
       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: {
@@ -1793,7 +1820,7 @@
       __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.2/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
@@ -1884,6 +1911,22 @@
         }
       },
 
+      /**
+       * 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.
        */
@@ -1931,7 +1974,7 @@
       },
 
       /**
-       * Get default zoom level when "followMarker" is true.
+       * Get default zoom level (followMarker: true).
        */
       getZFollow: function getZFollow() {
         return this.options.zFollow;
@@ -1953,14 +1996,13 @@
         this._markers = L.featureGroup();
         this._markedSegments = L.polyline([]);
         this._chartEnabled = true, this.track_info = {};
+        this.handlers = [];
         L.setOptions(this, options);
         if (this.options.followMarker) this._setMapView = L.Util.throttle(this._setMapView, 300, this);
         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); // Leaflet canvas renderer colors
 
@@ -2014,7 +2056,7 @@
       },
 
       /**
-       * Load elevation data (GPX, GeoJSON or KML).
+       * Load elevation data (GPX, GeoJSON, KML or TCX).
        */
       load: function load(data) {
         var _this3 = this;
@@ -2088,7 +2130,7 @@
       },
 
       /**
-       * Set default zoom level when "followMarker" is true.
+       * Set default zoom level (followMarker: true).
        */
       setZFollow: function setZFollow(zoom) {
         this.options.zFollow = zoom;
@@ -2167,26 +2209,24 @@
             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"
+          }; // "coordinateProperties" property is generated inside "@tmcw/toGeoJSON"
 
           var 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
-          }
+          _this6.fire("elepoint_init", {
+            point: point,
+            props: props,
+            id: i
+          });
 
           _this6._addPoint((_point$lat = point.lat) !== null && _point$lat !== void 0 ? _point$lat : point[1], (_point$lng = point.lng) !== null && _point$lng !== void 0 ? _point$lng : point[0], (_ref = (_point$alt = point.alt) !== null && _point$alt !== void 0 ? _point$alt : point.meta.ele) !== null && _ref !== void 0 ? _ref : point[2]);
 
-          _this6._fireEvt("elepoint_added", {
+          _this6.fire("elepoint_added", {
             point: point,
             index: _this6._data.length - 1
           });
         });
-
-        this._fireEvt("eletrack_added", {
+        this.fire("eletrack_added", {
           coords: coords,
           index: this._data.length - 1
         });
@@ -2209,7 +2249,7 @@
           latlng: L.latLng(x, y, z)
         });
 
-        this._fireEvt("eledata_updated", {
+        this.fire("eledata_updated", {
           index: this._data.length - 1
         });
       },
@@ -2418,7 +2458,7 @@
       },
 
       /**
-       * Generate "svg" chart DOM element.
+       * Generate "svg" chart (DOM element).
        */
       _initChart: function _initChart(container) {
         var opts = this.options;
@@ -2444,13 +2484,10 @@
         this._x = this._chart._x;
         this._y = this._chart._y;
         d3.select(container).call(chart.render());
-        chart.on('reset_drag', this._hideMarker, this).on('mouse_enter', this._fireEvt.bind('elechart_enter'), this).on('dragged', this._dragendHandler, this).on('mouse_move', this._mousemoveHandler, this).on('mouse_out', this._mouseoutHandler, this).on('ruler_filter', this._rulerFilterHandler, this).on('zoom', this._updateChart, this).on('elepath_toggle', this._toggleChartHandler, this).on('margins_updated', this._resizeChart, this);
-
-        this._fireEvt("elechart_axis");
-
-        if (this.options.legend) this._fireEvt("elechart_legend");
-
-        this._fireEvt("elechart_init");
+        chart.on('reset_drag', this._hideMarker, this).on('mouse_enter', this._mouseenterHandler, this).on('dragged', this._dragendHandler, this).on('mouse_move', this._mousemoveHandler, this).on('mouse_out', this._mouseoutHandler, this).on('ruler_filter', this._rulerFilterHandler, this).on('zoom', this._updateChart, this).on('elepath_toggle', this._toggleChartHandler, this).on('margins_updated', this._resizeChart, this);
+        this.fire("elechart_axis");
+        if (this.options.legend) this.fire("elechart_legend");
+        this.fire("elechart_init");
       },
       _initLayer: function _initLayer() {
         var _this10 = this;
@@ -2482,8 +2519,7 @@
         }).addTo(this._map); // default leaflet svg renderer
 
         this._marker = new Marker(this.options);
-
-        this._fireEvt("elechart_marker");
+        this.fire("elechart_marker");
       },
 
       /**
@@ -2647,8 +2683,14 @@
         this._hideMarker();
 
         this.fitBounds(L.latLngBounds([e.dragstart.latlng, e.dragend.latlng]));
+        this.fire("elechart_dragged");
+      },
 
-        this._fireEvt("elechart_dragged");
+      /**
+       * Trigger mouseenter event
+       */
+      _mouseenterHandler: function _mouseenterHandler(e) {
+        this.fire('elechart_enter');
       },
 
       /*
@@ -2673,12 +2715,11 @@
             addClass(this._map.getContainer(), 'elechart-hover');
           }
 
-          this._fireEvt("elechart_change", {
+          this.fire("elechart_change", {
             data: item,
             xCoord: xCoord
           });
-
-          this._fireEvt("elechart_hover", {
+          this.fire("elechart_hover", {
             data: item,
             xCoord: xCoord
           });
@@ -2701,7 +2742,7 @@
 
           this._updateMarker(item);
 
-          this._fireEvt("elechart_change", {
+          this.fire("elechart_change", {
             data: item,
             xCoord: xCoord
           });
@@ -2722,7 +2763,7 @@
           removeClass(this._map.getContainer(), 'elechart-hover');
         }
 
-        this._fireEvt("elechart_leave");
+        this.fire("elechart_leave");
       },
 
       /**
@@ -2828,46 +2869,97 @@
       },
 
       /**
-       * Add a point of interest over the diagram
+       * Add chart profile to diagram
        */
-      _registerCheckPoint: function _registerCheckPoint(props) {
+      _registerAreaPath: function _registerAreaPath(props) {
         var _this13 = this;
 
-        this.on("elechart_updated", function () {
-          return _this13._chart._registerCheckPoint(props);
+        this.on("elechart_init", function () {
+          return _this13._chart._registerAreaPath(props);
         });
       },
 
       /**
-       * Add chart profile to diagram
+       * Add chart grid to diagram
        */
-      _registerAreaPath: function _registerAreaPath(props) {
+      _registerAxisGrid: function _registerAxisGrid(props) {
         var _this14 = this;
 
-        this.on("elechart_init", function () {
-          return _this14._chart._registerAreaPath(props);
+        this.on("elechart_axis", function () {
+          return _this14._chart._registerAxisGrid(props);
         });
       },
 
       /**
-       * Add chart grid to diagram
+       * Add chart axis to diagram
        */
-      _registerAxisGrid: function _registerAxisGrid(props) {
+      _registerAxisScale: function _registerAxisScale(props) {
         var _this15 = this;
 
         this.on("elechart_axis", function () {
-          return _this15._chart._registerAxisGrid(props);
+          return _this15._chart._registerAxisScale(props);
         });
       },
 
       /**
-       * Add chart axis to diagram
+       * Add a point of interest over the diagram
        */
-      _registerAxisScale: function _registerAxisScale(props) {
+      _registerCheckPoint: function _registerCheckPoint(props) {
         var _this16 = this;
 
-        this.on("elechart_axis", function () {
-          return _this16._chart._registerAxisScale(props);
+        this.on("elechart_updated", function () {
+          return _this16._chart._registerCheckPoint(props);
+        });
+      },
+
+      /**
+       * Base handler for iterative track statistics (dist, time, z, slope, speed, acceleration, ...)
+       */
+      _registerDataAttribute: function _registerDataAttribute(props) {
+        var _this17 = this;
+
+        // save here a reference to last used point
+        var lastValid = null; // parse of "coordinateProperties" for later usage
+
+        if (props.init) {
+          this.on("elepoint_init", function (e) {
+            return props.init.call(_this17, e);
+          });
+        } // iteration
+
+
+        this.on("elepoint_added", function (e) {
+          // check and fix missing data on last added point
+          if (props.skipNull === false) {
+            var curr = _this17._data[e.index][props.name];
+
+            if (e.index > 0) {
+              var prev = _this17._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 _this17._data.splice(e.index - 1, 1);
+                _this17._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
+
+
+          _this17._data[e.index][props.name] = props.fetch.call(_this17, e.index, e.point); // update here some mixins (eg. "track_info", value validators, ...)
+
+          if (props.update) _this17._data[e.index][props.name] = props.update.call(_this17, _this17._data[e.index][props.name], e.index, e.point);
         });
       },
 
@@ -2875,14 +2967,14 @@
        * Add chart or marker tooltip info
        */
       _registerTooltip: function _registerTooltip(props) {
-        var _this17 = this;
+        var _this18 = this;
 
         if (props.chart) {
           var label = L.extend({}, props, {
             value: props.chart
           });
           this.on("elechart_init", function () {
-            return _this17._chart._registerTooltip(label);
+            return _this18._chart._registerTooltip(label);
           });
         }
 
@@ -2892,7 +2984,7 @@
           });
 
           this.on("elechart_marker", function () {
-            return _this17._marker._registerTooltip(_label);
+            return _this18._marker._registerTooltip(_label);
           });
         }
       },
@@ -2901,10 +2993,10 @@
        * Add summary info to diagram
        */
       _registerSummary: function _registerSummary(props) {
-        var _this18 = this;
+        var _this19 = this;
 
         this.on('elechart_summary', function () {
-          return _this18._summary._registerSummary(props);
+          return _this19._summary._registerSummary(props);
         });
       },
 
@@ -2976,14 +3068,14 @@
       },
 
       /**
-       * Collapse or Expand current chart control.
+       * Collapse or Expand chart control.
        */
       _toggle: function _toggle() {
         if (hasClass(this._container, "elevation-expanded")) this._collapse();else this._expand();
       },
 
       /**
-       * Sets the view of the map (center and zoom). Useful when "followMarker" is true.
+       * Update map center and zoom (followMarker: true)
        */
       _setMapView: function _setMapView(item) {
         if (!this.options.followMarker || !this._map) return;
@@ -3009,14 +3101,14 @@
        * Toggle chart data on legend click
        */
       _toggleChartHandler: function _toggleChartHandler(e) {
-        var _this19 = this;
+        var _this20 = this;
 
         var name = e.name,
             enabled = e.enabled;
         this._chartEnabled = this._chart._hasActiveLayers(); // toggle layer visibility on empty chart
 
         this._layers.eachLayer(function (layer) {
-          return toggleClass(layer.getElement && layer.getElement(), _this19.options.polyline.className + ' ' + _this19.options.theme, _this19._chartEnabled);
+          return toggleClass(layer.getElement && layer.getElement(), _this20.options.polyline.className + ' ' + _this20.options.theme, _this20._chartEnabled);
         }); // toggle option value (eg. altitude = { 'disabled' || 'disabled' })
 
 
@@ -3036,10 +3128,8 @@
         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,
@@ -3048,8 +3138,7 @@
 
         this._x = this._chart._x;
         this._y = this._chart._y;
-
-        this._fireEvt('elechart_updated');
+        this.fire('elechart_updated');
       },
 
       /*
@@ -3090,12 +3179,14 @@
        * Update chart summary.
        */
       _updateSummary: function _updateSummary() {
-        var _this20 = this;
+        var _this21 = this;
 
         this._summary.reset();
 
         if (this.options.summary) {
-          this._fireEvt("elechart_summary");
+          this.fire("elechart_summary");
+
+          this._summary.update();
         }
 
         if (this.options.downloadLink && this._downloadURL) {
@@ -3105,19 +3196,19 @@
           select('.download a', this._summary._container).onclick = function (e) {
             e.preventDefault();
             var event = {
-              downloadLink: _this20.options.downloadLink,
-              confirm: saveFile.bind(_this20, _this20._downloadURL)
+              downloadLink: _this21.options.downloadLink,
+              confirm: saveFile.bind(_this21, _this21._downloadURL)
             };
 
-            if (_this20.options.downloadLink == 'modal' && typeof CustomEvent === "function") {
+            if (_this21.options.downloadLink == 'modal' && typeof CustomEvent === "function") {
               document.dispatchEvent(new CustomEvent("eletrack_download", {
                 detail: event
               }));
-            } else if (_this20.options.downloadLink == 'link' || _this20.options.downloadLink === true) {
+            } else if (_this21.options.downloadLink == 'link' || _this21.options.downloadLink === true) {
               event.confirm();
             }
 
-            _this20._fireEvt('eletrack_download', event);
+            _this21.fire('eletrack_download', event);
           };
         }
       },
@@ -3149,119 +3240,8 @@
     });
 
     Elevation.addInitHook(function () {
-      var opts = this.options;
-      var altitude = {};
-
-      if (opts.imperial) {
-        opts.altitudeFactor = this.__footFactor;
-        altitude.label = "ft";
-      } else {
-        opts.altitudeFactor = opts.heightFactor || opts.altitudeFactor || 1;
-        altitude.label = opts.yLabel;
-      }
-
-      this.on("eledata_updated", function (e) {
-        var data = this._data;
-        var i = e.index;
-        var z = data[i].z * opts.altitudeFactor;
-        var track = this.track_info;
-        var zMax = track.elevation_max || -Infinity;
-        var zMin = track.elevation_min || +Infinity; // check and fix missing elevation data on last added point
-
-        if (!this.options.skipNullZCoords && i > 0) {
-          var prevZ = data[i - 1].z;
-
-          if (isNaN(prevZ)) {
-            var lastZ = this._lastValidZ;
-            var currZ = z;
-
-            if (!isNaN(lastZ) && !isNaN(currZ)) {
-              prevZ = (lastZ + currZ) / 2;
-            } else if (!isNaN(lastZ)) {
-              prevZ = lastZ;
-            } else if (!isNaN(currZ)) {
-              prevZ = currZ;
-            }
-
-            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;
-        data[i].z = z;
-      });
-      this.on("elechart_axis", function () {
-        this._chart._registerAxisGrid({
-          axis: "y",
-          position: "left",
-          scale: this._chart._y
-        });
-      });
-
-      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 () {
-          var theme = this.options.theme.replace('-theme', '');
-          var color = 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._registerTooltip({
-        name: 'y',
-        chart: function chart(item) {
-          return L._("y: ") + d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + altitude.label;
-        },
-        marker: function marker(item) {
-          return d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + altitude.label;
-        }
-      });
-
-      this._registerSummary({
-        "maxele": {
-          label: "Max Elevation: ",
-          value: function value(track) {
-            return (track.elevation_max || 0).toFixed(2) + '&nbsp;' + altitude.label;
-          }
-        },
-        "minele": {
-          label: "Min Elevation: ",
-          value: function value(track) {
-            return (track.elevation_min || 0).toFixed(2) + '&nbsp;' + altitude.label;
-          }
-        }
-      });
-    });
+      var _this = this;
 
-    Elevation.addInitHook(function () {
       var opts = this.options;
       var distance = {};
 
@@ -3273,50 +3253,49 @@
         distance.label = opts.xLabel;
       }
 
-      this.on("eledata_updated", function (e) {
-        var data = this._data;
-        var i = e.index;
-        var track = this.track_info;
-        var dist = track.distance || 0;
-        var curr = data[i].latlng;
-        var prev = i > 0 ? data[i - 1].latlng : curr;
-        var 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: function init() {// this.track_info.distance = 0;
+        },
+        fetch: function fetch(i) {
+          var 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: function 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 () {
-          var _this = this;
-
-          this._chart._registerAxisScale({
-            axis: "x",
-            position: "bottom",
-            scale: this._chart._x,
-            label: distance.label,
-            labelY: 25,
-            labelX: function labelX() {
-              return _this._width() + 6;
-            },
-            name: "distance"
-          });
+        this._registerAxisScale({
+          axis: "x",
+          position: "bottom",
+          scale: "x",
+          // this._chart._x,
+          label: distance.label,
+          labelY: 25,
+          labelX: function labelX() {
+            return _this._width() + 6;
+          },
+          name: "distance"
         });
       }
 
+      this._registerAxisGrid({
+        axis: "x",
+        position: "bottom",
+        scale: "x" // this._chart._x,
+
+      });
+
       this._registerTooltip({
         name: 'x',
         chart: function chart(item) {
           return L._("x: ") + d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + distance.label;
-        }
+        },
+        order: 20
       });
 
       this._registerSummary({
@@ -3324,7 +3303,8 @@
           label: "Total Length: ",
           value: function value(track) {
             return (track.distance || 0).toFixed(2) + '&nbsp;' + distance.label;
-          }
+          },
+          order: 10
         }
       });
     });
@@ -3340,7 +3320,7 @@
        * Common AVG speeds:
        * ----------------------
        *  slow walk = 1.8  km/h
-       *  walking   = 3.6  km/h
+       *  walking   = 3.6  km/h <-- default: 3.6
        *  running   = 10.8 km/h
        *  cycling   = 18   km/h
        *  driving   = 72   km/h
@@ -3367,6 +3347,49 @@
         return formatTime(t).split("'")[0];
       };
 
+      this._registerDataAttribute({
+        name: 'time',
+        init: function init(_ref) {
+          var point = _ref.point,
+              props = _ref.props,
+              id = _ref.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 fetch(i, point) {
+          // Add missing timestamps (see: options.timeAVGSpeed)
+          if (!point.meta || !point.meta.time) {
+            point.meta = point.meta || {};
+
+            if (i > 0) {
+              var dx = this._data[i].dist - this._data[i - 1].dist;
+
+              var t0 = this._data[i - 1].time.getTime();
+
+              var dt = dx / this._timeAVGSpeed * this.options.timeFactor * 1000;
+              point.meta.time = new Date(t0 + dt);
+            } 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();
+        },
+        update: function update(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({
           axis: "x",
@@ -3392,38 +3415,13 @@
         });
       }
 
-      this.on('elepoint_added', function (e) {
-        var data = this._data;
-        var i = e.index; // Add missing timestamps (see: options.timeAVGSpeed)
-
-        if (!e.point.meta || !e.point.meta.time) {
-          e.point.meta = e.point.meta || {};
-          var delta = data[i].dist - data[i > 0 ? i - 1 : i].dist;
-          var speed = this._timeAVGSpeed;
-          e.point.meta.time = new Date(i > 0 ? data[i - 1].time.getTime() + delta / speed * opts.timeFactor * 1000 : Date.now());
-        }
-
-        var time = e.point.meta.time; // Handle timezone offset
-
-        if (time.getTime() - time.getTimezoneOffset() * 60 * 1000 === 0) {
-          time = 0;
-        }
-
-        var currT = time;
-        var prevT = i > 0 ? data[i - 1].time : currT;
-        var deltaT = Math.abs(currT - prevT);
-        var duration = (this.track_info.time || 0) + deltaT;
-        this.track_info.time = duration;
-        data[i].time = time;
-        data[i].duration = duration;
-      });
-
       if (this.options.timestamps) {
         this._registerTooltip({
           name: 'date',
           chart: function chart(item) {
             return L._("t: ") + _this.options.timeFormat(item.time);
-          }
+          },
+          order: 20
         });
       }
 
@@ -3432,7 +3430,8 @@
           name: 'time',
           chart: function chart(item) {
             return L._("T: ") + formatTime(item.duration || 0);
-          }
+          },
+          order: 20
         });
 
         this._registerSummary({
@@ -3440,7 +3439,8 @@
             label: "Total Time: ",
             value: function value(track) {
               return formatTime(track.time || 0);
-            }
+            },
+            order: 20
           }
         });
       }
@@ -3449,80 +3449,208 @@
     Elevation.addInitHook(function () {
       var _this = this;
 
-      if (!this.options.slope) return;
       var opts = this.options;
-      var slope = {};
-      slope.label = opts.slopeLabel || '%';
+      var altitude = {};
+      var theme = opts.theme.replace('-theme', '');
+      var color = Colors[theme] || {};
 
-      if (this.options.slope != "summary") {
-        this._registerAxisScale({
-          axis: "y",
-          position: "right",
-          scale: {
-            min: -1,
-            max: +1
+      if (opts.imperial) {
+        opts.altitudeFactor = this.__footFactor;
+        altitude.label = "ft";
+      } else {
+        opts.altitudeFactor = opts.heightFactor || opts.altitudeFactor || 1;
+        altitude.label = opts.yLabel;
+      }
+
+      this._registerDataAttribute({
+        name: 'z',
+        skipNull: this.options.skipNullZCoords,
+        init: function init(_ref) {
+          var point = _ref.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: function fetch(i) {
+          return _this._data[i].z * opts.altitudeFactor;
+        },
+        update: function 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;
+          var data = _this._data;
+          var track = _this.track_info; // Try to smooth "crazy" elevation values.
+
+          if (_this.options.altitudeDeltaMax) {
+            var delta = z - data[i > 0 ? i - 1 : i].z;
+            var deltaMax = _this.options.altitudeDeltaMax;
+
+            if (Math.abs(delta) > deltaMax) {
+              z = data[i - 1].z + deltaMax * Math.sign(delta);
+            }
+          } // Range of acceptable elevation values.
+
+
+          z = clamp(z, _this.options.altitudeRange);
+          if (z > track.elevation_max) track.elevation_max = z;
+          if (z < track.elevation_min) track.elevation_min = z;
+          track.elevation_avg = (z + track.elevation_avg) / 2.0;
+          return z;
+        }
+      });
+
+      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: function chart(item) {
+          return L._("y: ") + d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + altitude.label;
+        },
+        marker: function marker(item) {
+          return d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + altitude.label;
+        },
+        order: 10
+      });
+
+      this._registerSummary({
+        "maxele": {
+          label: "Max Elevation: ",
+          value: function value(track) {
+            return (track.elevation_max || 0).toFixed(2) + '&nbsp;' + altitude.label;
           },
-          tickPadding: 16,
-          label: slope.label,
-          labelX: 25,
-          labelY: -8,
-          name: 'slope'
-        });
+          order: 30
+        },
+        "minele": {
+          label: "Min Elevation: ",
+          value: function value(track) {
+            return (track.elevation_min || 0).toFixed(2) + '&nbsp;' + altitude.label;
+          },
+          order: 30
+        },
+        "avgele": {
+          label: "Avg Elevation: ",
+          value: function value(track) {
+            return (track.elevation_avg || 0).toFixed(2) + '&nbsp;' + altitude.label;
+          },
+          order: 30
+        }
+      });
+    });
 
-        this._registerAreaPath({
-          name: 'slope',
-          label: 'Slope',
-          yAttr: 'slope',
-          scaleX: 'distance',
-          scaleY: 'slope',
-          color: '#F00',
-          strokeColor: '#000',
-          strokeOpacity: "0.5",
-          fillOpacity: "0.25"
-        });
-      }
+    Elevation.addInitHook(function () {
+      var _this = this;
 
-      this.on("eledata_updated", function (e) {
-        var data = this._data;
-        var i = e.index;
-        var z = data[i].z;
-        var delta = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000; // Slope / Gain
+      if (!this.options.slope) return;
+      var opts = this.options;
+      var slope = {};
+      slope.label = opts.slopeLabel || '%';
 
-        var track = this.track_info;
-        var tAsc = track.ascent || 0; // Total Ascent
+      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: function fetch(i) {
+          var data = _this._data;
+          var dx = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
+          var 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: function update(slope, i) {
+          _this.track_info.ascent = _this.track_info.ascent || 0; // Total Ascent
 
-        var tDes = track.descent || 0; // Total Descent
+          _this.track_info.descent = _this.track_info.descent || 0; // Total Descent
 
-        var sMax = track.slope_max || 0; // Slope Max
+          _this.track_info.slope_max = _this.track_info.slope_max || -Infinity; // Slope Max
 
-        var sMin = track.slope_min || 0; // Slope Min
+          _this.track_info.slope_min = _this.track_info.slope_min || +Infinity; // Slope Min
 
-        var slope = 0;
+          _this.track_info.slope_avg = _this.track_info.slope_avg || 0; // Acceleration Avg
 
-        if (!isNaN(z)) {
-          var 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
+          var track = _this.track_info;
+          var data = _this._data;
+          var dz = data[i].z - data[i > 0 ? i - 1 : i].z; // Try to smooth "crazy" acceleration values.
 
-          if (delta !== 0) slope = deltaZ / delta * 100;
-        } // Try to smooth "crazy" slope values.
+          if (_this.options.slopeDeltaMax) {
+            var delta = slop - data[i > 0 ? i - 1 : i].slope;
+            var deltaMax = _this.options.slopeDeltaMax;
 
+            if (Math.abs(delta) > deltaMax) {
+              slope = data[i - 1].slope + deltaMax * Math.sign(delta);
+            }
+          } // Range of acceptable slope values.
 
-        if (this.options.sDeltaMax) {
-          var deltaS = i > 0 ? slope - data[i - 1].slope : 0;
-          var maxDeltaS = this.options.sDeltaMax;
 
-          if (Math.abs(deltaS) > maxDeltaS) {
-            slope = data[i - 1].slope + maxDeltaS * Math.sign(deltaS);
-          }
-        } // 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.slope_avg = (slope + track.slope_avg) / 2.0;
+          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"
+      });
 
-        slope = clamp(slope, this.options.sRange);
-        track.ascent = tAsc;
-        track.descent = tDes;
-        track.slope_max = slope > sMax ? slope : sMax;
-        track.slope_min = slope < sMin ? slope : sMin;
-        data[i].slope = L.Util.formatNum(slope, 2);
+      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({
@@ -3532,7 +3660,8 @@
         },
         marker: function marker(item) {
           return Math.round(item.slope) + slope.label;
-        }
+        },
+        order: 40
       });
 
       this._registerSummary({
@@ -3540,36 +3669,89 @@
           label: "Total Ascent: ",
           value: function value(track) {
             return Math.round(track.ascent || 0) + '&nbsp;' + (_this.options.imperial ? 'ft' : 'm');
-          }
+          },
+          order: 40
         },
         "descent": {
           label: "Total Descent: ",
           value: function value(track) {
             return Math.round(track.descent || 0) + '&nbsp;' + (_this.options.imperial ? 'ft' : 'm');
-          }
+          },
+          order: 40
         },
         "minslope": {
           label: "Min Slope: ",
           value: function value(track) {
             return Math.round(track.slope_min || 0) + '&nbsp;' + slope.label;
-          }
+          },
+          order: 40
         },
         "maxslope": {
           label: "Max Slope: ",
           value: function value(track) {
             return Math.round(track.slope_max || 0) + '&nbsp;' + slope.label;
-          }
+          },
+          order: 40
+        },
+        "avgslope": {
+          label: "Avg Slope: ",
+          value: function value(track) {
+            return Math.round(track.slope_avg || 0) + '&nbsp;' + slope.label;
+          },
+          order: 40
         }
       });
     });
 
     Elevation.addInitHook(function () {
+      var _this = this;
+
       if (!this.options.speed && !this.options.acceleration) return;
       var opts = this.options;
       var speed = {};
       speed.label = opts.speedLabel || L._(opts.imperial ? 'mph' : 'km/h');
       opts.speedFactor = opts.speedFactor || 1;
 
+      this._registerDataAttribute({
+        name: 'speed',
+        init: function init() {// this.track_info.speed_max = -Infinity; // Speed Max
+          // this.track_info.speed_min = +Infinity; // Speed Min
+          // this.track_info.speed_avg = 0;         // Speed Avg
+        },
+        fetch: function fetch(i) {
+          var data = _this._data;
+          var dx = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
+          var dt = data[i].time - data[i > 0 ? i - 1 : i].time;
+          return dt > 0 ? Math.abs(dx / dt * opts.timeFactor) * opts.speedFactor : 0;
+        },
+        update: function update(speed, i) {
+          _this.track_info.speed_max = _this.track_info.speed_max || -Infinity; // Speed Max
+
+          _this.track_info.speed_min = _this.track_info.speed_min || +Infinity; // Speed Min
+
+          _this.track_info.speed_avg = _this.track_info.speed_avg || 0; // Speed Avg
+
+          var data = _this._data;
+          var track = _this.track_info; // Try to smooth "crazy" speed values.
+
+          if (_this.options.speedDeltaMax) {
+            var delta = speed - data[i > 0 ? i - 1 : i].speed;
+            var deltaMax = _this.options.speedDeltaMax;
+
+            if (Math.abs(delta) > deltaMax) {
+              speed = data[i - 1].speed + deltaMax * Math.sign(delta);
+            }
+          } // Range of acceptable speed values.
+
+
+          speed = clamp(speed, _this.options.speedRange);
+          if (speed > track.speed_max) track.speed_max = speed;
+          if (speed < track.speed_min) track.speed_min = speed;
+          track.speed_avg = (speed + track.speed_avg) / 2.0;
+          return L.Util.formatNum(speed, 2);
+        }
+      });
+
       if (this.options.speed && this.options.speed != "summary") {
         this._registerAxisScale({
           axis: "y",
@@ -3598,44 +3780,6 @@
         });
       }
 
-      this.on('elepoint_added', function (e) {
-        var data = this._data;
-        var i = e.index;
-        var currT = data[i].time;
-        var prevT = i > 0 ? data[i - 1].time : currT;
-        var deltaT = currT - prevT;
-        var track = this.track_info;
-        var sMax = track.speed_max || -Infinity; // Speed Max
-
-        var sMin = track.speed_min || +Infinity; // Speed Min
-
-        var sAvg = track.speed_avg || 0; // Speed Avg
-
-        var speed = 0;
-
-        if (deltaT > 0) {
-          var delta = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
-          speed = Math.abs(delta / deltaT * opts.timeFactor) * opts.speedFactor;
-        } // Try to smooth "crazy" speed values.
-
-
-        if (this.options.speedDeltaMax) {
-          var deltaS = i > 0 ? speed - data[i - 1].speed : 0;
-          var maxDeltaS = this.options.speedDeltaMax;
-
-          if (Math.abs(deltaS) > maxDeltaS) {
-            speed = data[i - 1].speed + maxDeltaS * Math.sign(deltaS);
-          }
-        } // Range of acceptable speed values.
-
-
-        speed = clamp(speed, this.options.speedRange);
-        track.speed_max = speed > sMax ? speed : sMax;
-        track.speed_min = speed < sMin ? speed : sMin;
-        track.speed_avg = (speed + sAvg) / 2.0;
-        data[i].speed = L.Util.formatNum(speed, 2);
-      });
-
       if (this.options.speed) {
         this._registerTooltip({
           name: 'speed',
@@ -3644,7 +3788,8 @@
           },
           marker: function marker(item) {
             return Math.round(item.speed) + " " + speed.label;
-          }
+          },
+          order: 50
         });
 
         this._registerSummary({
@@ -3652,31 +3797,76 @@
             label: "Min Speed: ",
             value: function value(track) {
               return Math.round(track.speed_min || 0) + '&nbsp;' + speed.label;
-            }
+            },
+            order: 50
           },
           "maxspeed": {
             label: "Max Speed: ",
             value: function value(track) {
               return Math.round(track.speed_max || 0) + '&nbsp;' + speed.label;
-            }
+            },
+            order: 50
           },
           "avgspeed": {
             label: "Avg Speed: ",
             value: function value(track) {
               return Math.round(track.speed_avg || 0) + '&nbsp;' + speed.label;
-            }
+            },
+            order: 50
           }
         });
       }
     });
 
     Elevation.addInitHook(function () {
+      var _this = this;
+
       if (!this.options.acceleration) return;
       var opts = this.options;
       var acceleration = {};
       acceleration.label = opts.accelerationLabel || L._(opts.imperial ? 'ft/s²' : 'm/s²');
       opts.accelerationFactor = opts.accelerationFactor || 1;
 
+      this._registerDataAttribute({
+        name: 'acceleration',
+        init: function 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: function fetch(i) {
+          var data = _this._data;
+          var dv = (data[i].speed - data[i > 0 ? i - 1 : i].speed) * (1000 / opts.timeFactor);
+          var dt = (data[i].time - data[i > 0 ? i - 1 : i].time) / 1000;
+          return dt > 0 ? Math.abs(dv / dt) * opts.accelerationFactor : 0;
+        },
+        update: function 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
+
+          var data = _this._data;
+          var track = _this.track_info; // Try to smooth "crazy" acceleration values.
+
+          if (_this.options.accelerationDeltaMax) {
+            var delta = acceleration - data[i > 0 ? i - 1 : i].acceleration;
+            var 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({
           axis: "y",
@@ -3705,46 +3895,6 @@
         });
       }
 
-      this.on('elepoint_added', function (e) {
-        var data = this._data;
-        var i = e.index;
-        var currT = data[i].time;
-        var prevT = i > 0 ? data[i - 1].time : currT;
-        var deltaT = (currT - prevT) / 1000;
-        var track = this.track_info;
-        var sMax = track.acceleration_max || -Infinity; // Acceleration Max
-
-        var sMin = track.acceleration_min || +Infinity; // Acceleration Min
-
-        var sAvg = track.acceleration_avg || 0; // Acceleration Avg
-
-        var acceleration = 0;
-
-        if (deltaT > 0) {
-          var curr = data[i].speed;
-          var prev = i > 0 ? data[i - 1].speed : curr;
-          var delta = (curr - prev) * (1000 / opts.timeFactor);
-          acceleration = Math.abs(delta / deltaT) * opts.accelerationFactor;
-        } // Try to smooth "crazy" acceleration values.
-
-
-        if (this.options.accelerationDeltaMax) {
-          var deltaA = i > 0 ? acceleration - data[i - 1].acceleration : 0;
-          var 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: function chart(item) {
@@ -3752,7 +3902,8 @@
         },
         marker: function marker(item) {
           return Math.round(item.acceleration) + " " + acceleration.label;
-        }
+        },
+        order: 60
       });
 
       this._registerSummary({
@@ -3760,19 +3911,22 @@
           label: "Min Acceleration: ",
           value: function value(track) {
             return Math.round(track.acceleration_min || 0) + '&nbsp;' + acceleration.label;
-          }
+          },
+          order: 60
         },
         "maxacceleration": {
           label: "Max Acceleration: ",
           value: function value(track) {
             return Math.round(track.acceleration_max || 0) + '&nbsp;' + acceleration.label;
-          }
+          },
+          order: 60
         },
         "avgacceleration": {
           label: "Avg Acceleration: ",
           value: function value(track) {
             return Math.round(track.acceleration_avg || 0) + '&nbsp;' + acceleration.label;
-          }
+          },
+          order: 60
         }
       });
     });