TX chart: tooltip added

ethereumclassic · Mar 10, 2019 · 3802a41 · 3802a41
1 parent 5597090
commit 3802a41
Showing 1 changed file with 29 additions and 2 deletions.
diff --git 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 '<div class="tooltip-arrow"></div>' +
+                        '<div class="tooltip-inner"><div class="small"><b>' +
+                        'Transactions: <b>' + d.txns + ' txns </b><br />' +
+                        '<b>' + d3.time.format("%x %H:%M")(new Date(d.timestamp * 1000)) + '</b>' +
+                        '</div></div>';
+                });
+
             // 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) + ")");
             }