Fix pie charts to be multipool friendly

This commit is contained in:
Aayan L 2017-05-01 18:25:57 -04:00
parent d35a770faa
commit e6c4bf4c10
1 changed files with 112 additions and 109 deletions

View File

@ -126,8 +126,8 @@
</div>
{{ } }}
</div>
{{ var blockscomb = new Array; }}
{{ for(var pool in it.stats.pools) { }}
{{ var blockscomb = new Array; }}
<div class="pure-g-r" id="boxesLower">
<div class="pure-u-1-1">
<div class="boxStats" id="boxStatsRight">
@ -184,29 +184,30 @@
{{ } }}
{{ } }}
<!--{{=JSON.stringify(blockscomb)}}-->
<script>var blockscomb = ({{=JSON.stringify(blockscomb)}}) </script>
<script>
var blockscomb = ({{=JSON.stringify(blockscomb)}})
</script>
</div>
</div>
</div>
</div>
</div>
<center><div id="bottomCharts" style="text-align:center;" align="center">
<center><div id="bottomCharts{{=pool}}" style="text-align:center;" align="center">
<div class="chartWrapper" style="text-align:center;">
<div class="chartLabel">Finders 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 class="hidden" id="tooltip{{=pool}}"><p><span id="value{{=pool}}"></span> blocks found by <span id="finderr{{=pool}}"></span></p></div>
<div class="chartHolder" id="pie{{=pool}}"><svg id="blocksPie{{=pool}}" 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
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] = [];
@ -230,11 +231,11 @@
var legendSpacing = 5;
var color = d3.scale.category20c();
var div = d3.select("#pie").append("div")
var div = d3.select("#pie{{=pool}}").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var vis = d3.select('#blocksPie')
var vis = d3.select('#blocksPie{{=pool}}')
.data([data])
.attr("width", 1000)
.attr("height", h)
@ -250,27 +251,22 @@
var arc = d3.svg.arc().outerRadius(r);
// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice")
var arcs = vis.selectAll("g.slice{{=pool}}")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice")
.on("mouseover", function(d, i){
d3.select("#tooltip")
.attr("class", "slice{{=pool}}")
.attr("id", "slice")
.on("mouseover", function(d){
d3.select("#tooltip{{=pool}}")
.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);
.select("#value{{=pool}}")
.text(d.data.value);
d3.select("#tooltip{{=pool}}")
.select("#finderr{{=pool}}")
.text(d.data.label);
});
arcs.append("svg:path")
@ -286,6 +282,7 @@
.enter()
.append('g')
.attr('class', 'legend')
.attr('id', {{=JSON.stringify(pool)}})
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
@ -307,6 +304,12 @@
return data[i].label;
});
</script>
{{ } }}
<script>
document.querySelector('main').appendChild(document.createElement('script')).src = '/static/stats.js';
</script>
<script>
window.statsSource = new EventSource("/api/live_stats");