diff --git a/website/pages/stats.html b/website/pages/stats.html
index 586ce58..00514c1 100644
--- a/website/pages/stats.html
+++ b/website/pages/stats.html
@@ -10,8 +10,7 @@
border: solid 1px #c7c7c7;
border-radius: 5px;
padding: 5px;
- /*margin-bottom: 18px;*/
- margin: auto;
+ margin-bottom: 18px;
}
.chartLabel{
font-size: 1.2em;
@@ -19,7 +18,7 @@
padding: 4px;
}
.chartHolder{
- margin: auto;
+
}
#boxesLower {
@@ -70,6 +69,22 @@
.boxStatsList > div > div{
padding: 3px;
}
+
+ div.tooltip {
+ position: absolute;
+ text-align: center;
+ width: 60px;
+ height: 28px;
+ padding: 2px;
+ font: 12px sans-serif;
+ background: lightsteelblue;
+ border: 0px;
+ border-radius: 8px;
+ pointer-events: none;
+ }
+ #tooltip.hidden {
+ opacity: 0;
+ }
@@ -178,8 +193,9 @@
-
Founders of recent blocks
-
+
Founders of the last {{=blockscomb.length}} blocks
+
+
{{ } }}
@@ -214,7 +230,10 @@
var legendSpacing = 5;
var color = d3.scale.category20c();
- console.log(d3.scale)
+ var div = d3.select("#pie").append("div")
+ .attr("class", "tooltip")
+ .style("opacity", 0);
+
var vis = d3.select('#blocksPie')
.data([data])
.attr("width", 1000)
@@ -224,13 +243,36 @@
.append("svg:g")
.attr("transform", "translate(" + r + "," + r + ")");
+
var pie = d3.layout.pie().value(function(d){return d.value;});
// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
// select paths, use arc generator to draw
- var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
+ var arcs = vis.selectAll("g.slice")
+ .data(pie)
+ .enter()
+ .append("svg:g")
+ .attr("class", "slice")
+ .on("mouseover", function(d, i){
+ d3.select("#tooltip")
+ .style("left", d3.event.pageX + "px")
+ .style("top", d3.event.pageY + "px")
+ .style("opacity", 1)
+ .select("#value")
+ .text(data[i].value);
+ d3.select("#tooltip")
+ .select("#finderr")
+ .text(data[i].label);
+ })
+ .on("mouseout", function(d) {
+ d3.select("#tooltip")
+ .transition()
+ .duration(500)
+ .style("opacity", 0);
+ });
+
arcs.append("svg:path")
.attr("fill", function(d, i){
return color(i);