maketank/Froxlor
2
0
Fork 0
Code Pull Requests Releases Activity

Improvements to traffic graphs

Browse Source 
Signed-off-by: Roman Schmerold (BNoiZe) <bnoize@froxlor.org>
This commit is contained in:
Roman Schmerold (BNoiZe)
2013-12-27 14:13:38 +01:00
parent 1539ad1344
commit 5cb0256a58
10 changed files with 293 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
templates/Sparkle/assets/js/traffic.js vendored
View File

@@ -1,104 +1,93 @@
jQuery.fn.reverse = function() {
return this.pushStack(this.get().reverse(), arguments);
};
$(document).ready(function(){
var ticks = [];
var data = [];
$(document).ready(function() {
var ftp = [];
var http = [];
var mail = [];
var aticks = [];
var max = 0;
var i = 1;
var links = [];
$('#datalegend').remove();
$('#datatable tr').reverse().each(function() {
$('#datatable tbody tr').reverse().each(function() {
var row = $(this);
var day = $(row).children().first().text();
var ftpd = $(row).children().first().next().text();
var httpd = $(row).children().first().next().next().text();
var maild = $(row).children().first().next().next().next().text();
if ($(row).children().first().next().next().next().next().next().length > 0)
{
links.push($(row).children().last().html());
if ($(row).children().first().find("a").length > 0) {
links.push($(row).children().first().html());
}
ftp.push([i, parseFloat(ftpd) / 1024]);
http.push([i, parseFloat(httpd) / 1024]);
mail.push([i, parseFloat(maild) / 1024]);
aticks.push([i, day]);
if (ftpd > max)
{
max = ftpd;
}
if (httpd > max)
{
max = httpd;
}
if (maild > max)
{
max = maild;
}
ticks.push(day);
ftp.push([i, parseFloat(ftpd / 1024)]);
http.push([i, parseFloat(httpd / 1024)]);
mail.push([i, parseFloat(maild)]);
i++;
});
$('#datatable').hide();
data.push(ftp);
data.push(http);
data.push(mail);
if (links.length > 0)
{
var tmp = $('<div />', {id: 'linkslist'});
$('#charts').show();
if (links.length > 0) {
var tmp = $('<div />', {
id: 'linkslist'
});
$.each(links, function(i, link) {
tmp.append(link);
if (i != links.length - 1)
{
if (i != links.length - 1) {
tmp.append('&nbsp;|&nbsp;');
}
});
tmp.append('<br /><br /><br />');
tmp.insertBefore($('#datatable'));
}
var dataset = [
{
label: 'FTP',
data: ftp,
color: '#019522'
},
{
label: 'HTTP',
data: http,
color: '#0000FF'
},
{
label: 'Mail',
data: mail,
color: '#800000'
}
];
var ftpdata = [{
label: 'FTP',
data: ftp,
color: '#019522'
}];
var httpdata = [{
label: 'HTTP',
data: http,
color: '#0000FF'
}];
var maildata = [{
label: 'Mail',
data: mail,
color: '#800000'
}];
var options = {
series: {
shadowSize: 0,
curvedLines: { active: true, apply: false, fitPointDist: true },
curvedLines: {
active: true,
apply: false,
fitPointDist: true
}
},
lines: {
show: true
},
points: {
radius: 2,
show: true
},
radius: 2,
show: true
},
legend: {
show: false
},
grid: {
hoverable: true,
borderWidth: 0
},
xaxis: {
tickSize: 1,
tickLength: 0
},
yaxis: {
tickColor: '#eee'
}
}
var flot1 = $.plot('#chartdiv', dataset, options);
};
$.plot('#ftpchart', ftpdata, options);
$.plot('#httpchart', httpdata, options);
$.plot('#mailchart', maildata, options);
$("<div id='tooltip'></div>").css({
position: "absolute",
@@ -109,19 +98,30 @@ $(document).ready(function(){
color: "#fff",
"font-size": "11px"
}).appendTo("body");
$("#chartdiv").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(3),
y = item.datapoint[1].toFixed(3);
$("#tooltip").html(item.series.label + ": " + y + " GiB")
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
$("#ftpchart, #httpchart").bind("plothover", function(event, pos, item) {
if (item) {
var y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + ": " + y + " GiB").css({
top: item.pageY + 5,
left: item.pageX - $("#tooltip").width() / 2
}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});
});
$("#mailchart").bind("plothover", function(event, pos, item) {
if (item) {
var y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + ": " + y + " MiB").css({
top: item.pageY + 5,
left: item.pageX - $("#tooltip").width() / 2
}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});
});