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 '
' + + '
' + + 'Transactions: ' + d.txns + ' txns
' + + '' + d3.time.format("%x %H:%M")(new Date(d.timestamp * 1000)) + '' + + '
'; + }); + // 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) + ")"); }