From 5cb0256a58aff8f3342a65f26deb2bfd65366a0e Mon Sep 17 00:00:00 2001 From: "Roman Schmerold (BNoiZe)" Date: Fri, 27 Dec 2013 14:13:38 +0100 Subject: [PATCH] Improvements to traffic graphs Signed-off-by: Roman Schmerold (BNoiZe) --- templates/Froxlor/assets/css/main.css | 7 +- templates/Froxlor/assets/js/traffic.js | 143 +++++++++-------- .../Froxlor/customer/traffic/traffic.tpl | 68 ++++---- .../customer/traffic/traffic_details.tpl | 65 ++++---- .../customer/traffic/traffic_traffic.tpl | 5 +- templates/Sparkle/assets/css/main.css | 13 +- templates/Sparkle/assets/js/traffic.js | 146 +++++++++--------- .../Sparkle/customer/traffic/traffic.tpl | 69 +++++---- .../customer/traffic/traffic_details.tpl | 66 ++++---- .../customer/traffic/traffic_traffic.tpl | 5 +- 10 files changed, 293 insertions(+), 294 deletions(-) diff --git a/templates/Froxlor/assets/css/main.css b/templates/Froxlor/assets/css/main.css index 6433f281..f47f0f8e 100644 --- a/templates/Froxlor/assets/css/main.css +++ b/templates/Froxlor/assets/css/main.css @@ -787,7 +787,8 @@ table thead th.sorting { padding-left: 25px; } -#chartdiv { - height: 500px; - margin: 30px 60px; +.trafficchart { + height: 150px; + width: 100%; + margin: 15px 0 30px 0; } \ No newline at end of file diff --git a/templates/Froxlor/assets/js/traffic.js b/templates/Froxlor/assets/js/traffic.js index b956ed78..b977738a 100644 --- a/templates/Froxlor/assets/js/traffic.js +++ b/templates/Froxlor/assets/js/traffic.js @@ -1,104 +1,88 @@ 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 = $('
', {id: 'linkslist'}); + $('#charts').show(); + if (links.length > 0) { + var tmp = $('
', { + id: 'linkslist' + }); $.each(links, function(i, link) { tmp.append(link); - if (i != links.length - 1) - { + if (i != links.length - 1) { tmp.append(' | '); } }); + tmp.append('


'); 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 }, + shadowSize: 0 }, 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); $("
").css({ position: "absolute", @@ -109,19 +93,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(); + } + }); }); - diff --git a/templates/Froxlor/customer/traffic/traffic.tpl b/templates/Froxlor/customer/traffic/traffic.tpl index 169c2c1c..b947cc65 100644 --- a/templates/Froxlor/customer/traffic/traffic.tpl +++ b/templates/Froxlor/customer/traffic/traffic.tpl @@ -2,44 +2,44 @@ $header

- {$lng['menue']['traffic']['traffic']}  + {$lng['menue']['traffic']['traffic']}  {$lng['menue']['traffic']['traffic']}

- -
-
-
- Froxlor - {$lng['menue']['traffic']['traffic']} + + + + + + + + + + + + + $traffic + + + + + + + + + + +
{$lng['traffic']['month']}{$lng['traffic']['ftp']}{$lng['traffic']['http']}{$lng['traffic']['mail']}{$lng['customer']['traffic']}
{$lng['traffic']['months']['total']}{$traffic_complete['ftp']}{$traffic_complete['http']}{$traffic_complete['mail']}
+ - - - - - - - - - - - -
{$lng['traffic']['sumftp']}{$lng['traffic']['sumhttp']}{$lng['traffic']['summail']}
{$traffic_complete['ftp']}
{$traffic_complete['http']}
{$traffic_complete['mail']}
- - - - - - - - - - $traffic -
{$lng['traffic']['month']}{$lng['traffic']['ftp']}{$lng['traffic']['http']}{$lng['traffic']['mail']}{$lng['customer']['traffic']}
- -
- -
-
+
$footer diff --git a/templates/Froxlor/customer/traffic/traffic_details.tpl b/templates/Froxlor/customer/traffic/traffic_details.tpl index 5d21564a..bb0612f0 100644 --- a/templates/Froxlor/customer/traffic/traffic_details.tpl +++ b/templates/Froxlor/customer/traffic/traffic_details.tpl @@ -2,42 +2,41 @@ $header

- {$lng['menue']['traffic']['traffic']}  + {$lng['menue']['traffic']['traffic']}  {$lng['menue']['traffic']['traffic']} $show

-
- -
-
- Froxlor - {$lng['menue']['traffic']['traffic']} $show - - - - - - - - - - - - -
{$lng['traffic']['sumftp']}{$lng['traffic']['sumhttp']}{$lng['traffic']['summail']}
{$traffic_complete['ftp']}
{$traffic_complete['http']}
{$traffic_complete['mail']}
- - - - - - - - - $traffic -
{$lng['traffic']['day']}{$lng['traffic']['ftp']}{$lng['traffic']['http']}{$lng['traffic']['mail']}{$lng['traffic']['mb']}
-
-
-
-
+ + + + + + + + + + + + + + + + + + + + + $traffic + +
{$lng['traffic']['day']}{$lng['traffic']['ftp']}{$lng['traffic']['http']}{$lng['traffic']['mail']}{$lng['traffic']['mb']}
{$lng['traffic']['months']['total']}{$traffic_complete['ftp']}{$traffic_complete['http']}{$traffic_complete['mail']} 
+
$footer diff --git a/templates/Froxlor/customer/traffic/traffic_traffic.tpl b/templates/Froxlor/customer/traffic/traffic_traffic.tpl index ec87070d..89ec750b 100644 --- a/templates/Froxlor/customer/traffic/traffic_traffic.tpl +++ b/templates/Froxlor/customer/traffic/traffic_traffic.tpl @@ -1,8 +1,7 @@ - {$traf['monthname']} + {$traf['monthname']} {$traf['ftp']} {$traf['http']} {$traf['mail']} - {$traf['byte']} - {$traf['monthname']} + {$traf['byte']} diff --git a/templates/Sparkle/assets/css/main.css b/templates/Sparkle/assets/css/main.css index 6108ffb9..7afe0bed 100644 --- a/templates/Sparkle/assets/css/main.css +++ b/templates/Sparkle/assets/css/main.css @@ -90,7 +90,7 @@ td a { } .bradius { - border-radius: 1px; + border-radius: 3px; box-shadow:rgba(0,0,0,0.34902) 0 1px 3px 0; } @@ -929,9 +929,10 @@ label.nobr { white-space:nowrap; } -#chartdiv { - height: 500px; - margin: 15px 0; +.trafficchart { + height: 150px; + width: 100%; + margin: 15px 0 30px 0; } /* CANVAS STUFF */ @@ -970,6 +971,10 @@ label.nobr { white-space:nowrap; } +.newsitem:last-child { + border: 0px; +} + .newsitem a { color:#333; line-height:12px; diff --git a/templates/Sparkle/assets/js/traffic.js b/templates/Sparkle/assets/js/traffic.js index b956ed78..5fdf2712 100644 --- a/templates/Sparkle/assets/js/traffic.js +++ b/templates/Sparkle/assets/js/traffic.js @@ -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 = $('
', {id: 'linkslist'}); + $('#charts').show(); + if (links.length > 0) { + var tmp = $('
', { + id: 'linkslist' + }); $.each(links, function(i, link) { tmp.append(link); - if (i != links.length - 1) - { + if (i != links.length - 1) { tmp.append(' | '); } }); + tmp.append('


'); 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); $("
").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(); + } + }); }); - diff --git a/templates/Sparkle/customer/traffic/traffic.tpl b/templates/Sparkle/customer/traffic/traffic.tpl index f3a2dfde..0bad257c 100644 --- a/templates/Sparkle/customer/traffic/traffic.tpl +++ b/templates/Sparkle/customer/traffic/traffic.tpl @@ -6,38 +6,43 @@ $header {$lng['menue']['traffic']['traffic']} + +
+
+ + + + + + + + + + + $traffic + + + + + + + + + + +
{$lng['traffic']['month']} + {$lng['traffic']['ftp']}{$lng['traffic']['http']}{$lng['traffic']['mail']}{$lng['customer']['traffic']}
{$lng['traffic']['months']['total']}{$traffic_complete['ftp']}{$traffic_complete['http']}{$traffic_complete['mail']}
+ +
+
-
- -
-
- - - - - - - - - - - -
{$lng['traffic']['sumftp']}{$lng['traffic']['sumhttp']}{$lng['traffic']['summail']}
{$traffic_complete['ftp']}
{$traffic_complete['http']}
{$traffic_complete['mail']}

- - - - - - - - - $traffic -
{$lng['traffic']['month']} - {$lng['traffic']['ftp']}{$lng['traffic']['http']}{$lng['traffic']['mail']}{$lng['customer']['traffic']}
- -
-
-
-
+ $footer diff --git a/templates/Sparkle/customer/traffic/traffic_details.tpl b/templates/Sparkle/customer/traffic/traffic_details.tpl index 9ee75d26..aa869d1a 100644 --- a/templates/Sparkle/customer/traffic/traffic_details.tpl +++ b/templates/Sparkle/customer/traffic/traffic_details.tpl @@ -7,40 +7,36 @@ $header -
- -
-
- Froxlor - {$lng['menue']['traffic']['traffic']} $show - - - - - - - - - - - - - - -
{$lng['traffic']['sumftp']}{$lng['traffic']['sumhttp']}{$lng['traffic']['summail']}
{$traffic_complete['ftp']}
{$traffic_complete['http']}
{$traffic_complete['mail']}
- - - - - - - - - $traffic -
{$lng['traffic']['day']}{$lng['traffic']['ftp']}{$lng['traffic']['http']}{$lng['traffic']['mail']}{$lng['traffic']['mb']}
-
-
-
-
-
+ + + + + + + + + + + + + + + + + + + + + $traffic + +
{$lng['traffic']['day']}{$lng['traffic']['ftp']}{$lng['traffic']['http']}{$lng['traffic']['mail']}{$lng['traffic']['mb']}
{$lng['traffic']['months']['total']}{$traffic_complete['ftp']}{$traffic_complete['http']}{$traffic_complete['mail']} 
+ $footer diff --git a/templates/Sparkle/customer/traffic/traffic_traffic.tpl b/templates/Sparkle/customer/traffic/traffic_traffic.tpl index ec87070d..89ec750b 100644 --- a/templates/Sparkle/customer/traffic/traffic_traffic.tpl +++ b/templates/Sparkle/customer/traffic/traffic_traffic.tpl @@ -1,8 +1,7 @@ - {$traf['monthname']} + {$traf['monthname']} {$traf['ftp']} {$traf['http']} {$traf['mail']} - {$traf['byte']} - {$traf['monthname']} + {$traf['byte']}