@raruto/leaflet-elevation 1.7.5 → 1.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "1.7.5",
+	"version": "1.7.6",
 	"description": "A Leaflet plugin that allows to add elevation profiles using d3js",
 	"main": "dist/leaflet-elevation.min.js",
 	"module": "src/index.js",

package/src/acceleration.js

@@ -96,7 +96,7 @@ Elevation.addInitHook(function() {
 
 	this._registerFocusLabel({
 		name  : 'acceleration',
-		chart : (item) => item.acceleration + " " + acceleration.label,
+		chart: (item) => L._("a: ") + item.acceleration + " " + acceleration.label,
 		marker: (item) => Math.round(item.acceleration) + " " + acceleration.label,
 	});
 

package/src/altitude.js

@@ -107,6 +107,12 @@ Elevation.addInitHook(function() {
 
 	}
 
+	this._registerFocusLabel({
+		name: 'y',
+		chart: (item) => L._("y: ") + d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + this._yLabel,
+		marker: (item) => d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + this._yLabel,
+	});
+
 	this._registerSummary({
 		"maxele"  : {
 			label: "Max Elevation: ",

package/src/chart.js

@@ -783,38 +783,17 @@ export var Chart = L.Class.extend({
 				height: this._height()
 			})
 		);
+
 		this._focuslabel.call(
 			D3.MouseFocusLabel({
 				xCoord: xCoordinate,
 				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
+				labels: this._props.focusLabels,
+				item: item
 			})
 		);
-
-		// this._focuslabel.selectAll('tspan').data(Object.values(this._focuslabels));
-
-		let labels = this._props.focusLabels;
-		let tooltip = this._focuslabel.select('text');
-		let 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");
-		}
-
 	},
 
 	_hideDiagramIndicator: function() {

package/src/components.js

@@ -124,7 +124,8 @@ export const HeightFocusLabel = ({
 	theme,
 	xCoord = 0,
 	yCoord = 0,
-	label,
+	labels = {},
+	item = {}
 }) => {
 	return text => {
 		text
@@ -133,13 +134,21 @@ export const HeightFocusLabel = ({
 			.attr("x", xCoord + 5)
 			.attr("y", yCoord);
 
-		let y = text.select(".height-focus-y");
-		if (!y.node()) y = text.append("svg:tspan");
+		let 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");
+			}
 
-		y
-			.attr("class", "height-focus-y")
-			.text(label);
+			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;
@@ -222,9 +231,9 @@ export const MouseFocusLine = ({
 export const MouseFocusLabel = ({
 	xCoord,
 	yCoord,
-	labelX = "",
-	labelY = "",
 	width,
+	labels = {},
+	item = {},
 }) => {
 	return g => {
 
@@ -232,16 +241,9 @@ export const MouseFocusLabel = ({
 
 		let rect = g.select(".mouse-focus-label-rect");
 		let text = g.select(".mouse-focus-label-text");
-		let y    = text.select(".mouse-focus-label-y");
-		let 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
 		let xAlign = 0;
@@ -264,13 +266,22 @@ export const MouseFocusLabel = ({
 			.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");
 
+		let 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;
@@ -460,8 +471,9 @@ export const Chart = ({
 				yCoord: 0,
 				height: _height,
 				width : _width,
-				labelX: "",
-				labelY: "",
+				labels: {}
+				// labelX: "",
+				// labelY: "",
 			})
 		);
 

package/src/control.js

@@ -17,7 +17,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__TOGEOJSON:   'https://unpkg.com/@tmcw/togeojson@4.3.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.7.5/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.7.6/libs/leaflet-distance-marker.min.js',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -832,6 +832,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Hacky way for handling chart resize. Deletes it and redraw chart.
 	 */
 	_resizeChart: function() {
+		if(!this._container) return;
+
 		// prevent displaying chart on resize if hidden
 		if (_.style(this._container, "display") == "none") return;
 
@@ -920,7 +922,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Calculates [x, y] domain and then update chart.
 	 */
 	_updateChart: function() {
-		if (/*!this._data.length ||*/ !this._container) return;
+		if (/*!this._data.length ||*/ !this._chart || !this._container) return;
 
 		this._fireEvt("elechart_axis");
 		this._fireEvt("elechart_area");
@@ -1112,7 +1114,7 @@ Elevation.addInitHook(function() {
 				if (options.stroke && options.weight !== 0) {
 					let 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;

package/src/distance.js

@@ -66,6 +66,11 @@ Elevation.addInitHook(function() {
 
 	}
 
+	this._registerFocusLabel({
+		name: 'x',
+		chart: (item) => L._("x: ") + d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + this._xLabel,
+	});
+
 	this._registerSummary({
 		"totlen"  : {
 			label: "Total Length: ",

package/src/index.js

@@ -39,8 +39,8 @@ import * as _ from './utils';
 import * as D3 from './components';
 import { Chart } from './chart';
 import { Elevation } from './control';
-import './distance';
 import './altitude';
+import './distance';
 import './time';
 import './slope';
 import './speed';
@@ -50,4 +50,15 @@ Elevation.Utils = _;
 Elevation.Components = D3;
 Elevation.Chart = Chart;
 
+/* Temporary fix for empty values evaluated as false (leaflet-i18n v0.3.1) */
+(function(){
+	let proto = L.i18n.bind({});
+	L.i18n = L._ = (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 = (options) => new Elevation(options);

package/src/marker.js

@@ -93,35 +93,18 @@ export var Marker = L.Class.extend({
 						length: normalizedY
 					})
 				);
+
 			this._focuslabel
 				.call(
 					D3.HeightFocusLabel({
 						theme : opts.theme,
 						xCoord: point.x,
 						yCoord: normalizedY,
-						label : d3.format("." + opts.decimalsY + "f")(point[opts.yAttr]) + " " + this._yLabel
+						labels: this._focuslabels,
+						item: point
 					})
 				);
 
-			let labels = this._focuslabels;
-			let tooltip = this._focuslabel;
-			let 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');
 			this._marker.setLatLng(this._latlng);

package/src/options.js

@@ -68,6 +68,7 @@ export var Options = {
 	time: false,
 	timeFactor: 3600,
 	timeFormat: false,
+	timestamps: false,
 	sDeltaMax: undefined,
 	sInterpolation: "curveStepAfter",
 	sRange: undefined,

package/src/slope.js

@@ -95,7 +95,7 @@ Elevation.addInitHook(function() {
 
 	this._registerFocusLabel({
 		name: 'slope',
-		chart: (item) => item.slope + slope.label,
+		chart: (item) => L._("m: ") + item.slope + slope.label,
 		marker: (item) => Math.round(item.slope) + slope.label
 	});
 

package/src/speed.js

@@ -96,8 +96,8 @@ Elevation.addInitHook(function() {
 
 		this._registerFocusLabel({
 			name: 'speed',
-			chart: (item) => item.speed + " " + speed.label,
-			marker: (item) => Math.round(item.speed) + " " + speed.label
+			chart: (item) => L._('v: ') + item.speed + " " + speed.label,
+			marker: (item) => Math.round(item.speed) + " " + speed.label,
 		});
 
 		this._registerSummary({

package/src/time.js

@@ -100,20 +100,25 @@ Elevation.addInitHook(function() {
 		this.track_info.time = duration;
 	});
 
-	if (this.options.time) {
 
+	if (this.options.timestamps) {
 		this._registerFocusLabel({
-			name: 'time',
-			chart: (item) => this.options.timeFormat(item.time)
+			name: 'date',
+			chart: (item) => L._("t: ") + this.options.timeFormat(item.time)
 		});
+	}
 
+	if (this.options.time) {
+		this._registerFocusLabel({
+			name: 'time',
+			chart: (item) => L._("T: ") + _.formatTime(item.duration || 0)
+		});
 		this._registerSummary({
 			"tottime"  : {
 				label: "Total Time: ",
 				value: (track) => _.formatTime(track.time || 0)
 			}
 		});
-
 	}
 
 });