diff --git a/public/js/controllers/StatsController.js b/public/js/controllers/StatsController.js
index a5da57c2c..068c3f701 100755
--- a/public/js/controllers/StatsController.js
+++ b/public/js/controllers/StatsController.js
@@ -1259,6 +1259,18 @@ angular.module('BlocksApp').controller('StatsController', function($stateParams,
.attr("class", "y axis")
.call(yAxis);
+ var tip = d3.tip()
+ .attr('class', 'd3-tip')
+ .offset([-10, 0])
+ .direction('s')
+ .html(function(d) {
+ return '
' +
+ '';
+ });
+
// Add Tooltip
var focus = svg.append("g")
.attr("class", "focus")
@@ -1271,12 +1283,23 @@ angular.module('BlocksApp').controller('StatsController', function($stateParams,
.attr("x", 9)
.attr("dy", ".35em");
+ svg.call(tip);
+
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
- .on("mouseover", function() { focus.style("display", null); })
- .on("mouseout", function() { focus.style("display", "none"); })
+ .on("mouseover", function() {
+ var x0 = x.invert(d3.mouse(this)[0]);
+ var s1 = _.minBy(data, function(d) {
+ return Math.abs(moment(x0).unix()-d.timestamp);
+ });
+ tip.show(s1, this);
+ tip.style("left", d3.event.pageX + 10 + "px");
+ tip.style("top", d3.event.pageY + 25 + "px");
+ focus.style("display", null);
+ })
+ .on("mouseout", function() { tip.hide(); focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
@@ -1286,6 +1309,10 @@ angular.module('BlocksApp').controller('StatsController', function($stateParams,
return Math.abs(moment(x0).unix()-d.timestamp);
});
+ tip.show(s1, this);
+ tip.style("left", d3.event.pageX + 10 + "px");
+ tip.style("top", d3.event.pageY + 25 + "px");
+
focus.attr("transform", "translate(" + x(moment(x0).unix()*1000) + "," + y(s1.txns) + ")");
}