//web/acc/manager/vnstat/templates_c/0d0c6b8d28b17c4ffaf65435e1e6cc17f87d6e6d_0.file.module_graph_js.tpl.php |
---|
File deleted |
//web/acc/manager/vnstat/templates_c/2f5e32e2f04fabdfea23a29aa98d7ff7e7a2fbf4_0.file.module_table.tpl.php |
---|
File deleted |
//web/acc/manager/vnstat/templates_c/5a392efaa6cf5a3bce2bfeb15f87c356ee77a3c2_0.file.module_footer.tpl.php |
---|
File deleted |
//web/acc/manager/vnstat/templates_c/553ce6260759b1d4166e3cb1ffe0a8ac55227d7c_0.file.module_graph.tpl.php |
---|
File deleted |
//web/acc/manager/vnstat/templates_c/1e81c22f2b2d1f91cd03aa4725f8c35f066935d4_0.file.module_header.tpl.php |
---|
File deleted |
//web/acc/manager/vnstat/templates_c/2b2bc100a3154406caafbf0c1dff8bf361bd6b94_0.file.site_index.tpl.php |
---|
File deleted |
//web/acc/manager/vnstat/alcasar.txt |
---|
0,0 → 1,54 |
Vnstat-Frontend |
code initial : https://github.com/alexandermarston/vnstat-dashboard |
Fork exploité : https://github.com/tomangert/vnstat-dashboard |
-------------------------------------------------- |
diff index.php index.php.orig |
21,22c21 |
< //require __DIR__ . '/vendor/autoload.php'; |
< require __DIR__ . '/smarty/Smarty.class.php'; |
--- |
> require __DIR__ . '/vendor/autoload.php'; |
54,55c53 |
< // Add for ALCASAR |
< $thisInterface = ""; |
--- |
> |
59d56 |
< // Modify for ALCASAR |
61,62c58 |
< //$smarty->assign('interface_list', $vnstat->getInterfaces()); |
< $smarty->assign('interface_list', $thisInterface); |
--- |
> $smarty->assign('interface_list', $vnstat->getInterfaces()); |
--------------------------------------------------- |
diff module_footer.tpl module_footer.tpl.orig |
3c3,4 |
< <span class="text-muted">Generated by 'vnstat-dashboard' |
--- |
> <span class="text-muted">Copyright (C) {$year} Alexander Marston - |
> <a href="https://github.com/alexandermarston/vnstat-dashboard">vnstat-dashboard</a> |
----------------------------------------------------- |
diff module_header.tpl module_header.tpl.orig |
12a17,33 |
> <nav class="navbar sticky-top navbar-light bg-light"> |
> <div class="container"> |
> <a class="navbar-brand" href="#">Network Traffic ({$current_interface})</a> |
> |
> <div class="dropdown"> |
> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
> Interface Selection |
> </button> |
> |
> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> |
> {foreach from=$interface_list item=value} |
> <a class="dropdown-item" href="?i={$value}">{$value}</a> |
> {/foreach} |
> </div> |
> </div> |
> </div> |
> </nav> |
Property changes: |
Added: svn:eol-style |
+native |
\ No newline at end of property |
//web/acc/manager/vnstat/includes/config.php |
---|
17,9 → 17,10 |
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
*/ |
// Disable error reporting to screen |
ini_set('display_errors', 0); |
error_reporting(E_ALL); |
// Uncomment to enable error reporting to the screen |
/*ini_set('display_errors', 1); |
ini_set('display_startup_errors', 1); |
ferror_reporting(E_ALL);*/ |
// Set the default system Timezone |
date_default_timezone_set('Europe/London'); |
27,6 → 28,12 |
// Path of vnstat |
$vnstat_bin_dir = '/usr/bin/vnstat'; |
// Path of config file |
/*$vnstat_config = '/etc/vnstat.conf';*/ |
// linear or logarithmic graphs. Uncomment for logarithmic |
/*$graph_type = 'log';*/ |
// Set to true to set your own interfaces |
$use_predefined_interfaces = false; |
//web/acc/manager/vnstat/includes/utilities.php |
---|
17,6 → 17,19 |
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
*/ |
$logk = log(1024); |
function getScale($bytes) |
{ |
global $logk; |
$ui = floor(round(log($bytes)/$logk,3)); |
if ($ui < 0) { $ui = 0; } |
if ($ui > 8) { $ui = 8; } |
return $ui; |
} |
// Get the largest value in an array |
function getLargestValue($array) { |
return $max = array_reduce($array, function ($a, $b) { |
24,7 → 37,44 |
}); |
} |
function formatSize($bytes, $vnstatJsonVersion) { |
function getBaseValue($array, $scale) |
{ |
$big = pow(1024,9); |
// Find the smallest non-zero value |
$sml = array_reduce($array, function ($a, $b) { |
if ((1 <= $b['rx']) && ($b['rx'] < $b['tx'])) { |
$sm = $b['rx']; |
} else { |
$sm = $b['tx']; |
} |
if (($sm < 1) || ($a < $sm)) { |
return $a; |
} else { |
return $sm; |
} |
}, $big); |
if ($sml >= $big/2) { |
$sml = 1; |
} |
// divide by scale then round down to a power of 10 |
$base = pow(10,floor(round(log10($sml/pow(1024,$scale)),3))); |
// convert back to bytes |
$baseByte = $base * pow(1024, $scale); |
// Don't make the bar invisable - must be > 5% difference |
if ($sml / $baseByte < 1.05) { |
$base = $base / 10; |
} |
return $base; |
} |
function formatSize($bytes, $vnstatJsonVersion, $decimals = 2) { |
// json version 1 = convert from KiB |
// json version 2 = convert from bytes |
if ($vnstatJsonVersion == 1) { |
31,28 → 81,29 |
$bytes *= 1024; // convert from kibibytes to bytes |
} |
return formatBytes($bytes); |
return formatBytes($bytes, $decimals); |
} |
function formatBytes($bytes, $decimals = 2) { |
$base = log(floatval($bytes), 1024); |
function getLargestPrefix($scale) |
{ |
$suffixes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; |
return $suffixes[$scale]; |
} |
return round(pow(1024, $base - floor($base)), $decimals) .' '. $suffixes[floor($base)]; |
function formatBytes($bytes, $decimals = 3) { |
$scale = getScale($bytes); |
return round($bytes/pow(1024, $scale), $decimals) .' '. getLargestPrefix($scale); |
} |
function formatBytesTo($bytes, $delimiter, $decimals = 2) { |
function formatBytesTo($bytes, $scale, $decimals = 4) { |
if ($bytes == 0) { |
return '0'; |
} |
$k = 1024; |
$dm = $decimals < 0 ? 0 : $decimals; |
$sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; |
$i = array_search($delimiter, $sizes); |
return number_format(($bytes / pow($k, $i)), $decimals); |
return number_format(($bytes / pow(1024, $scale)), $decimals, ".", ""); |
} |
function kibibytesToBytes($kibibytes, $vnstatJsonVersion) { |
63,20 → 114,6 |
} |
} |
function getLargestPrefix($kb) |
{ |
$units = ['TB', 'GB', 'MB', 'KB', 'B']; |
$scale = 1024 * 1024 * 1024 * 1024; |
$ui = 0; |
while ((($kb < $scale) && ($scale > 1))) { |
$ui++; |
$scale = $scale / 1024; |
} |
return $units[$ui]; |
} |
function sortingFunction($item1, $item2) { |
if ($item1['time'] == $item2['time']) { |
return 0; |
//web/acc/manager/vnstat/includes/vnstat.php |
---|
78,7 → 78,11 |
$vnstatInterfaces = []; |
foreach($this->vnstatData['interfaces'] as $interface) { |
if ($this->vnstatJsonVersion == 1) { |
array_push($vnstatInterfaces, $interface['id']); |
} else { |
array_push($vnstatInterfaces, $interface['name']); |
} |
} |
return $vnstatInterfaces; |
87,6 → 91,7 |
public function getInterfaceData($timeperiod, $type, $interface) { |
// If json version equals 1, add an 's' onto the end of each type. |
// e.g. 'top' becomes 'tops' |
$typeAppend = ''; |
if ($this->vnstatJsonVersion == 1) { |
$typeAppend = 's'; |
} |
93,9 → 98,14 |
// Blank placeholder |
$trafficData = []; |
$i = -1; |
// Get the array index for the chosen interface |
$arrayIndex = array_search($interface, array_column($this->vnstatData['interfaces'], 'id')); |
if ($this->vnstatJsonVersion == 1) { |
$arrayIndex = array_search($interface, array_column($this->vnstatData['interfaces'], 'id')); |
} else { |
$arrayIndex = array_search($interface, array_column($this->vnstatData['interfaces'], 'name')); |
} |
if ($timeperiod == 'top10') { |
if ($type == 'table') { |
113,6 → 123,34 |
} |
} |
if (($this->vnstatJsonVersion > 1) && ($timeperiod == 'five')) { |
if ($type == 'table') { |
foreach ($this->vnstatData['interfaces'][$arrayIndex]['traffic']['fiveminute'] as $traffic) { |
if (is_array($traffic)) { |
$i++; |
$trafficData[$i]['label'] = date("d/m/Y H:i", mktime($traffic['time']['hour'], $traffic['time']['minute'], 0, $traffic['date']['month'], $traffic['date']['day'], $traffic['date']['year'])); |
$trafficData[$i]['time'] = mktime($traffic['time']['hour'], $traffic['time']['minute'], 0, $traffic['date']['month'], $traffic['date']['day'], $traffic['date']['year']); |
$trafficData[$i]['rx'] = formatSize($traffic['rx'], $this->vnstatJsonVersion); |
$trafficData[$i]['tx'] = formatSize($traffic['tx'], $this->vnstatJsonVersion); |
$trafficData[$i]['total'] = formatSize(($traffic['rx'] + $traffic['tx']), $this->vnstatJsonVersion); |
} |
} |
} else if ($type == 'graph') { |
foreach ($this->vnstatData['interfaces'][$arrayIndex]['traffic']['fiveminute'] as $traffic) { |
if (is_array($traffic)) { |
$i++; |
$trafficData[$i]['label'] = sprintf("Date(%d, %d, %d, %d, %d)", $traffic['date']['year'], $traffic['date']['month']-1, $traffic['date']['day'], $traffic['time']['hour'], $traffic['time']['minute']); |
$trafficData[$i]['time'] = mktime($traffic['time']['hour'], $traffic['time']['minute'], 0, $traffic['date']['month'], $traffic['date']['day'], $traffic['date']['year']); |
$trafficData[$i]['rx'] = kibibytesToBytes($traffic['rx'], $this->vnstatJsonVersion); |
$trafficData[$i]['tx'] = kibibytesToBytes($traffic['tx'], $this->vnstatJsonVersion); |
$trafficData[$i]['total'] = kibibytesToBytes(($traffic['rx'] + $traffic['tx']), $this->vnstatJsonVersion); |
} |
} |
} |
} |
if ($timeperiod == 'hourly') { |
if ($type == 'table') { |
foreach ($this->vnstatData['interfaces'][$arrayIndex]['traffic']['hour'.$typeAppend] as $traffic) { |
133,7 → 171,6 |
} |
} |
// usort($trafficData, sortingFunction); |
} else if ($type == 'graph') { |
foreach ($this->vnstatData['interfaces'][$arrayIndex]['traffic']['hour'.$typeAppend] as $traffic) { |
146,7 → 183,8 |
$hour = $traffic['time']['hour']; |
} |
$trafficData[$i]['label'] = sprintf("Date(%d, %d, %d, %d, %d, %d)", $traffic['date']['year'], $traffic['date']['month']-1, $traffic['date']['day'], $hour, 0, 0); |
$trafficData[$i]['label'] = sprintf("Date(%d, %d, %d, %d)", $traffic['date']['year'], $traffic['date']['month']-1, $traffic['date']['day'], $hour); |
$trafficData[$i]['time'] = mktime($hour, 0, 0, $traffic['date']['month'], $traffic['date']['day'], $traffic['date']['year']); |
$trafficData[$i]['rx'] = kibibytesToBytes($traffic['rx'], $this->vnstatJsonVersion); |
$trafficData[$i]['tx'] = kibibytesToBytes($traffic['tx'], $this->vnstatJsonVersion); |
$trafficData[$i]['total'] = kibibytesToBytes(($traffic['rx'] + $traffic['tx']), $this->vnstatJsonVersion); |
162,6 → 200,7 |
$i++; |
$trafficData[$i]['label'] = date('d/m/Y', mktime(0, 0, 0, $traffic['date']['month'], $traffic['date']['day'], $traffic['date']['year'])); |
$trafficData[$i]['time'] = mktime(0, 0, 0, $traffic['date']['month'], $traffic['date']['day'], $traffic['date']['year']); |
$trafficData[$i]['rx'] = formatSize($traffic['rx'], $this->vnstatJsonVersion); |
$trafficData[$i]['tx'] = formatSize($traffic['tx'], $this->vnstatJsonVersion); |
$trafficData[$i]['total'] = formatSize(($traffic['rx'] + $traffic['tx']), $this->vnstatJsonVersion); |
172,7 → 211,8 |
if (is_array($traffic)) { |
$i++; |
$trafficData[$i]['label'] = sprintf("Date(%d, %d, %d, %d, %d, %d)", $traffic['date']['year'], $traffic['date']['month']-1, $traffic['date']['day'], 0, 0, 0); |
$trafficData[$i]['label'] = sprintf("Date(%d, %d, %d)", $traffic['date']['year'], $traffic['date']['month']-1, $traffic['date']['day']); |
$trafficData[$i]['time'] = mktime(0, 0, 0, $traffic['date']['month'], $traffic['date']['day'], $traffic['date']['year']); |
$trafficData[$i]['rx'] = kibibytesToBytes($traffic['rx'], $this->vnstatJsonVersion); |
$trafficData[$i]['tx'] = kibibytesToBytes($traffic['tx'], $this->vnstatJsonVersion); |
$trafficData[$i]['total'] = kibibytesToBytes(($traffic['rx'] + $traffic['tx']), $this->vnstatJsonVersion); |
188,6 → 228,7 |
$i++; |
$trafficData[$i]['label'] = date('F Y', mktime(0, 0, 0, $traffic['date']['month'], 10, $traffic['date']['year'])); |
$trafficData[$i]['time'] = mktime(0, 0, 0, $traffic['date']['month'], 10, $traffic['date']['year']); |
$trafficData[$i]['rx'] = formatSize($traffic['rx'], $this->vnstatJsonVersion); |
$trafficData[$i]['tx'] = formatSize($traffic['tx'], $this->vnstatJsonVersion); |
$trafficData[$i]['total'] = formatSize(($traffic['rx'] + $traffic['tx']), $this->vnstatJsonVersion); |
198,7 → 239,8 |
if (is_array($traffic)) { |
$i++; |
$trafficData[$i]['label'] = sprintf("Date(%d, %d, %d, %d, %d, %d)", $traffic['date']['year'], $traffic['date']['month'] - 1, 10, 0, 0, 0); |
$trafficData[$i]['label'] = sprintf("Date(%d, %d, %d)", $traffic['date']['year'], $traffic['date']['month'] - 1, 10); |
$trafficData[$i]['time'] = mktime(0, 0, 0, $traffic['date']['month'], 10, $traffic['date']['year']); |
$trafficData[$i]['rx'] = kibibytesToBytes($traffic['rx'], $this->vnstatJsonVersion); |
$trafficData[$i]['tx'] = kibibytesToBytes($traffic['tx'], $this->vnstatJsonVersion); |
$trafficData[$i]['total'] = kibibytesToBytes(($traffic['rx'] + $traffic['tx']), $this->vnstatJsonVersion); |
207,17 → 249,32 |
} |
} |
if ($timeperiod != 'top10') { |
usort($trafficData, 'sortingFunction'); |
} |
if ($type == 'graph') { |
// Get the largest value and then prefix (B, KB, MB, GB, etc) |
$trafficLargestValue = getLargestValue($trafficData); |
$trafficLargestPrefix = getLargestPrefix($trafficLargestValue); |
$trafficScale = getScale($trafficLargestValue); |
$trafficLargestPrefix = getLargestPrefix($trafficScale); |
$trafficBase = getBaseValue($trafficData, $trafficScale); |
if (($trafficBase < .0099) && ($trafficScale >= 1)) |
{ |
$trafficScale = $trafficScale - 1; |
$trafficLargestPrefix = getLargestPrefix($trafficScale); |
$trafficBase = getBaseValue($trafficData, $trafficScale); |
} |
foreach($trafficData as $key => $value) { |
$trafficData[$key]['rx'] = formatBytesTo($value['rx'], $trafficLargestPrefix); |
$trafficData[$key]['tx'] = formatBytesTo($value['tx'], $trafficLargestPrefix); |
$trafficData[$key]['total'] = formatBytesTo($value['total'], $trafficLargestPrefix); |
$trafficData[$key]['delimiter'] = $trafficLargestPrefix; |
foreach($trafficData as &$value) { |
$value['rx'] = formatBytesTo($value['rx'], $trafficScale); |
$value['tx'] = formatBytesTo($value['tx'], $trafficScale); |
$value['total'] = formatBytesTo($value['total'], $trafficScale); |
} |
unset($value); |
$trafficData[0]['delimiter'] = $trafficLargestPrefix; |
$trafficData[0]['base'] = $trafficBase; |
} |
return $trafficData; |
//web/acc/manager/vnstat/templates/module_footer.tpl |
---|
5,8 → 5,8 |
</div> |
</footer> |
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> |
<script src="/js/jquery.slim.min.js"></script> |
<script src="/js/bootstrap.min.js"></script> |
{include file="module_graph_js.tpl"} |
</body> |
</html> |
//web/acc/manager/vnstat/templates/module_graph.tpl |
---|
1,9 → 1,18 |
<div class="container"> |
<ul class="nav nav-tabs" id="graphTab" role="tablist"> |
{if $jsonVersion gt 1} |
<li class="nav-item"> |
<a class="nav-link active" id="five-graph-tab" data-toggle="tab" href="#five-graph" role="tab" aria-controls="five-graph" aria-selected="true">Five Minute Graph</a> |
</li> |
<li class="nav-item"> |
<a class="nav-link" id="hourly-graph-tab" data-toggle="tab" href="#hourly-graph" role="tab" aria-controls="hourly-graph" aria-selected="false">Hourly Graph</a> |
</li> |
{else} |
<li class="nav-item"> |
<a class="nav-link active" id="hourly-graph-tab" data-toggle="tab" href="#hourly-graph" role="tab" aria-controls="hourly-graph" aria-selected="true">Hourly Graph</a> |
</li> |
{/if} |
<li class="nav-item"> |
<a class="nav-link active" id="hourly-graph-tab" data-toggle="tab" href="#hourly-graph" role="tab" aria-controls="hourly-graph" aria-selected="true">Hourly Graph</a> |
</li> |
<li class="nav-item"> |
<a class="nav-link" id="daily-graph-tab" data-toggle="tab" href="#daily-graph" role="tab" aria-controls="daily-graph" aria-selected="false">Daily Graph</a> |
</li> |
<li class="nav-item"> |
12,10 → 21,20 |
</ul> |
<div class="tab-content"> |
<div class="tab-pane fade show active" id="hourly-graph" role="tabpanel" aria-labelledby="hourly-graph-tab"> |
<div id="hourlyNetworkTrafficGraph" style="height: 300px;"></div> |
</div> |
{if $jsonVersion gt 1} |
<div class="tab-pane fade show active" id="five-graph" role="tabpanel" aria-labelledby="five-graph-tab"> |
<div id="fiveNetworkTrafficGraph" style="height: 300px;"></div> |
</div> |
<div class="tab-pane fade" id="hourly-graph" role="tabpanel" aria-labelledby="hourly-graph-tab"> |
<div id="hourlyNetworkTrafficGraph" style="height: 300px;"></div> |
</div> |
{else} |
<div class="tab-pane fade show active" id="hourly-graph" role="tabpanel" aria-labelledby="hourly-graph-tab"> |
<div id="hourlyNetworkTrafficGraph" style="height: 300px;"></div> |
</div> |
{/if} |
<div class="tab-pane fade" id="daily-graph" role="tabpanel" aria-labelledby="daily-graph-tab"> |
<div id="dailyNetworkTrafficGraph" style="height: 300px;"></div> |
</div> |
//web/acc/manager/vnstat/templates/module_graph_js.tpl |
---|
1,11 → 1,80 |
<script type="text/javascript"> |
google.charts.load('current', { packages: [ 'bar' ] }); |
google.charts.load("current", { packages: [ 'corechart' ] }); |
google.charts.setOnLoadCallback(drawFiveChart); |
google.charts.setOnLoadCallback(drawHourlyChart); |
google.charts.setOnLoadCallback(drawDailyChart); |
google.charts.setOnLoadCallback(drawMonthlyChart); |
function drawFiveChart() |
{ |
{if $jsonVersion gt 1} |
var data = new google.visualization.DataTable(); |
data.addColumn('datetime', 'Time'); |
data.addColumn('number', 'Traffic In'); |
data.addColumn('number', 'Traffic Out'); |
data.addColumn('number', 'Total Traffic'); |
data.addRows([ |
{foreach from=$fiveGraphData key=key item=value} |
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}], |
{/foreach} |
]); |
let endD = (new {$fiveGraphData[0]['label']}).getTime(); |
let options = { |
title: 'Five minute Network Traffic', |
orientation: 'horizontal', |
legend: { position: 'right' }, |
explorer: { |
axis: 'horizontal', |
zoomDelta: 1.1, |
maxZoomIn: 0.1, |
maxZoomOut: 10.0 |
}, |
vAxis: { |
format: '###.### {$fiveLargestPrefix}' |
{if $graph_type == 'log'} |
,scaleType: 'log', |
baseline: {$fiveBase} |
{/if} |
}, |
hAxis: { |
direction: -1, |
format: 'd/H:mm', |
{if $jsonVersion > 1} |
title: 'Day/Hour:Minute (Scroll to zoom, Drag to pan)', |
{else} |
title: 'Day/Hour:Minute', |
{/if} |
viewWindow: { |
min: 'Date('+(endD-7050000).toString()+')', |
max: 'Date('+(endD+150000).toString()+')' |
}, |
ticks: [ |
{foreach from=$fiveGraphData key=key item=value} |
new {$value.label}, |
{/foreach} |
] |
} |
}; |
var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy HH:mm' }); |
formatDate.format(data, 0); |
var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$fiveLargestPrefix}' }); |
formatNumber.format(data, 1); |
formatNumber.format(data, 2); |
formatNumber.format(data, 3); |
let chart = new google.visualization.BarChart(document.getElementById('fiveNetworkTrafficGraph')); |
chart.draw(data, google.charts.Bar.convertOptions(options)); |
{/if} |
} |
function drawHourlyChart() |
{ |
var data = new google.visualization.DataTable(); |
21,6 → 90,8 |
{/foreach} |
]); |
let endD = (new {$hourlyGraphData[0]['label']}).getTime(); |
let options = { |
title: 'Hourly Network Traffic', |
orientation: 'horizontal', |
27,17 → 98,29 |
legend: { position: 'right' }, |
explorer: { |
axis: 'horizontal', |
maxZoomIn: 4.0, |
maxZoomOut: 3.0 |
zoomDelta: 1.1, |
maxZoomIn: 0.1, |
maxZoomOut: 10.0 |
}, |
vAxis: { |
title: 'Data', |
format: '##.## {$hourlyLargestPrefix}' |
format: '###.### {$hourlyLargestPrefix}' |
{if $graph_type == 'log'} |
,scaleType: 'log', |
baseline: {$hourlyBase} |
{/if} |
}, |
hAxis: { |
title: 'Hour', |
format: 'HH:mm', |
{if $jsonVersion > 1} |
title: 'Day/Hour (Scroll to zoom, Drag to pan)', |
{else} |
title: 'Day/Hour', |
{/if} |
format: 'd/H', |
direction: -1, |
viewWindow: { |
min: 'Date('+(endD-84600000).toString()+')', |
max: 'Date('+(endD+1800000).toString()+')' |
}, |
ticks: [ |
{foreach from=$hourlyGraphData key=key item=value} |
new {$value.label}, |
72,7 → 155,9 |
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}], |
{/foreach} |
]); |
let endD = (new {$dailyGraphData[0]['label']}).getTime(); |
let options = { |
title: 'Daily Network Traffic', |
orientation: 'horizontal', |
79,20 → 164,37 |
legend: { position: 'right' }, |
explorer: { |
axis: 'horizontal', |
maxZoomIn: 4.0, |
maxZoomOut: 3.0 |
zoomDelta: 1.1, |
maxZoomIn: 0.1, |
maxZoomOut: 10.0 |
}, |
vAxis: { |
title: 'Data', |
format: '##.## {$dailyLargestPrefix}' |
format: '###.### {$dailyLargestPrefix}' |
{if $graph_type == 'log'} |
,scaleType: 'log', |
baseline: {$dailyBase} |
{/if} |
}, |
hAxis: { |
title: 'Day', |
{if $jsonVersion > 1} |
title: 'Day (Scroll to zoom, Drag to pan)', |
{else} |
title: 'Day', |
{/if} |
format: 'dd/MM/YYYY', |
direction: -1 |
viewWindow: { |
min: 'Date('+(endD-2548800000).toString()+')', |
max: 'Date('+(endD+43200000).toString()+')' |
}, |
direction: -1, |
ticks: [ |
{foreach from=$dailyGraphData key=key item=value} |
new {$value.label}, |
{/foreach} |
] |
} |
}; |
var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy' }); |
formatDate.format(data, 0); |
126,11 → 228,11 |
legend: { position: 'right' }, |
explorer: { |
axis: 'horizontal', |
maxZoomIn: 4.0, |
maxZoomOut: 3.0 |
zoomDelta: 1.1, |
maxZoomIn: 0.1, |
maxZoomOut: 10.0 |
}, |
vAxis: { |
title: 'Data', |
format: '##.## {$monthlyLargestPrefix}' |
}, |
hAxis: { |
//web/acc/manager/vnstat/templates/module_table.tpl |
---|
1,9 → 1,18 |
<div class="container"> |
<ul class="nav nav-tabs" id="tableTab" role="tablist"> |
{if $jsonVersion gt 1} |
<li class="nav-item"> |
<a class="nav-link active" id="five-table-tab" data-toggle="tab" href="#five-table" role="tab" aria-controls="five-table" aria-selected="true">Five Minute</a> |
</li> |
<li class="nav-item"> |
<a class="nav-link" id="hourly-table-tab" data-toggle="tab" href="#hourly-table" role="tab" aria-controls="hourly-table" aria-selected="false">Hourly</a> |
</li> |
{else} |
<li class="nav-item"> |
<a class="nav-link active" id="hourly-table-tab" data-toggle="tab" href="#hourly-table" role="tab" aria-controls="hourly-table" aria-selected="true">Hourly</a> |
</li> |
{/if} |
<li class="nav-item"> |
<a class="nav-link active" id="hourly-table-tab" data-toggle="tab" href="#hourly-table" role="tab" aria-controls="hourly-table" aria-selected="true">Hourly</a> |
</li> |
<li class="nav-item"> |
<a class="nav-link" id="daily-table-tab" data-toggle="tab" href="#daily-table" role="tab" aria-controls="daily-table" aria-selected="false">Daily</a> |
</li> |
<li class="nav-item"> |
15,7 → 24,34 |
</ul> |
<div class="tab-content" id="tableTabContent"> |
{if $jsonVersion gt 1} |
<div class="tab-pane fade show active" id="five-table" role="tabpanel" aria-labelledby="five-table-tab"> |
<table class="table table-bordered"> |
<thead> |
<tr> |
<th>Time</th> |
<th>Received</th> |
<th>Sent</th> |
<th>Total</th> |
</tr> |
</thead> |
<tbody> |
{foreach from=$fiveTableData key=key item=value} |
<tr> |
<td>{$value.label}</td> |
<td>{$value.rx}</td> |
<td>{$value.tx}</td> |
<td>{$value.total}</td> |
</tr> |
{/foreach} |
</tbody> |
</table> |
</div> |
<div class="tab-pane fade" id="hourly-table" role="tabpanel" aria-labelledby="hourly-table-tab"> |
{else} |
<div class="tab-pane fade show active" id="hourly-table" role="tabpanel" aria-labelledby="hourly-table-tab"> |
{/if} |
<table class="table table-bordered"> |
<thead> |
<tr> |