Improvements to traffic graphs

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

View File

@@ -787,7 +787,8 @@ table thead th.sorting {
padding-left: 25px; padding-left: 25px;
} }
#chartdiv { .trafficchart {
height: 500px; height: 150px;
margin: 30px 60px; width: 100%;
margin: 15px 0 30px 0;
} }

View File

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

View File

@@ -2,44 +2,44 @@ $header
<article> <article>
<header> <header>
<h2> <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']} {$lng['menue']['traffic']['traffic']}
</h2> </h2>
</header> </header>
<section class="fullform bradiusodd">
<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded"> <form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
<fieldset> <table class="fullform bradius" id="datatable">
<legend>Froxlor&nbsp;-&nbsp;{$lng['menue']['traffic']['traffic']}</legend> <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>
<table class="formtable"> <div id="charts" style="display: none">
<tr> <h3>HTTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['http']})</h3>
<td>{$lng['traffic']['sumftp']}</td> <div id="httpchart" class="trafficchart" style="width:100%"></div>
<td>{$lng['traffic']['sumhttp']}</td> <h3>FTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['ftp']})</h3>
<td>{$lng['traffic']['summail']}</td> <div id="ftpchart" class="trafficchart" style="width:100%"></div>
</tr> <h3>Mail {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['mail']})</h3>
<tr> <div id="mailchart" class="trafficchart" style="width:100%"></div>
<td><div style="color:#019522;text-align:center">{$traffic_complete['ftp']}</div></td> </div>
<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>
</article> </article>
$footer $footer

View File

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

View File

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

View File

@@ -90,7 +90,7 @@ td a {
} }
.bradius { .bradius {
border-radius: 1px; border-radius: 3px;
box-shadow:rgba(0,0,0,0.34902) 0 1px 3px 0; box-shadow:rgba(0,0,0,0.34902) 0 1px 3px 0;
} }
@@ -929,9 +929,10 @@ label.nobr {
white-space:nowrap; white-space:nowrap;
} }
#chartdiv { .trafficchart {
height: 500px; height: 150px;
margin: 15px 0; width: 100%;
margin: 15px 0 30px 0;
} }
/* CANVAS STUFF */ /* CANVAS STUFF */
@@ -970,6 +971,10 @@ label.nobr {
white-space:nowrap; white-space:nowrap;
} }
.newsitem:last-child {
border: 0px;
}
.newsitem a { .newsitem a {
color:#333; color:#333;
line-height:12px; line-height:12px;

View File

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

View File

@@ -6,38 +6,43 @@ $header
{$lng['menue']['traffic']['traffic']} {$lng['menue']['traffic']['traffic']}
</h2> </h2>
</header> </header>
<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>
</fieldset>
</form>
<section> <div id="charts" style="display: none">
<h3>HTTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['http']})</h3>
<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded"> <div id="httpchart" class="trafficchart" style="width:100%"></div>
<fieldset> <h3>FTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['ftp']})</h3>
<table class="fullform bradius"> <div id="ftpchart" class="trafficchart" style="width:100%"></div>
<tr> <h3>Mail {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['mail']})</h3>
<th>{$lng['traffic']['sumftp']}</th> <div id="mailchart" class="trafficchart" style="width:100%"></div>
<th>{$lng['traffic']['sumhttp']}</th> </div>
<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>
</section>
<div id="chartdiv" style="width:100%"></div>
</article> </article>
$footer $footer

View File

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

View File

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