improved block propagation histogram

This commit is contained in:
cubedro 2015-04-24 03:08:12 +03:00
parent 7da2d82199
commit 937f14bc0a
4 changed files with 39 additions and 26 deletions

View File

@ -1,4 +1,5 @@
var _ = require('lodash');
var d3 = require('d3');
var MAX_HISTORY = 1008;
var MAX_PEER_PROPAGATION = 36;
@ -128,11 +129,7 @@ History.prototype.getBlockPropagation = function()
{
var propagation = [];
var sorted = _(this._items)
.sortByOrder('height', false)
.slice(0, MAX_BLOCK_PROPAGATION)
.reverse()
.forEach(function(n, key)
_.forEach(this._items, function(n, key)
{
_.forEach(n.propagTimes, function(p, i)
{
@ -141,10 +138,25 @@ History.prototype.getBlockPropagation = function()
if(prop >= 0)
propagation.push(prop);
});
})
.value();
});
return propagation;
var x = d3.scale.linear()
.domain([0, 20000])
.interpolate(d3.interpolateRound);
var data = d3.layout.histogram()
.frequency(false)
.bins(x.ticks(MAX_BINS))
(propagation);
var freqCum = 0;
var histo = data.map(function(val) {
freqCum += val.length;
var cumPercent = (freqCum / Math.max(1, propagation.length));
return {x: val.x, dx: val.dx, y: val.y, frequency: val.length, cumulative: freqCum, cumpercent: cumPercent};
});
return histo;
}
History.prototype.history = function()

View File

@ -12,6 +12,7 @@
},
"dependencies": {
"body-parser": "1.12.3",
"d3": "^3.5.5",
"debug": "2.1.3",
"express": "4.12.3",
"geoip-lite": "1.1.6",

View File

@ -302,8 +302,7 @@ table td.peerPropagationChart {
padding: 5px 0;
}
.jqsfield .tooltip-arrow,
.d3-tip .tooltip-arrow {
.jqsfield .tooltip-arrow {
position: absolute;
bottom: 0;
left: 50%;
@ -312,7 +311,8 @@ table td.peerPropagationChart {
border-top-color: #fff;
}
.datamaps-hoverover .tooltip-arrow {
.datamaps-hoverover .tooltip-arrow,
.d3-tip .tooltip-arrow {
position: absolute;
top: -5px;
left: 0px;
@ -321,6 +321,11 @@ table td.peerPropagationChart {
border-bottom-color: #fff;
}
.d3-tip .tooltip-arrow {
top: 0px;
left: 50%;
}
.hoverinfo {
position: relative;
width: auto;

View File

@ -121,18 +121,15 @@ angular.module('netStatsApp.directives', []).
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.offset([10, 0])
.direction('s')
.html(function(d) {
return '<div class="tooltip-arrow"></div><div class="tooltip-inner"><b>' + (d.x/1000) + 's - ' + ((d.x + d.dx)/1000) + 's</b>: ' + Math.round(d.y * 100) + "%" + "</div>";
return '<div class="tooltip-arrow"></div><div class="tooltip-inner"><b>' + (d.x/1000) + 's - ' + ((d.x + d.dx)/1000) + 's</b><div class="small">Percent: <b>' + Math.round(d.y * 100) + '%</b>' + '<br>Frequency: <b>' + d.frequency + '</b><br>Cumulative: <b>' + Math.floor(d.cumpercent*100) + '%</b></div></div>';
})
scope.init = function()
{
// Init data
var data = d3.layout.histogram()
.frequency(false)
.bins(x.ticks(TICKS))
(scope.data);
var data = scope.data;
// Adjust y axis
y.domain([0, d3.max(data, function(d) { return d.y; })]);
@ -198,8 +195,6 @@ angular.module('netStatsApp.directives', []).
.attr("d", line(data));
}
scope.init();
scope.$watch('data', function() {
scope.init();
}, true);