From a0548f53eb97fcd742c3ece0c70c54914771675c Mon Sep 17 00:00:00 2001
From: Aayan L <aayanzillis@gmail.com>
Date: Sat, 29 Apr 2017 23:52:42 -0400
Subject: [PATCH 1/2] Add pie chart

---
 website/pages/stats.html | 109 +++++++++++++++++++++++++++++++++++----
 1 file changed, 100 insertions(+), 9 deletions(-)

diff --git a/website/pages/stats.html b/website/pages/stats.html
index f2cc1ca..586ce58 100644
--- a/website/pages/stats.html
+++ b/website/pages/stats.html
@@ -10,7 +10,8 @@
         border: solid 1px #c7c7c7;
         border-radius: 5px;
         padding: 5px;
-        margin-bottom: 18px;
+        /*margin-bottom: 18px;*/
+        margin: auto;
     }
     .chartLabel{
         font-size: 1.2em;
@@ -18,9 +19,9 @@
         padding: 4px;
     }
     .chartHolder{
-
+        margin: auto;
     }
-	
+
 	#boxesLower {
         margin: 0 9px;
     }
@@ -70,6 +71,7 @@
         padding: 3px;
     }
 </style>
+
 <div id="topCharts">
     <div class="chartWrapper">
         <div class="chartLabel">Pool Historical Hashrate</div>
@@ -109,9 +111,8 @@
     </div>
 	{{ } }}
 </div>
-
+{{ var blockscomb = new Array; }}
 {{ for(var pool in it.stats.pools) { }}
-{{ var paidJackpots = parseFloat(it.stats.pools[pool].poolStats.validBlocks) * 1.0; }}
 <div class="pure-g-r" id="boxesLower">
     <div class="pure-u-1-1">
         <div class="boxStats" id="boxStatsRight">
@@ -122,6 +123,7 @@
 			</div>
             <div class="boxStatsList" style="margin-top: 9px;">
 			<!--<div id="{{=it.stats.pools[pool].name}}NewBlocks"></div>-->
+
 			{{ for(var b in it.stats.pools[pool].pending.blocks) { }}
 			{{ var block = it.stats.pools[pool].pending.blocks[b].split(":"); }}
 				<div style="margin-bottom: 9px; background-color: #eeeeee; min-width:600px;"><i class="fa fa-bars"></i>
@@ -134,7 +136,7 @@
 						{{=block[2]}}
 					{{ } }}
 					{{if (block[4] != null) { }}
-					<span style="padding-left: 18px;"><small>{{=readableDate(block[4])}}</small></span>	
+					<span style="padding-left: 18px;"><small>{{=readableDate(block[4])}}</small></span>
 					{{ } }}
                     {{if (it.stats.pools[pool].pending.confirms[block[0]]) { }}
 					<span style="float:right; color: red;"><small>{{=it.stats.pools[pool].pending.confirms[block[0]]}} of 100</small></span>
@@ -143,6 +145,7 @@
                     {{ } }}
 					<div><i class="fa fa-gavel"></i><small>Mined By:</small> <a href="/workers/{{=block[3].split('.')[0]}}">{{=block[3]}}</a></div>
 				</div>
+        {{ blockscomb.push(block);}}
 			{{ } }}
 			{{ var i=0; for(var b in it.stats.pools[pool].confirmed.blocks) { }}
 			{{ if (i < 8) { i++; }}
@@ -157,22 +160,110 @@
 						{{=block[2]}}
 					{{ } }}
 					{{if (block[4] != null) { }}
-					<span style="padding-left: 18px;"><small>{{=readableDate(block[4])}}</small></span>	
+					<span style="padding-left: 18px;"><small>{{=readableDate(block[4])}}</small></span>
 					{{ } }}
 					<span style="float:right; padding-left: 18px; color: green;"><small>*PAID*</small></span>
 					<div><i class="fa fa-gavel"></i><small>Mined By:</small> <a href="/workers/{{=block[3].split('.')[0]}}">{{=block[3]}}</a></div>
 				</div>
+        {{blockscomb.push(block);}}
 			{{ } }}
 			{{ } }}
+      <!--{{=JSON.stringify(blockscomb)}}-->
+      <script>var blockscomb = ({{=JSON.stringify(blockscomb)}}) </script>
 			</div>
       </div>
         </div>
     </div>
 </div>
+
+<center><div id="bottomCharts" style="text-align:center;" align="center">
+    <div class="chartWrapper" style="text-align:center;">
+        <div class="chartLabel">Founders of recent blocks</div>
+        <div class="chartHolder"><svg id="blocksPie" style="display: block; margin: auto; text-align:center;"/></div>
+    </div>
+</div></center>
 {{ } }}
 
 <script>
     document.querySelector('main').appendChild(document.createElement('script')).src = '/static/stats.js';
+
+    var groupedByFinder = {};
+    var data = [];
+
+    for (var i=0; i < blockscomb.length; i++) { finder=blockscomb[i][3]; // if other doesn 't already have a property for the current letter
+      // create it and assign it to a new empty array
+        if (!(finder in groupedByFinder))
+            groupedByFinder[finder] = [];
+
+        groupedByFinder[finder].push(blockscomb[i]);
+    }
+
+    Object.keys(groupedByFinder).forEach(function(i) {
+        var obj = {};
+        obj.label = i
+        obj.value = groupedByFinder[i].length
+        data.push(obj)
+    });
+
+    console.log(JSON.stringify(data))
+
+    var w = 400;
+    var h = 400;
+    var r = h/2;
+    var legendRectSize = 18;
+    var legendSpacing = 5;
+
+    var color = d3.scale.category20c();
+    console.log(d3.scale)
+    var vis = d3.select('#blocksPie')
+        .data([data])
+        .attr("width", 1000)
+        .attr("height", h)
+        .attr("style", "display: block; margin: auto;")
+        .attr("preserveAspectRatio", "xMidYMin")
+        .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");
+    arcs.append("svg:path")
+        .attr("fill", function(d, i){
+          return color(i);
+        })
+        .attr("d", function (d) {
+          return arc(d);
+        });
+
+    var legend = vis.selectAll('.legend')
+        .data(color.domain())
+        .enter()
+        .append('g')
+        .attr('class', 'legend')
+        .attr('transform', function(d, i) {
+              var height = legendRectSize + legendSpacing;
+              var offset = height * color.domain().length / 2;
+              var horz = 12 * legendRectSize;
+              var vert = i * height;
+              return 'translate(' + horz + ',' + vert + ')';
+        });
+
+    legend.append('rect')
+        .attr('width', legendRectSize)
+        .attr('height', legendRectSize)
+        .style('fill', color)
+        .style('stroke', color);
+
+    legend.append('text')
+        .attr('x', legendRectSize + legendSpacing)
+        .attr('y', legendRectSize - legendSpacing)
+        .text(function(d, i) {
+            return data[i].label;
+        });
 </script>
 
 <script>
@@ -187,7 +278,7 @@
 				$('#statsHashrateAvg' + pool).text(getReadableHashRateString(calculateAverageHashrate(pool)));
 				$('#statsLuckDays' + pool).text(stats.pools[pool].luckDays);
 				$('#statsValidBlocks' + pool).text(stats.pools[pool].poolStats.validBlocks);
-				$('#statsTotalPaid' + pool).text((parseFloat(stats.pools[pool].poolStats.totalPaid)+paidJackpots).toFixed(8));
+				$('#statsTotalPaid' + pool).text((parseFloat(stats.pools[pool].poolStats.totalPaid)).toFixed(8));
 				$('#statsNetworkBlocks' + pool).text(stats.pools[pool].poolStats.networkBlocks);
 				$('#statsNetworkDiff' + pool).text(stats.pools[pool].poolStats.networkDiff);
 				$('#statsNetworkSols' + pool).text(getReadableNetworkHashRateString(stats.pools[pool].poolStats.networkSols));
@@ -195,7 +286,7 @@
             }
         });
     });
-		
+
 	function getReadableNetworkHashRateString(hashrate){
 		hashrate = (hashrate * 1000000);
 		if (hashrate < 1000000)

From 5fafea636ca40526e4e2f5535d1cf7a4a024b2c2 Mon Sep 17 00:00:00 2001
From: Aayan L <aayanzillis@gmail.com>
Date: Sun, 30 Apr 2017 19:58:02 -0400
Subject: [PATCH 2/2] Add tooltip

---
 website/pages/stats.html | 56 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 7 deletions(-)

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;
+    }
 </style>
 
 <div id="topCharts">
@@ -178,8 +193,9 @@
 
 <center><div id="bottomCharts" style="text-align:center;" align="center">
     <div class="chartWrapper" style="text-align:center;">
-        <div class="chartLabel">Founders of recent blocks</div>
-        <div class="chartHolder"><svg id="blocksPie" style="display: block; margin: auto; text-align:center;"/></div>
+        <div class="chartLabel">Founders of the last {{=blockscomb.length}} blocks</div>
+        <div class="hidden" id="tooltip"><p><span id="value"></span> blocks found by <span id="finderr"></span></p></div>
+        <div class="chartHolder" id="pie"><svg id="blocksPie" style="display: block; margin: auto; text-align:center;"/></div>
     </div>
 </div></center>
 {{ } }}
@@ -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);