grassrootseconomics/ethstats-server
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added histogram

Browse Source
This commit is contained in:
cubedro
2015-04-23 16:17:31 +03:00
parent fdd0c6e04c
commit 338fe37218
9 changed files with 227 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
public/css/style.css
View File

@@ -114,7 +114,7 @@ div.small-title-miner {
color: #aaa;
}
.big-info span.big-details {
.big-info .big-details {
display: block;
font-weight: 200;
font-size: 50px;
@@ -122,7 +122,7 @@ div.small-title-miner {
letter-spacing: -4px;
}
.big-info.chart span.big-details {
.big-info.chart .big-details {
padding-top: 15px;
}
@@ -157,7 +157,7 @@ div.small-title-miner {
}
.blocks-holder .block-count {
font-family: 'Lucida Console', monaco, "Courier New", Courier, monospace;
font-family: 'Lucida Console', "Courier New", Courier, monospace;
font-weight: bold;
font-size: 10px;
padding-top: 3px;
@@ -230,6 +230,11 @@ table td i:before {
}
.th-nodename {
width: 300px;
text-overflow: ellipsis;
}
.th-nodetype {
width: 200px;
}
@@ -319,4 +324,49 @@ table td i:before {
.hoverinfo .propagationBox {
top: 3px;
}
svg {
overflow: visible !important;
}
svg .bar {
fill: #1f77b4;
shape-rendering: crispEdges;
}
svg .bar:hover {
opacity: 0.8;
}
svg .line {
fill: none;
stroke: #ff0000;
stroke-width: 2px;
shape-rendering: auto;
}
svg .bar .a {
fill: #aec7e8;
}
svg .bar text {
text-anchor: end;
font-size: 12px;
}
svg .axis path,
svg .axis line {
fill: none;
stroke: rgba(255,255,255,0.15);
shape-rendering: crispEdges;
}
svg .axis text {
fill: #777;
font-size: 10px;
letter-spacing: 0px;
font-family: "Source Sans Pro";
font-weight: 700;
-webkit-font-smoothing: subpixel-antialiased;
-moz-font-smoothing: subpixel-antialiased;
}

BIN
public/fonts/Simple-Line-Icons.ttf Executable file
View File

Binary file not shown.

27
public/js/controllers.js
View File

@@ -24,6 +24,7 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
$scope.nodes = [];
$scope.map = [];
$scope.blockPropagationChart = [];
$scope.latency = 0;
@@ -125,7 +126,6 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
case "blockPropagationChart":
$scope.blockPropagationChart = data;
makeBlockPropagationChart();
break;
@@ -175,31 +175,6 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
});
}
function makeBlockPropagationChart()
{
jQuery('.spark-blockpropagation').sparkline(_.map($scope.blockPropagationChart, function(history) {
if(typeof history.propagation === 'undefined')
return -1;
return history.propagation;
}), {
type: 'bar',
negBarColor: '#7f7f7f',
zeroAxis: false,
barWidth : 2,
barSpacing : 1,
tooltipSuffix: ' ms',
chartRangeMax: 8000,
colorMap: jQuery.range_map({
'0:1': '#10a0de',
'1:1000': '#7bcc3a',
'1001:3000': '#FFD162',
'3001:7000': '#ff8a00',
'7001:': '#F74B4B'
})
});
}
function addNewNode(data)
{
var index = findIndex({id: data.id});

92
public/js/directives.js
View File

@@ -75,4 +75,96 @@ angular.module('netStatsApp.directives', []).
});
}
};
}]).
directive('histogram', ['$compile', function($compile) {
return {
restrict: 'EA',
scope: {
data: '='
},
link: function(scope, element, attrs) {
var margin = {top: 0, right: 0, bottom: 0, left: 5};
var width = 285 - margin.left - margin.right,
height = 173 - margin.top - margin.bottom;
var TICKS = 40;
var x = d3.scale.linear()
.domain([0, 20000])
.rangeRound([0, width])
.interpolate(d3.interpolateRound);
var y = d3.scale.linear()
.range([height, 0])
.interpolate(d3.interpolateRound);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4, ",.1s")
.tickFormat(function(t){ return t/1000 + "s"});
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(4);
var line = d3.svg.line()
.x(function(d) { return x(d.x + d.dx); })
.y(function(d) { return y(d.y); })
.interpolate('basis');
scope.init = function() {
var data = d3.layout.histogram()
.frequency(true)
.bins(x.ticks(TICKS))
(scope.data);
y.domain([0, d3.max(data, function(d) { return d.y; })]);
element.empty();
var svg = d3.select(".d3-blockpropagation").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
// .attr("transform", "translate(0,0)")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0, 0)")
// .attr("transform", "translate(" + width + ", 0)")
.call(yAxis);
svg.selectAll(".bar")
.data(data)
.enter().insert("rect", ".axis")
.attr("class", "bar")
.attr("x", function(d) { return x(d.x) + 1; })
.attr("y", function(d) { return y(d.y); })
.attr("rx", 1.5)
.attr("ry", 1.5)
.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
.attr("height", function(d) { return height - y(d.y); });
svg.append("path")
.attr("class", "line")
.attr("d", line(data));
}
scope.init();
scope.$watch('data', function() {
scope.init();
}, true);
}
};
}]);

5
public/js/filters.js
View File

@@ -50,6 +50,11 @@ angular.module('netStatsApp.filters', [])
tmp[0] = tmp[0].replace('Ethereum(++)', 'Eth');
if(tmp[0].indexOf('pyethapp') === 0)
{
tmp[0] = 'pyeth';
}
if(tmp[1][0] !== 'v' && tmp[1][2] !== '.')
{
tmp.splice(1,1);

56
public/js/script.js
View File

@@ -20,8 +20,56 @@
});
moment.relativeTimeThreshold('s', 60);
moment.relativeTimeThreshold('m', 60);
moment.relativeTimeThreshold('h', 24);
moment.relativeTimeThreshold('d', 28);
moment.relativeTimeThreshold('M', 12);
moment.relativeTimeThreshold('m', 60);
moment.relativeTimeThreshold('h', 24);
moment.relativeTimeThreshold('d', 28);
moment.relativeTimeThreshold('M', 12);
json = [4292,12436,13141,14268,14650,0,55,774,891,1045,1184,1520,1786,1819,2103,2523,2846,2895,3010,3219,13046,0,284,507,525,1410,1531,1673,1803,1978,2652,2961,4224,4863,5056,12281,0,561,812,903,2161,2210,2312,2450,2559,2725,3273,4559,4727,5868,7777,0,1621,6982,9008,14035,0,1181,2753,2782,3580,3945,5779,7936,21489,0,196,1587,1611,1648,2603,2998,3802,4265,4464,5323,5606,6551,9982,10417,0,884,989,1202,1247,1282,2297,2577,2735,2935,3288,4261,4652,4706,4855,6509];
// var data = lineData = d3.layout.histogram()
// .frequency(true)
// .bins(x.ticks(40))
// (json);
// y.domain([0, d3.max(data, function(d) { return d.y; })]);
/* Start drawing */
// d3.tsv("histogram.tsv", type, function(error, histogram) {
// var n = d3.sum(histogram, function(d) { return d.y = d.a; });
// y.domain([0, d3.max(histogram, function(d) { return d.y; })]);
// var bar = svg.insert("g", ".axis")
// .attr("class", "bar")
// .selectAll("g")
// .data(histogram)
// .enter().append("g")
// .attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; });
// bar.append("rect")
// .attr("class", "b")
// .attr("x", 1)
// .attr("y", function(d) { return y(d.b); })
// .attr("width", x(histogram[0].dx) - 1)
// .attr("height", function(d) { return height - y(d.b); });
// bar.append("rect")
// .attr("class", "a")
// .attr("x", 1)
// .attr("y", function(d) { return y(d.y); })
// .attr("width", x(histogram[0].dx) - 1)
// .attr("height", function(d) { return height - y(d.a); });
// bar.filter(function(d) { return d.y / n >= .0095; }).append("text")
// .attr("dy", ".015em")
// .attr("transform", function(d) { return "translate(" + x(histogram[0].dx) / 2 + "," + (y(1000) + 6) + ")rotate(-90)"; })
// // .attr("transform", function(d) { return "translate(" + x(histogram[0].dx) / 2 + "," + (y(d.y) + 6) + ")rotate(-90)"; })
// .text(function(d) { return formatPercent(d.y / n); });
// });
})();