@raruto/leaflet-elevation 2.4.0 → 2.5.0

package/src/components/marker.js

@@ -1,96 +1,96 @@
-import * as D3 from './d3.js';
-
-const _ = L.Control.Elevation.Utils;
-
-export var Marker = L.Class.extend({
-
-	initialize(options, control) {
-		this.options = options;
-		this.control = control
-
-		switch(this.options.marker) {
-			case 'elevation-line':
-				// this._container = d3.create("g").attr("class", "height-focus-group");
-			break;
-			case 'position-marker':
-				// this._marker   = L.circleMarker([0, 0], { pane: 'overlayPane', radius: 6, fillColor: '#fff', fillOpacity:1, color: '#000', weight:1, interactive: false });
-				this._marker      = L.marker([0, 0], { icon: this.options.markerIcon, zIndexOffset: 1000000, interactive: false });
-			break;
-		}
-
-		this._labels = {};
-
-		return this;
-	},
-
-	addTo(map) {
-		this._map = map;
-		switch(this.options.marker) {
-			case 'elevation-line':  this._container = d3.select(map.getPane('elevationPane')).select("svg > g").call(D3.PositionMarker({})); break;
-			case 'position-marker': this._marker.addTo(map, { pane: 'overlayPane' }); break;
-		}
-		return this;
-	},
-
-	/**
-	 * Update position marker ("leaflet-marker").
-	 */
-	update(props) {
-		if (props) this._props = props;
-		else props = this._props;
-
-		if(!props) return;
-
-		if (props.options) this.options = props.options;
-		if (!this._map) this.addTo(props.map);
-
-		this._latlng = props.item.latlng;
-
-		switch(this.options.marker) {
-			case 'elevation-line':
-				if (this._container) {
-					let point = this._map.latLngToLayerPoint(this._latlng);
-					point     = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
-
-					let yMax = (this.control._height() / props.yCoordMax * point[this.options.yAttr]);
-
-					if(!isFinite(yMax) || isNaN(yMax)) yMax = 0;
-
-					this._container.classed("leaflet-hidden", false);
-					this._container.call(D3.PositionMarker({
-						theme : this.options.theme,
-						xCoord: point.x,
-						yCoord: point.y,
-						length: point.y - yMax, // normalized Y
-						labels: this._labels,
-						item: point,
-					}));
-				}
-			break;
-			case 'position-marker':
-				_.removeClass(this._marker.getElement(), 'leaflet-hidden');
-				this._marker.setLatLng(this._latlng);
-			break;
-		}
-	},
-
-	/*
-	 * Hides the position/height indicator marker drawn onto the map
-	 */
-	remove() {
-		this._props = null;
-		switch(this.options.marker) {
-			case 'elevation-line':  this._container && this._container.classed("leaflet-hidden", true); break;
-			case 'position-marker': _.addClass(this._marker.getElement(), 'leaflet-hidden');            break;
-		}
-	},
-
-	getLatLng() {
-		return this._latlng;
-	},
-
-	_registerTooltip(props) {
-		this._labels[props.name] = props;
-	}
-
-});
+import * as D3 from './d3.js';
+
+const _ = L.Control.Elevation.Utils;
+
+export var Marker = L.Class.extend({
+
+	initialize(options, control) {
+		this.options = options;
+		this.control = control
+
+		switch(this.options.marker) {
+			case 'elevation-line':
+				// this._container = d3.create("g").attr("class", "height-focus-group");
+			break;
+			case 'position-marker':
+				// this._marker   = L.circleMarker([0, 0], { pane: 'overlayPane', radius: 6, fillColor: '#fff', fillOpacity:1, color: '#000', weight:1, interactive: false });
+				this._marker      = L.marker([0, 0], { icon: this.options.markerIcon, zIndexOffset: 1000000, interactive: false });
+			break;
+		}
+
+		this._labels = {};
+
+		return this;
+	},
+
+	addTo(map) {
+		this._map = map;
+		switch(this.options.marker) {
+			case 'elevation-line':  this._container = d3.select(map.getPane('elevationPane')).select("svg > g").call(D3.PositionMarker({})); break;
+			case 'position-marker': this._marker.addTo(map, { pane: 'overlayPane' }); break;
+		}
+		return this;
+	},
+
+	/**
+	 * Update position marker ("leaflet-marker").
+	 */
+	update(props) {
+		if (props) this._props = props;
+		else props = this._props;
+
+		if (!props) return;
+
+		if (props.options) this.options = props.options;
+		if (!this._map) this.addTo(props.map);
+
+		this._latlng = props.item.latlng;
+
+		switch(this.options.marker) {
+			case 'elevation-line':
+				if (this._container) {
+					let point = this._map.latLngToLayerPoint(this._latlng);
+					point     = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
+
+					let yMax = (this.control._height() / props.yCoordMax * point[this.options.yAttr]);
+
+					if (!isFinite(yMax) || isNaN(yMax)) yMax = 0;
+
+					this._container.classed("leaflet-hidden", false);
+					this._container.call(D3.PositionMarker({
+						theme : this.options.theme,
+						xCoord: point.x,
+						yCoord: point.y,
+						length: point.y - yMax, // normalized Y
+						labels: this._labels,
+						item: point,
+					}));
+				}
+			break;
+			case 'position-marker':
+				_.removeClass(this._marker.getElement(), 'leaflet-hidden');
+				this._marker.setLatLng(this._latlng);
+			break;
+		}
+	},
+
+	/*
+	 * Hides the position/height indicator marker drawn onto the map
+	 */
+	remove() {
+		this._props = null;
+		switch(this.options.marker) {
+			case 'elevation-line':  this._container && this._container.classed("leaflet-hidden", true); break;
+			case 'position-marker': _.addClass(this._marker.getElement(), 'leaflet-hidden');            break;
+		}
+	},
+
+	getLatLng() {
+		return this._latlng;
+	},
+
+	_registerTooltip(props) {
+		this._labels[props.name] = props;
+	}
+
+});

package/src/control.js

@@ -14,7 +14,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__mileFactor:     0.621371, // 1 km = (0.621371 mi)
 	__footFactor:     3.28084,  // 1 m  = (3.28084 ft)
 	__D3:            'https://unpkg.com/d3@7.8.4/dist/d3.min.js',
-	__TOGEOJSON:     'https://unpkg.com/@tmcw/togeojson@5.6.0/dist/togeojson.umd.js',
+	__TOGEOJSON:     'https://unpkg.com/@tmcw/togeojson@5.6.2/dist/togeojson.umd.js',
 	__LGEOMUTIL:     'https://unpkg.com/leaflet-geometryutil@0.10.1/src/leaflet.geometryutil.js',
 	__LALMOSTOVER:   'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
 	__LHOTLINE:      '../libs/leaflet-hotline.min.js',
@@ -214,6 +214,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Javascript scripts downloader (lazy loader)
 	 */
 	import(src, condition) {
+		if (Array.isArray(src)) {
+			return Promise.all(src.map(m => this.import(m)));
+		}
 		switch(src) {
 			case this.__D3:          condition = typeof d3 !== 'object'; break;
 			case this.__TOGEOJSON:   condition = typeof toGeoJSON !== 'object'; break;
@@ -401,38 +404,36 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Initialize "L.AlmostOver" integration
 	 */
 	_initAlmostOverHandler(map, layer) {
-		return (map && this.options.almostOver && !L.Browser.mobile) ? Promise.all([
-			this.import(this.__LGEOMUTIL),
-			this.import(this.__LALMOSTOVER)
-		]).then(() => {
-			map.addHandler('almostOver', L.Handler.AlmostOver)
-			if (L.GeometryUtil && map.almostOver && map.almostOver.enabled()) {
-				map.almostOver.addLayer(layer);
-				map
-					.on('almost:move', this._onMouseMoveLayer, this)
-					.on('almost:out', this._onMouseOut, this);
-				this.once('eledata_clear', () => {
-					map.almostOver.removeLayer(layer);
+		return (map && this.options.almostOver && !L.Browser.mobile) ? this.import([this.__LGEOMUTIL, this.__LALMOSTOVER])
+			.then(() => {
+				map.addHandler('almostOver', L.Handler.AlmostOver)
+				if (L.GeometryUtil && map.almostOver && map.almostOver.enabled()) {
+					map.almostOver.addLayer(layer);
 					map
-					.off('almost:move', this._onMouseMoveLayer, this)
-					.off('almost:out', this._onMouseOut, this);
-				})
-			}
-		}) : Promise.resolve();
+						.on('almost:move', this._onMouseMoveLayer, this)
+						.on('almost:out', this._onMouseOut, this);
+					this.once('eledata_clear', () => {
+						map.almostOver.removeLayer(layer);
+						map
+						.off('almost:move', this._onMouseMoveLayer, this)
+						.off('almost:out', this._onMouseOut, this);
+					})
+				}
+			}) : Promise.resolve();
 	},
 
 	/**
 	 * Initialize "L.DistanceMarkers" integration
 	 */
 	_initDistanceMarkers() {
-		return this.options.distanceMarkers ? Promise.all([this.import(this.__LGEOMUTIL), this.import(this.__LDISTANCEM)]) : Promise.resolve();
+		return this.options.distanceMarkers ? this.import([this.__LGEOMUTIL, this.__LDISTANCEM]) : Promise.resolve();
 	},
 
 	/**
 	 * Initialize "L.Control.EdgeScale" integration
 	 */
 	_initEdgeScale(map) {
-		return this.options.edgeScale ? Promise.all([this.import(this.__LEDGESCALE)])
+		return this.options.edgeScale ? this.import(this.__LEDGESCALE)
 			.then(() => {
 				map.edgeScaleControl = map.edgeScaleControl || L.control.edgeScale('boolean' !== typeof this.options.edgeScale ? this.options.edgeScale : {}).addTo(map);
 			}) : Promise.resolve();
@@ -443,7 +444,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		return this.options.hotline ? this.import(this.__LHOTLINE)
 			.then(() => {
 				layer.eachLayer((trkseg) => {
-					if(trkseg.feature.geometry.type != "Point") {
+					if (trkseg.feature.geometry.type != "Point") {
 						let geo = L.geoJson(trkseg.toGeoJSON(), { coordsToLatLng: (coords) => L.latLng(coords[0], coords[1], coords[2] * (this.options.altitudeFactor || 1))});
 						let line = L.hotline(geo.toGeoJSON().features[0].geometry.coordinates, {
 							renderer: L.Hotline.renderer(),
@@ -618,10 +619,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			if (opts._maxWidth > clientWidth) opts.width = clientWidth - 30;
 		}
 
-		Promise.all([
-			this.import(this.__D3),
-			this.import(this.__LCHART)
-		]).then((m) => {
+		this
+			.import([this.__D3, this.__LCHART])
+			.then((m) => {
 
 			let chart = this._chart = new (m[1] || Elevation).Chart(opts, this);
 	
@@ -689,13 +689,11 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (this._renderer) this._renderer.remove()
 		this._renderer               = L.svg({ pane: "elevationPane" }).addTo(this._map); // default leaflet svg renderer
 
-		Promise.all([
-			this.import(this.__D3),
-			this.import(this.__LMARKER)
-		]).then((m) => {
-			this._marker             = new (m[1] || Elevation).Marker(this.options, this);
-			this.fire("elechart_marker");
-		});
+		this.import([this.__D3, this.__LMARKER])
+			.then((m) => {
+				this._marker             = new (m[1] || Elevation).Marker(this.options, this);
+				this.fire("elechart_marker");
+			});
 	},
 
 	/**
@@ -829,7 +827,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	},
 
 	_onKeyDown({key}) {
-		if(!this.options.detached && key === "Escape"){
+		if (!this.options.detached && key === "Escape"){
 			this._collapse()
 		};
 	},

package/src/handlers/labels.js

@@ -1,6 +1,6 @@
 /**
  * @see https://github.com/Raruto/leaflet-elevation/issues/211
- * 
+ *
  * @example
  * ```js
  * L.control.Elevation({ handlers: [ 'Labels' ], labelsRotation: 25, labelsAlign: 'start' })
@@ -8,7 +8,7 @@
  */
 export function Labels() {
 
-  this.on('elechart_init elechart_axis', function(e) {
+  this.on('elechart_updated', function(e) {
 
     const pointG = this._chart._chart.pane('point');
 
@@ -29,7 +29,7 @@ export function Labels() {
         .attr("stroke", '#000')
         .attr("stroke-width", '1.1');
 
-    } else if (!isNaN(textRotation)) { 
+    } else if (!isNaN(textRotation)) {
 
       pointG.selectAll('text')
         .attr("dx", "4px")

package/src/handlers/lineargradient.js

@@ -0,0 +1,122 @@
+/**
+ * @see https://github.com/Raruto/leaflet-elevation/issues/251
+ * 
+ * @example
+ * ```js
+ * L.control.Elevation({
+ *   altitude: true,
+ *   distance: true,
+ *   handlers: [ 'Altitude', 'Distance', 'LinearGradient', ],
+ *   linearGradient: {
+ *     attr: 'z',
+ *     path: 'altitude',
+ *     range: { 0.0: '#008800', 0.5: '#ffff00', 1.0: '#ff0000' },
+ *     min: 'elevation_min',
+ *     max: 'elevation_max',
+ *   },
+ * })
+ * ```
+ */
+export function LinearGradient() {
+
+  if (!this.options.linearGradient) {
+    return {};
+  }
+
+  const _ = L.Control.Elevation.Utils;
+
+  /**
+   * Initialize gradient color palette.
+   */
+  const get_palette = function ({range, min, max, depth = 256}) {
+    const canvas = document.createElement('canvas'),
+      ctx = canvas.getContext('2d'),
+      gradient = ctx.createLinearGradient(0, 0, 0, depth);
+
+    canvas.width = 1;
+    canvas.height = depth;
+
+    for (let i in range) {
+      gradient.addColorStop(i, range[i]);
+    }
+
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 1, depth);
+
+    const { data } = ctx.getImageData(0, 0, 1, depth);
+
+    return {
+      /**
+       * Gets the RGB values of a given z value of the current palette.
+       * 
+       * @param {number} value - Value to get the color for, should be between min and max.
+       * @returns {string} The RGB values as `rgb(r, g, b)` string
+       */
+      getRGBColor(value) {
+        const idx = Math.floor(Math.min(Math.max((value - min) / (max - min), 0), 0.999) * depth) * 4;
+        return 'rgb(' + [data[idx], data[idx + 1], data[idx + 2]].join(',') + ')';
+      }
+    };
+  };
+
+  const { preferCanvas } = this.options;
+  const { attr, path: path_name, range, min, max } = L.extend({
+    attr: 'z',
+    path: 'altitude',
+    range: { 0.0: '#008800', 0.5: '#ffff00', 1.0: '#ff0000' },
+    min: 'elevation_min',
+    max: 'elevation_max',
+  }, (true === this.options.linearGradient) ? {} : this.options.linearGradient);
+
+  const gradient_id = path_name + '-gradient-' + _.randomId();
+  const legend_id   = 'legend-' + gradient_id;
+
+  // Charte profile gradient 
+  this.on('elechart_axis', () => {
+    if (!this._data.length) return;
+
+    const chart = this._chart;
+    const path = chart._paths[path_name];
+    const { defs } = chart._chart.utils;
+
+    const palette = get_palette({
+      min: isFinite(this.track_info[min]) ? this.track_info[min] : 0,
+      max: isFinite(this.track_info[max]) ? this.track_info[max] : 1,
+      range,
+    });
+
+    let gradient;
+
+    if (preferCanvas) {
+      /** ref: `path.__fillStyle` within L.Control.Elevation.Utils::drawCanvas(ctx, path) */
+      path.__fillStyle = gradient = chart._context.createLinearGradient(0, 0, chart._width(), 0);
+    } else {
+      defs.select('#' + gradient_id).remove();
+      gradient = defs.append('svg:linearGradient').attr('id', gradient_id);
+      gradient.addColorStop = function(offset, color) { gradient.append('svg:stop').attr('offset', offset).attr('stop-color', color) };
+      path.attr('fill', 'url(#' + gradient_id + ')').classed('area', false);
+    }
+
+    // Generate gradient for each segment picking colors from palette
+    for (let i = 0, data = this._data; i < data.length; i++) {
+      gradient.addColorStop((i) / data.length, palette.getRGBColor(data[i][attr]));
+    }
+
+  });
+
+  // Legend item gradient
+  this.on('elechart_updated', () => {
+    const chart = this._chart;
+    const { defs } = chart._chart.utils;
+    defs.select('#' + legend_id).remove();
+    const legendGradient = defs.append('svg:linearGradient').attr('id', legend_id);
+    Object.keys(range).sort().forEach(i => legendGradient.append('svg:stop').attr('offset', i).attr('stop-color', range[i]));
+
+    chart._container
+      .select('.legend-' + path_name + ' > rect')
+      .attr('fill', 'url(#' + legend_id + ')')
+      .classed('area', false);
+  });
+
+  return { };
+}

package/src/handlers/time.js

@@ -1,103 +1,103 @@
-export function Time() {
-
-	const _ = L.Control.Elevation.Utils;
-
-	let opts = this.options;
-	let time = {};
-
-	time.label      = opts.timeLabel  || 't';
-	opts.timeFactor = opts.timeFactor || 3600;
-
-	/**
-	 * Common AVG speeds:
-	 * ----------------------
-	 *  slow walk = 1.8  km/h
-	 *  walking   = 3.6  km/h <-- default: 3.6
-	 *  running   = 10.8 km/h
-	 *  cycling   = 18   km/h
-	 *  driving   = 72   km/h
-	 * ----------------------
-	 */
-	this._timeAVGSpeed = (opts.timeAVGSpeed || 3.6) * (opts.speedFactor || 1);
-
-	if (!opts.timeFormat) {
-		opts.timeFormat = (time) => (new Date(time)).toLocaleString().replaceAll('/', '-').replaceAll(',', ' ');
-	} else if (opts.timeFormat == 'time') {
-		opts.timeFormat = (time) => (new Date(time)).toLocaleTimeString();
-	} else if (opts.timeFormat == 'date') {
-		opts.timeFormat = (time) => (new Date(time)).toLocaleDateString();
-	}
-
-	opts.xTimeFormat = opts.xTimeFormat || ((t) => _.formatTime(t).split("'")[0]);
-
-	return {
-		name: 'time',
-		required: (this.options.speed || this.options.acceleration || this.options.timestamps),
-		coordinateProperties: ["coordTimes", "times", "time"],
-		coordPropsToMeta: _.parseDate,
-		pointToAttr: function(point, i) {
-			// Add missing timestamps (see: options.timeAVGSpeed)
-			if (!point.meta || !point.meta.time) {
-				point.meta = point.meta || {};
-				if(i > 0) {
-					let dx = (this._data[i].dist - this._data[i - 1].dist);
-					let t0 = this._data[i - 1].time.getTime();
-					point.meta.time = new Date(t0 + ( dx / this._timeAVGSpeed) * this.options.timeFactor * 1000);
-				} else {
-					point.meta.time = new Date(Date.now())
-				}
-			}
-			// Handle timezone offset
-			let time = (point.meta.time.getTime() - point.meta.time.getTimezoneOffset() * 60 * 1000 !== 0) ? point.meta.time : 0;
-			// Update duration
-			this._data[i].duration = i > 0 ? (this._data[i - 1].duration || 0) + Math.abs(time - this._data[i - 1].time) : 0;
-			return time;
-		},
-		onPointAdded: (_, i) => this.track_info.time = this._data[i].duration,
-		scale: (opts.time && opts.time != "summary" && !L.Browser.mobile) && {
-			axis       : "x",
-			position   : "top",
-			scale      : {
-				attr       : "duration",
-				min        : 0,
-			},
-			label      : time.label,
-			labelY     : -10,
-			labelX     : () => this._width(),
-			name       : "time",
-			ticks      : () => _.clamp(this._chart._xTicks() / 2, [4, +Infinity]),
-			tickFormat : (d)  => (d == 0 ? '' : opts.xTimeFormat(d)),
-			onAxisMount: axis => {
-				axis.select(".domain")
-					.remove();
-				axis.selectAll("text")
-					.attr('opacity', 0.65)
-					.style('font-family', 'Monospace')
-					.style('font-size', '110%');
-				axis.selectAll(".tick line")
-					.attr('y2', this._height())
-					.attr('stroke-dasharray', 2)
-					.attr('opacity', 0.75);
-				}
-		},
-		tooltips: [
-			(this.options.time) && {
-				name: 'time',
-				chart: (item) => L._("T: ") + _.formatTime(item.duration || 0),
-				order: 20
-			},
-			(this.options.timestamps) && {
-				name: 'date',
-				chart: (item) => L._("t: ") + this.options.timeFormat(item.time),
-				order: 21,
-			}
-		],
-		summary: (this.options.time) && {
-			"tottime"  : {
-				label: "Total Time: ",
-				value: (track) => _.formatTime(track.time || 0),
-				order: 20
-			}
-		}
-	};
+export function Time() {
+
+	const _ = L.Control.Elevation.Utils;
+
+	let opts = this.options;
+	let time = {};
+
+	time.label      = opts.timeLabel  || 't';
+	opts.timeFactor = opts.timeFactor || 3600;
+
+	/**
+	 * Common AVG speeds:
+	 * ----------------------
+	 *  slow walk = 1.8  km/h
+	 *  walking   = 3.6  km/h <-- default: 3.6
+	 *  running   = 10.8 km/h
+	 *  cycling   = 18   km/h
+	 *  driving   = 72   km/h
+	 * ----------------------
+	 */
+	this._timeAVGSpeed = (opts.timeAVGSpeed || 3.6) * (opts.speedFactor || 1);
+
+	if (!opts.timeFormat) {
+		opts.timeFormat = (time) => (new Date(time)).toLocaleString().replaceAll('/', '-').replaceAll(',', ' ');
+	} else if (opts.timeFormat == 'time') {
+		opts.timeFormat = (time) => (new Date(time)).toLocaleTimeString();
+	} else if (opts.timeFormat == 'date') {
+		opts.timeFormat = (time) => (new Date(time)).toLocaleDateString();
+	}
+
+	opts.xTimeFormat = opts.xTimeFormat || ((t) => _.formatTime(t).split("'")[0]);
+
+	return {
+		name: 'time',
+		required: (this.options.speed || this.options.acceleration || this.options.timestamps),
+		coordinateProperties: ["coordTimes", "times", "time"],
+		coordPropsToMeta: _.parseDate,
+		pointToAttr: function(point, i) {
+			// Add missing timestamps (see: options.timeAVGSpeed)
+			if (!point.meta || !point.meta.time) {
+				point.meta = point.meta || {};
+				if (i > 0) {
+					let dx = (this._data[i].dist - this._data[i - 1].dist);
+					let t0 = this._data[i - 1].time.getTime();
+					point.meta.time = new Date(t0 + ( dx / this._timeAVGSpeed) * this.options.timeFactor * 1000);
+				} else {
+					point.meta.time = new Date(Date.now())
+				}
+			}
+			// Handle timezone offset
+			let time = (point.meta.time.getTime() - point.meta.time.getTimezoneOffset() * 60 * 1000 !== 0) ? point.meta.time : 0;
+			// Update duration
+			this._data[i].duration = i > 0 ? (this._data[i - 1].duration || 0) + Math.abs(time - this._data[i - 1].time) : 0;
+			return time;
+		},
+		onPointAdded: (_, i) => this.track_info.time = this._data[i].duration,
+		scale: (opts.time && opts.time != "summary" && !L.Browser.mobile) && {
+			axis       : "x",
+			position   : "top",
+			scale      : {
+				attr       : "duration",
+				min        : 0,
+			},
+			label      : time.label,
+			labelY     : -10,
+			labelX     : () => this._width(),
+			name       : "time",
+			ticks      : () => _.clamp(this._chart._xTicks() / 2, [4, +Infinity]),
+			tickFormat : (d)  => (d == 0 ? '' : opts.xTimeFormat(d)),
+			onAxisMount: axis => {
+				axis.select(".domain")
+					.remove();
+				axis.selectAll("text")
+					.attr('opacity', 0.65)
+					.style('font-family', 'Monospace')
+					.style('font-size', '110%');
+				axis.selectAll(".tick line")
+					.attr('y2', this._height())
+					.attr('stroke-dasharray', 2)
+					.attr('opacity', 0.75);
+				}
+		},
+		tooltips: [
+			(this.options.time) && {
+				name: 'time',
+				chart: (item) => L._("T: ") + _.formatTime(item.duration || 0),
+				order: 20
+			},
+			(this.options.timestamps) && {
+				name: 'date',
+				chart: (item) => L._("t: ") + this.options.timeFormat(item.time),
+				order: 21,
+			}
+		],
+		summary: (this.options.time) && {
+			"tottime"  : {
+				label: "Total Time: ",
+				value: (track) => _.formatTime(track.time || 0),
+				order: 20
+			}
+		}
+	};
 }