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

7
templates/Froxlor/assets/css/main.css
View File

@@ -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;
}

129
templates/Froxlor/assets/js/traffic.js
View File

@@ -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 = $('<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 },
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);
$("<div id='tooltip'></div>").css({
position: "absolute",
@@ -110,18 +94,29 @@ $(document).ready(function(){
"font-size": "11px"
}).appendTo("body");
$("#chartdiv").bind("plothover", function (event, pos, item) {
$("#ftpchart, #httpchart").bind("plothover", function(event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(3),
y = item.datapoint[1].toFixed(3);
var y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + ": " + y + " GiB")
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
$("#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();
}
});
});

68
templates/Froxlor/customer/traffic/traffic.tpl
View File

@@ -2,44 +2,44 @@ $header
<article>
<header>
<h2>
<img src="templates/{$theme}/assets/img/icons/traffic.png" alt="{$lng['menue']['traffic']['traffic']}" />&nbsp;
<img src="templates/{$theme}/assets/img/icons/traffic_big.png" alt="{$lng['menue']['traffic']['traffic']}" />&nbsp;
{$lng['menue']['traffic']['traffic']}
</h2>
</header>
<section class="fullform bradiusodd">
<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
<table class="fullform bradius" id="datatable">
<thead>
<tr>
<th>{$lng['traffic']['month']}</th>
<th>{$lng['traffic']['ftp']}</th>
<th>{$lng['traffic']['http']}</th>
<th>{$lng['traffic']['mail']}</th>
<th class="text-align:right;">{$lng['customer']['traffic']}</th>
</tr>
</thead>
<tbody>
$traffic
</tbody>
<tfoot>
<tr>
<td>{$lng['traffic']['months']['total']}</td>
<td>{$traffic_complete['ftp']}</td>
<td>{$traffic_complete['http']}</td>
<td>{$traffic_complete['mail']}</td>
<td></td>
</tr>
</tfoot>
</table>
</form>
<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
<fieldset>
<legend>Froxlor&nbsp;-&nbsp;{$lng['menue']['traffic']['traffic']}</legend>
<table class="formtable">
<tr>
<td>{$lng['traffic']['sumftp']}</td>
<td>{$lng['traffic']['sumhttp']}</td>
<td>{$lng['traffic']['summail']}</td>
</tr>
<tr>
<td><div style="color:#019522;text-align:center">{$traffic_complete['ftp']}</div></td>
<td><div style="color:#0000FF;text-align:center">{$traffic_complete['http']}</div></td>
<td><div style="color:#800000;text-align:center">{$traffic_complete['mail']}</div></td>
</tr>
</table>
<table class="formtable" id="datatable">
<tr id="datalegend">
<td>{$lng['traffic']['month']}</td>
<td>{$lng['traffic']['ftp']}</td>
<td>{$lng['traffic']['http']}</td>
<td>{$lng['traffic']['mail']}</td>
<td class="text-align:right;">{$lng['customer']['traffic']}</td>
<td></td>
</tr>
$traffic
</table>
</fieldset>
</form>
</section>
<div id="chartdiv"></div>
<div id="charts" style="display: none">
<h3>HTTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['http']})</h3>
<div id="httpchart" class="trafficchart" style="width:100%"></div>
<h3>FTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['ftp']})</h3>
<div id="ftpchart" class="trafficchart" style="width:100%"></div>
<h3>Mail {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['mail']})</h3>
<div id="mailchart" class="trafficchart" style="width:100%"></div>
</div>
</article>
$footer

65
templates/Froxlor/customer/traffic/traffic_details.tpl
View File

@@ -2,42 +2,41 @@ $header
<article>
<header>
<h2>
<img src="templates/{$theme}/assets/img/icons/traffic.png" alt="{$lng['menue']['traffic']['traffic']}" />&nbsp;
<img src="templates/{$theme}/assets/img/icons/traffic_big.png" alt="{$lng['menue']['traffic']['traffic']}" />&nbsp;
{$lng['menue']['traffic']['traffic']} $show
</h2>
</header>
<section class="fullform bradiusodd">
<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
<fieldset>
<legend>Froxlor&nbsp;-&nbsp;{$lng['menue']['traffic']['traffic']} $show</legend>
<table class="formtable">
<tr>
<td>{$lng['traffic']['sumftp']}</td>
<td>{$lng['traffic']['sumhttp']}</td>
<td>{$lng['traffic']['summail']}</td>
</tr>
<tr>
<td><div style="color:#019522;text-align:center">{$traffic_complete['ftp']}</div></td>
<td><div style="color:#0000FF;text-align:center">{$traffic_complete['http']}</div></td>
<td><div style="color:#800000;text-align:center">{$traffic_complete['mail']}</div></td>
</tr>
</table>
<table class="formtable" id="datatable">
<tr id="datalegend">
<td>{$lng['traffic']['day']}</td>
<td>{$lng['traffic']['ftp']}</td>
<td>{$lng['traffic']['http']}</td>
<td>{$lng['traffic']['mail']}</td>
<td>{$lng['traffic']['mb']}</td>
</tr>
$traffic
</table>
</fieldset>
</form>
</section>
<div id="chartdiv"></div>
<table class="bradius" id="datatable">
<thead>
<tr>
<th>{$lng['traffic']['day']}</th>
<th>{$lng['traffic']['ftp']}</th>
<th>{$lng['traffic']['http']}</th>
<th>{$lng['traffic']['mail']}</th>
<th>{$lng['traffic']['mb']}</th>
</tr>
</thead>
<tfoot>
<tr>
<td>{$lng['traffic']['months']['total']}</td>
<td>{$traffic_complete['ftp']}</td>
<td>{$traffic_complete['http']}</td>
<td>{$traffic_complete['mail']}</td>
<td>&nbsp;</td>
</tr>
</tfoot>
<tbody>
$traffic
</tbody>
</table>
<div id="charts" style="display: none">
<h3>HTTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['http']})</h3>
<div id="httpchart" class="trafficchart"></div>
<h3>FTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['ftp']})</h3>
<div id="ftpchart" class="trafficchart"></div>
<h3>Mail {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['mail']})</h3>
<div id="mailchart" class="trafficchart"></div>
</div>
</article>
$footer

5
templates/Froxlor/customer/traffic/traffic_traffic.tpl
View File

@@ -1,8 +1,7 @@
<tr>
<td>{$traf['monthname']}</td>
<td><a href="{$linker->getLink(array('section' => 'traffic', 'month' => $traf['month'], 'year' => $traf['year']))}">{$traf['monthname']}</a></td>
<td>{$traf['ftp']}</td>
<td>{$traf['http']}</td>
<td>{$traf['mail']}</td>
<td style="text-align:right; width:70px;">{$traf['byte']}</td>
<td><a href="{$linker->getLink(array('section' => 'traffic', 'month' => $traf['month'], 'year' => $traf['year']))}">{$traf['monthname']}</a></td>
<td>{$traf['byte']}</td>
</tr>

13
templates/Sparkle/assets/css/main.css vendored
View File

@@ -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;

132
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",
@@ -110,18 +99,29 @@ $(document).ready(function(){
"font-size": "11px"
}).appendTo("body");
$("#chartdiv").bind("plothover", function (event, pos, item) {
$("#ftpchart, #httpchart").bind("plothover", function(event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(3),
y = item.datapoint[1].toFixed(3);
var y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + ": " + y + " GiB")
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
$("#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();
}
});
});

65
templates/Sparkle/customer/traffic/traffic.tpl vendored
View File

@@ -7,37 +7,42 @@ $header
</h2>
</header>
<section>
<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
<fieldset>
<table class="fullform bradius" id="datatable">
<thead>
<tr>
<th>{$lng['traffic']['month']}</td>
<th>{$lng['traffic']['ftp']}</th>
<th>{$lng['traffic']['http']}</th>
<th>{$lng['traffic']['mail']}</th>
<th class="text-align:right;">{$lng['customer']['traffic']}</th>
</tr>
</thead>
<tbody>
$traffic
</tbody>
<tfoot>
<tr>
<td>{$lng['traffic']['months']['total']}</td>
<td>{$traffic_complete['ftp']}</td>
<td>{$traffic_complete['http']}</td>
<td>{$traffic_complete['mail']}</td>
<td></td>
</tr>
</tfoot>
</table>
<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
<fieldset>
<table class="fullform bradius">
<tr>
<th>{$lng['traffic']['sumftp']}</th>
<th>{$lng['traffic']['sumhttp']}</th>
<th>{$lng['traffic']['summail']}</th>
</tr>
<tr>
<td><div style="color:#019522;">{$traffic_complete['ftp']}</div></td>
<td><div style="color:#0000FF;">{$traffic_complete['http']}</div></td>
<td><div style="color:#800000;">{$traffic_complete['mail']}</div></td>
</tr>
</table><br />
<table class="fullform bradius" id="datatable">
<tr id="datalegend">
<th>{$lng['traffic']['month']}</td>
<th>{$lng['traffic']['ftp']}</th>
<th>{$lng['traffic']['http']}</th>
<th>{$lng['traffic']['mail']}</th>
<th class="text-align:right;">{$lng['customer']['traffic']}</th>
<th></th>
</tr>
$traffic
</table>
</fieldset>
</form>
</fieldset>
</form>
</section>
<div id="chartdiv" style="width:100%"></div>
<div id="charts" style="display: none">
<h3>HTTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['http']})</h3>
<div id="httpchart" class="trafficchart" style="width:100%"></div>
<h3>FTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['ftp']})</h3>
<div id="ftpchart" class="trafficchart" style="width:100%"></div>
<h3>Mail {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['mail']})</h3>
<div id="mailchart" class="trafficchart" style="width:100%"></div>
</div>
</article>
$footer

66
templates/Sparkle/customer/traffic/traffic_details.tpl vendored
View File

@@ -7,40 +7,36 @@ $header
</h2>
</header>
<section class="fullform bradius">
<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
<fieldset>
<legend>Froxlor&nbsp;-&nbsp;{$lng['menue']['traffic']['traffic']} $show</legend>
<table class="formtable">
<thead>
<tr>
<th>{$lng['traffic']['sumftp']}</th>
<th>{$lng['traffic']['sumhttp']}</th>
<th>{$lng['traffic']['summail']}</th>
</tr>
</thead>
<tr>
<td><div style="color:#019522;text-align:center">{$traffic_complete['ftp']}</div></td>
<td><div style="color:#0000FF;text-align:center">{$traffic_complete['http']}</div></td>
<td><div style="color:#800000;text-align:center">{$traffic_complete['mail']}</div></td>
</tr>
</table>
<table class="formtable" id="datatable">
<tr id="datalegend">
<td>{$lng['traffic']['day']}</td>
<td>{$lng['traffic']['ftp']}</td>
<td>{$lng['traffic']['http']}</td>
<td>{$lng['traffic']['mail']}</td>
<td>{$lng['traffic']['mb']}</td>
</tr>
$traffic
</table>
</fieldset>
</form>
</section>
<br />
<div id="chartdiv" style="width:100%"></div>
<table class="bradius" id="datatable">
<thead>
<tr>
<th>{$lng['traffic']['day']}</th>
<th>{$lng['traffic']['ftp']}</th>
<th>{$lng['traffic']['http']}</th>
<th>{$lng['traffic']['mail']}</th>
<th>{$lng['traffic']['mb']}</th>
</tr>
</thead>
<tfoot>
<tr>
<td>{$lng['traffic']['months']['total']}</td>
<td>{$traffic_complete['ftp']}</td>
<td>{$traffic_complete['http']}</td>
<td>{$traffic_complete['mail']}</td>
<td>&nbsp;</td>
</tr>
</tfoot>
<tbody>
$traffic
</tbody>
</table>
<div id="charts" style="display: none">
<h3>HTTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['http']})</h3>
<div id="httpchart" class="trafficchart"></div>
<h3>FTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['ftp']})</h3>
<div id="ftpchart" class="trafficchart"></div>
<h3>Mail {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['mail']})</h3>
<div id="mailchart" class="trafficchart"></div>
</div>
</article>
$footer

5
templates/Sparkle/customer/traffic/traffic_traffic.tpl vendored
View File

@@ -1,8 +1,7 @@
<tr>
<td>{$traf['monthname']}</td>
<td><a href="{$linker->getLink(array('section' => 'traffic', 'month' => $traf['month'], 'year' => $traf['year']))}">{$traf['monthname']}</a></td>
<td>{$traf['ftp']}</td>
<td>{$traf['http']}</td>
<td>{$traf['mail']}</td>
<td style="text-align:right; width:70px;">{$traf['byte']}</td>
<td><a href="{$linker->getLink(array('section' => 'traffic', 'month' => $traf['month'], 'year' => $traf['year']))}">{$traf['monthname']}</a></td>
<td>{$traf['byte']}</td>
</tr>