mirror of https://github.com/BTCPrivate/z-nomp.git
Fix pie charts to be multipool friendly
This commit is contained in:
parent
d35a770faa
commit
e6c4bf4c10
|
@ -126,8 +126,8 @@
|
||||||
</div>
|
</div>
|
||||||
{{ } }}
|
{{ } }}
|
||||||
</div>
|
</div>
|
||||||
{{ var blockscomb = new Array; }}
|
|
||||||
{{ for(var pool in it.stats.pools) { }}
|
{{ for(var pool in it.stats.pools) { }}
|
||||||
|
{{ var blockscomb = new Array; }}
|
||||||
<div class="pure-g-r" id="boxesLower">
|
<div class="pure-g-r" id="boxesLower">
|
||||||
<div class="pure-u-1-1">
|
<div class="pure-u-1-1">
|
||||||
<div class="boxStats" id="boxStatsRight">
|
<div class="boxStats" id="boxStatsRight">
|
||||||
|
@ -184,130 +184,133 @@
|
||||||
{{ } }}
|
{{ } }}
|
||||||
{{ } }}
|
{{ } }}
|
||||||
<!--{{=JSON.stringify(blockscomb)}}-->
|
<!--{{=JSON.stringify(blockscomb)}}-->
|
||||||
<script>var blockscomb = ({{=JSON.stringify(blockscomb)}}) </script>
|
<script>
|
||||||
|
var blockscomb = ({{=JSON.stringify(blockscomb)}})
|
||||||
|
</script>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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="chartWrapper" style="text-align:center;">
|
||||||
<div class="chartLabel">Finders of the last {{=blockscomb.length}} blocks</div>
|
<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="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"><svg id="blocksPie" style="display: block; margin: auto; text-align:center;"/></div>
|
<div class="chartHolder" id="pie{{=pool}}"><svg id="blocksPie{{=pool}}" style="display: block; margin: auto; text-align:center;"/></div>
|
||||||
</div>
|
</div>
|
||||||
</div></center>
|
</div></center>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
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();
|
||||||
|
var div = d3.select("#pie{{=pool}}").append("div")
|
||||||
|
.attr("class", "tooltip")
|
||||||
|
.style("opacity", 0);
|
||||||
|
|
||||||
|
var vis = d3.select('#blocksPie{{=pool}}')
|
||||||
|
.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{{=pool}}")
|
||||||
|
.data(pie)
|
||||||
|
.enter()
|
||||||
|
.append("svg:g")
|
||||||
|
.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{{=pool}}")
|
||||||
|
.text(d.data.value);
|
||||||
|
d3.select("#tooltip{{=pool}}")
|
||||||
|
.select("#finderr{{=pool}}")
|
||||||
|
.text(d.data.label);
|
||||||
|
});
|
||||||
|
|
||||||
|
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('id', {{=JSON.stringify(pool)}})
|
||||||
|
.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>
|
<script>
|
||||||
document.querySelector('main').appendChild(document.createElement('script')).src = '/static/stats.js';
|
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();
|
|
||||||
var div = d3.select("#pie").append("div")
|
|
||||||
.attr("class", "tooltip")
|
|
||||||
.style("opacity", 0);
|
|
||||||
|
|
||||||
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")
|
|
||||||
.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);
|
|
||||||
})
|
|
||||||
.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>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.statsSource = new EventSource("/api/live_stats");
|
window.statsSource = new EventSource("/api/live_stats");
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
Loading…
Reference in New Issue