@raruto/leaflet-elevation 1.7.5 → 1.7.6

package/README.md

@@ -158,6 +158,9 @@ _For a working example see one of the following demos:_
         // Toggle "leaflet-distance-markers" integration
         distanceMarkers: false,
 
+        // Display track datetimes: true || false
+        timestamps: false,
+
         // Display track waypoints: true || "markers" || "dots" || false
         waypoints: true,
 
@@ -171,11 +174,11 @@ _For a working example see one of the following demos:_
           }),
         },
 
-        // Display waypoint labels: true || "markers" || "dots" || false
+        // Toggle waypoint labels: true || "markers" || "dots" || false
         wptLabels: true,
 
         // Render chart profiles as Canvas or SVG Paths
-        preferCanvas: true
+        preferCanvas: true,
 
       };
 

package/dist/leaflet-elevation.js

@@ -690,12 +690,25 @@
           xCoord = _ref5$xCoord === void 0 ? 0 : _ref5$xCoord,
           _ref5$yCoord = _ref5.yCoord,
           yCoord = _ref5$yCoord === void 0 ? 0 : _ref5$yCoord,
-          label = _ref5.label;
+          _ref5$labels = _ref5.labels,
+          labels = _ref5$labels === void 0 ? {} : _ref5$labels,
+          _ref5$item = _ref5.item,
+          item = _ref5$item === void 0 ? {} : _ref5$item;
       return function (text) {
         text.attr("class", theme + " height-focus-label").style("pointer-events", "none").attr("x", xCoord + 5).attr("y", yCoord);
-        var y = text.select(".height-focus-y");
-        if (!y.node()) y = text.append("svg:tspan");
-        y.attr("class", "height-focus-y").text(label);
+        var label;
+
+        for (var i in labels) {
+          label = text.select(".height-focus-" + labels[i].name);
+
+          if (!label.size()) {
+            label = text.append("svg:tspan").attr("class", "height-focus-" + labels[i].name).attr("dy", "1.5em");
+          }
+
+          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 text;
       };
@@ -748,23 +761,17 @@
     var MouseFocusLabel = function MouseFocusLabel(_ref9) {
       var xCoord = _ref9.xCoord,
           yCoord = _ref9.yCoord,
-          _ref9$labelX = _ref9.labelX,
-          labelX = _ref9$labelX === void 0 ? "" : _ref9$labelX,
-          _ref9$labelY = _ref9.labelY,
-          labelY = _ref9$labelY === void 0 ? "" : _ref9$labelY,
-          width = _ref9.width;
+          width = _ref9.width,
+          _ref9$labels = _ref9.labels,
+          labels = _ref9$labels === void 0 ? {} : _ref9$labels,
+          _ref9$item = _ref9.item,
+          item = _ref9$item === void 0 ? {} : _ref9$item;
       return function (g) {
         g.attr('class', 'mouse-focus-label');
         var rect = g.select(".mouse-focus-label-rect");
         var text = g.select(".mouse-focus-label-text");
-        var y = text.select(".mouse-focus-label-y");
-        var x = text.select(".mouse-focus-label-x");
         if (!rect.node()) rect = g.append("svg:rect");
-        if (!text.node()) text = g.append("svg:text");
-        if (!y.node()) y = text.append("svg:tspan");
-        if (!x.node()) x = text.append("svg:tspan");
-        y.text(labelY);
-        x.text(labelX); // Sets focus-label-text position to the left / right of the mouse-focus-line
+        if (!text.node()) text = g.append("svg:text"); // Sets focus-label-text position to the left / right of the mouse-focus-line
 
         var xAlign = 0;
         var yAlign = 0;
@@ -783,8 +790,19 @@
         if (yCoord) yAlign = Math.max(yCoord - bbox.height, L.Browser.webkit ? 0 : -Infinity);
         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);
-        y.attr("class", "mouse-focus-label-y").attr("dy", "1em");
-        x.attr("class", "mouse-focus-label-x").attr("dy", "2em");
+        var label;
+
+        for (var i in labels) {
+          label = text.select(".mouse-focus-label-" + labels[i].name);
+
+          if (!label.size()) {
+            label = text.append("svg:tspan", ".mouse-focus-label-x").attr("class", "mouse-focus-label-" + labels[i].name).attr("dy", "1.5em");
+          }
+
+          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;
       };
@@ -938,8 +956,9 @@
         yCoord: 0,
         height: _height,
         width: _width,
-        labelX: "",
-        labelY: ""
+        labels: {} // labelX: "",
+        // labelY: "",
+
       })); // Add the brushing
 
       var brush = d3.brushX().on('start.cursor end.cursor brush.cursor', function () {
@@ -1807,28 +1826,9 @@
           yCoord: yCoordinate,
           height: this._height(),
           width: this._width(),
-          labelX: d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + this._xLabel,
-          labelY: d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + this._yLabel
-        })); // this._focuslabel.selectAll('tspan').data(Object.values(this._focuslabels));
-
-
-        var labels = this._props.focusLabels;
-
-        var tooltip = this._focuslabel.select('text');
-
-        var label;
-
-        for (var i in labels) {
-          label = tooltip.select(".mouse-focus-label-" + labels[i].name);
-
-          if (!label.size()) {
-            label = tooltip.append("svg:tspan", ".mouse-focus-label-x").attr("class", "mouse-focus-label-" + labels[i].name).attr("dy", "1.5em");
-          }
-
-          label.text(typeof labels[i].value !== "function" ? labels[i].value : labels[i].value(item));
-
-          this._focuslabel.select('.mouse-focus-label-x').attr("dy", "1.5em");
-        }
+          labels: this._props.focusLabels,
+          item: item
+        }));
       },
       _hideDiagramIndicator: function _hideDiagramIndicator() {
         this._focusG.attr("display", 'none');
@@ -1931,24 +1931,9 @@
             theme: opts.theme,
             xCoord: point.x,
             yCoord: normalizedY,
-            label: d3.format("." + opts.decimalsY + "f")(point[opts.yAttr]) + " " + this._yLabel
+            labels: this._focuslabels,
+            item: point
           }));
-
-          var labels = this._focuslabels;
-          var tooltip = this._focuslabel;
-          var label;
-
-          for (var i in labels) {
-            label = tooltip.select(".height-focus-" + labels[i].name);
-
-            if (!label.size()) {
-              label = tooltip.append("svg:tspan").attr("class", "height-focus-" + labels[i].name).attr("dy", "1.5em");
-            }
-
-            label.text(typeof labels[i].value !== "function" ? labels[i].value : labels[i].value(props.item));
-
-            this._focuslabel.select('.height-focus-y').attr("dy", "-1.5em");
-          }
         } else if (this.options.marker == 'position-marker') {
           removeClass(this._marker.getElement(), 'leaflet-hidden');
 
@@ -2084,6 +2069,7 @@
       time: false,
       timeFactor: 3600,
       timeFormat: false,
+      timestamps: false,
       sDeltaMax: undefined,
       sInterpolation: "curveStepAfter",
       sRange: undefined,
@@ -3037,7 +3023,8 @@
        * Hacky way for handling chart resize. Deletes it and redraw chart.
        */
       _resizeChart: function _resizeChart() {
-        // prevent displaying chart on resize if hidden
+        if (!this._container) return; // prevent displaying chart on resize if hidden
+
         if (style(this._container, "display") == "none") return;
         var opts = this.options;
 
@@ -3141,7 +3128,7 @@
       _updateChart: function _updateChart() {
         if (
         /*!this._data.length ||*/
-        !this._container) return;
+        !this._chart || !this._container) return;
 
         this._fireEvt("elechart_axis");
 
@@ -3339,7 +3326,7 @@
             if (options.stroke && options.weight !== 0) {
               var oldVal = ctx.globalCompositeOperation || 'source-over';
               ctx.globalCompositeOperation = 'destination-over';
-              ctx.strokeStyle = '#FFF';
+              ctx.strokeStyle = color.outline || '#FFF';
               ctx.lineWidth = options.weight * 1.75;
               ctx.stroke();
               ctx.globalCompositeOperation = oldVal;
@@ -3363,74 +3350,6 @@
       });
     });
 
-    Elevation.addInitHook(function () {
-      var _this2 = this;
-
-      var opts = this.options;
-      var distance = {};
-
-      if (this.options.imperial) {
-        this._distanceFactor = this.__mileFactor;
-        this._xLabel = "mi";
-      } else {
-        this._distanceFactor = opts.distanceFactor;
-        this._xLabel = 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) * this._distanceFactor;
-
-        dist += Math.round(delta / 1000 * 100000) / 100000; // handles floating points calc
-
-        data[i].dist = dist;
-        track.distance = dist;
-      });
-      this.on("elechart_axis", function () {
-        this._chart._registerAxisGrid({
-          axis: "x",
-          position: "bottom",
-          scale: this._chart._x
-        });
-      });
-
-      if (this.options.distance != "summary") {
-        this.on("elechart_axis", function () {
-          var _this = this;
-
-          distance.x = this._chart._x;
-          distance.label = this._chart._xLabel;
-
-          this._chart._registerAxisScale({
-            axis: "x",
-            position: "bottom",
-            scale: distance.x,
-            label: distance.label,
-            labelY: 25,
-            labelX: function labelX() {
-              return _this._width() + 6;
-            },
-            name: "distance"
-          });
-        });
-      }
-
-      this._registerSummary({
-        "totlen": {
-          label: "Total Length: ",
-          value: function value(track) {
-            return (track.distance || 0).toFixed(2) + ' ' + _this2._xLabel;
-          }
-        }
-      });
-    });
-
     Elevation.addInitHook(function () {
       var _this = this;
 
@@ -3527,6 +3446,16 @@
         });
       }
 
+      this._registerFocusLabel({
+        name: 'y',
+        chart: function chart(item) {
+          return L._("y: ") + d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + _this._yLabel;
+        },
+        marker: function marker(item) {
+          return d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + _this._yLabel;
+        }
+      });
+
       this._registerSummary({
         "maxele": {
           label: "Max Elevation: ",
@@ -3543,6 +3472,81 @@
       });
     });
 
+    Elevation.addInitHook(function () {
+      var _this2 = this;
+
+      var opts = this.options;
+      var distance = {};
+
+      if (this.options.imperial) {
+        this._distanceFactor = this.__mileFactor;
+        this._xLabel = "mi";
+      } else {
+        this._distanceFactor = opts.distanceFactor;
+        this._xLabel = 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) * this._distanceFactor;
+
+        dist += Math.round(delta / 1000 * 100000) / 100000; // handles floating points calc
+
+        data[i].dist = dist;
+        track.distance = dist;
+      });
+      this.on("elechart_axis", function () {
+        this._chart._registerAxisGrid({
+          axis: "x",
+          position: "bottom",
+          scale: this._chart._x
+        });
+      });
+
+      if (this.options.distance != "summary") {
+        this.on("elechart_axis", function () {
+          var _this = this;
+
+          distance.x = this._chart._x;
+          distance.label = this._chart._xLabel;
+
+          this._chart._registerAxisScale({
+            axis: "x",
+            position: "bottom",
+            scale: distance.x,
+            label: distance.label,
+            labelY: 25,
+            labelX: function labelX() {
+              return _this._width() + 6;
+            },
+            name: "distance"
+          });
+        });
+      }
+
+      this._registerFocusLabel({
+        name: 'x',
+        chart: function chart(item) {
+          return L._("x: ") + d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + _this2._xLabel;
+        }
+      });
+
+      this._registerSummary({
+        "totlen": {
+          label: "Total Length: ",
+          value: function value(track) {
+            return (track.distance || 0).toFixed(2) + ' ' + _this2._xLabel;
+          }
+        }
+      });
+    });
+
     Elevation.addInitHook(function () {
       var _this = this;
 
@@ -3632,11 +3636,20 @@
         this.track_info.time = duration;
       });
 
+      if (this.options.timestamps) {
+        this._registerFocusLabel({
+          name: 'date',
+          chart: function chart(item) {
+            return L._("t: ") + _this.options.timeFormat(item.time);
+          }
+        });
+      }
+
       if (this.options.time) {
         this._registerFocusLabel({
           name: 'time',
           chart: function chart(item) {
-            return _this.options.timeFormat(item.time);
+            return L._("T: ") + formatTime(item.duration || 0);
           }
         });
 
@@ -3740,7 +3753,7 @@
       this._registerFocusLabel({
         name: 'slope',
         chart: function chart(item) {
-          return item.slope + slope.label;
+          return L._("m: ") + item.slope + slope.label;
         },
         marker: function marker(item) {
           return Math.round(item.slope) + slope.label;
@@ -3860,7 +3873,7 @@
         this._registerFocusLabel({
           name: 'speed',
           chart: function chart(item) {
-            return item.speed + " " + speed.label;
+            return L._('v: ') + item.speed + " " + speed.label;
           },
           marker: function marker(item) {
             return Math.round(item.speed) + " " + speed.label;
@@ -3976,7 +3989,7 @@
       this._registerFocusLabel({
         name: 'acceleration',
         chart: function chart(item) {
-          return item.acceleration + " " + acceleration.label;
+          return L._("a: ") + item.acceleration + " " + acceleration.label;
         },
         marker: function marker(item) {
           return Math.round(item.acceleration) + " " + acceleration.label;
@@ -4043,6 +4056,19 @@
     Elevation.Utils = _;
     Elevation.Components = D3;
     Elevation.Chart = Chart$1;
+    /* Temporary fix for empty values evaluated as false (leaflet-i18n v0.3.1) */
+
+    (function () {
+      var proto = L.i18n.bind({});
+
+      L.i18n = L._ = function (string, data) {
+        if (L.locale && L.locales[L.locale] && L.locales[L.locale][string] == "") {
+          L.locales[L.locale][string] = "\u200B";
+        }
+
+        return proto.call(null, string, data);
+      };
+    })();
 
     L.control.elevation = function (options) {
       return new Elevation(options);