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

Merge branch 'master' of github.com:Froxlor/Froxlor

Browse Source
This commit is contained in:
Michael Kaufmann (d00p)
2013-12-19 07:55:48 +01:00
parent 7267c2dec9 c7d00d4d11
commit ec59d3a8e8
37 changed files with 177 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,7 @@ $(document).ready(function(){
var ftp = [];
var http = [];
var mail = [];
var aticks = [];
var max = 0;
var i = 1;
var links = [];
@@ -21,9 +22,10 @@ $(document).ready(function(){
{
links.push($(row).children().last().html());
}
ftp.push([parseFloat(ftpd), i]);
http.push([parseFloat(httpd), i]);
mail.push([parseFloat(maild), i]);
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;
@@ -40,7 +42,6 @@ $(document).ready(function(){
i++;
});
$('#datatable').hide();
$('#chartdiv').height(parseFloat(i) * 50);
data.push(ftp);
data.push(http);
data.push(mail);
@@ -56,32 +57,71 @@ $(document).ready(function(){
});
tmp.insertBefore($('#datatable'));
}
var plot2 = $.jqplot('chartdiv', data, {
stackSeries: false,
captureRightClick: true,
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal',
highlightMouseOver: true,
}
var dataset = [
{
label: 'FTP',
data: ftp,
color: '#019522'
},
series: [
{color: '#019522'},
{color: '#0000FF'},
{color: '#800000'}
],
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
xaxis: {
min: 0,
},
{
label: 'HTTP',
data: http,
color: '#0000FF'
},
})
{
label: 'Mail',
data: mail,
color: '#800000'
}
];
var options = {
series: {
shadowSize: 0,
curvedLines: { active: true, apply: false, fitPointDist: true },
},
lines: {
show: true
},
points: {
radius: 2,
show: true
},
legend: {
show: false
},
grid: {
hoverable: true,
borderWidth: 0
}
}
var flot1 = $.plot('#chartdiv', dataset, options);
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
padding: "4px 8px",
"background-color": "#000",
opacity: 0.85,
color: "#fff",
"font-size": "11px"
}).appendTo("body");
$("#chartdiv").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + ": " + y + " GiB")
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
});

6
templates/Froxlor/header.tpl
View File

@@ -12,11 +12,7 @@
<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
<if isset($intrafficpage)>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="js/jquery.flot.min.js"></script>
<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/traffic.js"></script>
</if>
<if Settings::Get('panel.use_webfonts') == '1'>

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

@@ -57,56 +57,71 @@ $(document).ready(function(){
});
tmp.insertBefore($('#datatable'));
}
//alert(ftp);
var plot2 = $.jqplot('chartdiv', [ftp, http, mail], {
series: [
{
lineWidth:1,
color: '#019522',
label: 'FTP',
markerOptions: { style:"circle", size: 5, shadow: false },
rendererOptions: { smooth: true },
pointLabels: { show:true, formatString: "%#.2f" }
},
{
lineWidth:1,
color: '#0000FF',
label: 'HTTP',
markerOptions: { style:"circle", size: 5, shadow: false },
rendererOptions: { smooth: true },
pointLabels: { show:true, formatString: "%#.2f" }
},
{
lineWidth:1,
color: '#800000',
label: 'Mail',
markerOptions: { style: "circle", size: 5, shadow: false },
rendererOptions: { smooth: true },
pointLabels: { show:true, formatString: "%#.2f" }
}
],
axes: {
yaxis: {
min: 0,
numberTicks: 5,
rendererOptions: {drawBaseline: false}
},
xaxis: {
tickOptions:{
showGridline: false
},
pad: 0,
ticks: aticks
},
var dataset = [
{
label: 'FTP',
data: ftp,
color: '#019522'
},
{
label: 'HTTP',
data: http,
color: '#0000FF'
},
{
label: 'Mail',
data: mail,
color: '#800000'
}
];
var options = {
series: {
shadowSize: 0,
curvedLines: { active: true, apply: false, fitPointDist: true },
},
lines: {
show: true
},
points: {
radius: 2,
show: true
},
legend: {
show: false
},
grid: {
show: false,
background: '#fff',
gridLineColor: '#e2e4e6',
borderWidth: 0,
shadow: false
hoverable: true,
borderWidth: 0
}
});
}
var flot1 = $.plot('#chartdiv', dataset, options);
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
padding: "4px 8px",
"background-color": "#000",
opacity: 0.85,
color: "#fff",
"font-size": "11px"
}).appendTo("body");
$("#chartdiv").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + ": " + y + " GiB")
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
});

6
templates/Sparkle/header.tpl vendored
View File

@@ -12,11 +12,7 @@
<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
<if isset($intrafficpage)>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="js/jquery.flot.min.js"></script>
<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/traffic.js"></script>
</if>
<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/tipper.min.js"></script>