ethstats-server/public/js/directives.js

208 lines
5.3 KiB
JavaScript
Raw Normal View History

2015-01-20 19:29:31 +01:00
'use strict';
/* Directives */
angular.module('netStatsApp.directives', []).
directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
2015-02-08 16:03:05 +01:00
}]).
directive('nodemap', ['$compile', function($compile) {
return {
restrict: 'EA',
scope: {
data: '='
},
link: function(scope, element, attrs) {
2015-04-17 02:12:15 +02:00
var bubbleConfig = {
borderWidth: 0,
highlightOnHover: false,
popupOnHover: true,
popupTemplate: function(geo, data) {
return ['<div class="tooltip-arrow"></div><div class="hoverinfo ' + data.fillClass + '"><div class="propagationBox"></div><strong>',
data.nodeName,
'</strong></div>'].join('');
}
};
2015-02-08 16:20:43 +01:00
scope.init = function() {
element.empty();
scope.map = new Datamap({
element: element[0],
scope: 'world',
responsive: true,
fills: {
2015-04-17 02:12:15 +02:00
success: '#7BCC3A',
info: '#10A0DE',
2015-02-08 16:20:43 +01:00
warning: '#FFD162',
2015-04-17 02:12:15 +02:00
orange: '#FF8A00',
2015-02-08 16:20:43 +01:00
danger: '#F74B4B',
defaultFill: '#282828'
},
geographyConfig: {
borderWidth: 0,
borderColor: '#000',
highlightOnHover: false,
popupOnHover: false
},
bubblesConfig: {
borderWidth: 0,
2015-04-17 02:12:15 +02:00
highlightOnHover: false,
popupOnHover: true
2015-02-08 16:20:43 +01:00
}
});
2015-04-17 02:12:15 +02:00
scope.map.bubbles(scope.data, bubbleConfig);
2015-02-08 16:20:43 +01:00
}
scope.init();
2015-02-08 16:03:05 +01:00
2015-02-08 16:20:43 +01:00
window.onresize = function() {
scope.$apply();
};
2015-02-08 16:03:05 +01:00
scope.$watch('data', function() {
2015-04-17 02:12:15 +02:00
scope.map.bubbles(scope.data, bubbleConfig);
2015-02-08 16:03:05 +01:00
}, true);
2015-02-08 16:20:43 +01:00
scope.$watch(function() {
return angular.element(window)[0].innerWidth;
}, function() {
scope.init();
});
2015-02-08 16:03:05 +01:00
}
};
2015-04-23 15:17:31 +02:00
}]).
directive('histogram', ['$compile', function($compile) {
return {
restrict: 'EA',
scope: {
data: '='
},
link: function(scope, element, attrs) {
2015-04-23 16:03:14 +02:00
var margin = {top: 0, right: 0, bottom: 0, left: 0};
var width = 280 - margin.left - margin.right,
2015-04-23 15:17:31 +02:00
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);
2015-04-23 20:24:01 +02:00
var color = d3.scale.linear()
.domain([1000, 3000, 7000, 10000, 20000])
.range(["#7bcc3a", "#FFD162", "#ff8a00", "#F74B4B", "#CC0000"]);
2015-04-23 15:17:31 +02:00
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")
2015-04-23 16:03:14 +02:00
.ticks(4)
.tickFormat(d3.format("%"));
2015-04-23 15:17:31 +02:00
var line = d3.svg.line()
.x(function(d) { return x(d.x + d.dx/2) - 1; })
2015-04-23 20:24:01 +02:00
.y(function(d) { return y(d.y) - 2; })
2015-04-23 15:17:31 +02:00
.interpolate('basis');
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.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>";
})
2015-04-23 16:03:14 +02:00
scope.init = function()
{
// Init data
2015-04-23 15:17:31 +02:00
var data = d3.layout.histogram()
2015-04-23 16:03:14 +02:00
.frequency(false)
.bins(x.ticks(TICKS))
(scope.data);
2015-04-23 15:17:31 +02:00
2015-04-23 16:03:14 +02:00
// Adjust y axis
2015-04-23 15:17:31 +02:00
y.domain([0, d3.max(data, function(d) { return d.y; })]);
2015-04-23 16:03:14 +02:00
// Delete previous histogram
2015-04-23 15:17:31 +02:00
element.empty();
2015-04-23 16:03:14 +02:00
/* Start drawing */
2015-04-23 15:17:31 +02:00
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.call(tip);
2015-04-23 15:17:31 +02:00
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
2015-04-23 16:03:14 +02:00
.attr("transform", "translate(" + width + ", 0)")
2015-04-23 15:17:31 +02:00
.call(yAxis);
2015-04-23 20:24:01 +02:00
var bar = svg.append("g")
.attr("class", "bars")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; })
2015-04-23 20:24:01 +02:00
.on('mouseover', function(d) { tip.show(d, d3.select(this).select('.bar').node()); })
.on('mouseout', tip.hide);
bar.insert("rect")
.attr("class", "handle")
.attr("y", 0)
.attr("width", x(data[0].dx + data[0].x) - x(data[0].x))
.attr("height", function(d) { return height; });
bar.insert("rect")
2015-04-23 15:17:31 +02:00
.attr("class", "bar")
.attr("y", function(d) { return y(d.y); })
.attr("rx", 1.2)
.attr("ry", 1.2)
2015-04-23 20:24:01 +02:00
.attr("fill", function(d) { return color(d.x); })
.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
.attr("height", function(d) { return height - y(d.y) + 1; });
bar.insert("rect")
.attr("class", "highlight")
2015-04-23 15:17:31 +02:00
.attr("y", function(d) { return y(d.y); })
2015-04-23 20:24:01 +02:00
.attr("fill", function(d) { return d3.rgb(color(d.x)).brighter(.7).toString(); })
2015-04-23 16:03:14 +02:00
.attr("rx", 1)
.attr("ry", 1)
2015-04-23 15:17:31 +02:00
.attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
2015-04-23 20:24:01 +02:00
.attr("height", function(d) { return height - y(d.y) + 1; });
2015-04-23 15:17:31 +02:00
svg.append("path")
.attr("class", "line")
.attr("d", line(data));
}
scope.init();
scope.$watch('data', function() {
scope.init();
}, true);
}
};
2015-02-08 16:03:05 +01:00
}]);