/web/acc/manager/vnstat/templates/module_footer.tpl |
---|
0,0 → 1,12 |
<footer class="footer"> |
<div class="container"> |
<span class="text-muted">Generated by 'vnstat-dashboard' |
</span> |
</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> |
{include file="module_graph_js.tpl"} |
</body> |
</html> |
/web/acc/manager/vnstat/templates/module_footer.tpl.orig |
---|
0,0 → 1,16 |
<footer class="footer"> |
<div class="container"> |
<span class="text-muted">Copyright (C) {$year} Alexander Marston - |
<a href="https://github.com/alexandermarston/vnstat-dashboard">vnstat-dashboard</a> |
</span> |
</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> |
{include file="module_graph_js.tpl"} |
</body> |
</html> |
/web/acc/manager/vnstat/templates/module_graph.tpl |
---|
0,0 → 1,27 |
<div class="container"> |
<ul class="nav nav-tabs" id="graphTab" role="tablist"> |
<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"> |
<a class="nav-link" id="monthly-graph-tab" data-toggle="tab" href="#monthly-graph" role="tab" aria-controls="monthly-graph" aria-selected="false">Monthly Graph</a> |
</li> |
</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> |
<div class="tab-pane fade" id="daily-graph" role="tabpanel" aria-labelledby="daily-graph-tab"> |
<div id="dailyNetworkTrafficGraph" style="height: 300px;"></div> |
</div> |
<div class="tab-pane fade" id="monthly-graph" role="tabpanel" aria-labelledby="monthly-graph-tab"> |
<div id="monthlyNetworkTrafficGraph" style="height: 300px;"></div> |
</div> |
</div> |
</div> |
/web/acc/manager/vnstat/templates/module_graph_js.tpl |
---|
0,0 → 1,154 |
<script type="text/javascript"> |
google.charts.load('current', { packages: [ 'bar' ] }); |
google.charts.load("current", { packages: [ 'corechart' ] }); |
google.charts.setOnLoadCallback(drawHourlyChart); |
google.charts.setOnLoadCallback(drawDailyChart); |
google.charts.setOnLoadCallback(drawMonthlyChart); |
function drawHourlyChart() |
{ |
var data = new google.visualization.DataTable(); |
data.addColumn('date', 'Hour'); |
data.addColumn('number', 'Traffic In'); |
data.addColumn('number', 'Traffic Out'); |
data.addColumn('number', 'Total Traffic'); |
data.addRows([ |
{foreach from=$hourlyGraphData key=key item=value} |
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}], |
{/foreach} |
]); |
let options = { |
title: 'Hourly Network Traffic', |
orientation: 'horizontal', |
legend: { position: 'right' }, |
explorer: { |
axis: 'horizontal', |
maxZoomIn: 4.0, |
maxZoomOut: 3.0 |
}, |
vAxis: { |
title: 'Data', |
format: '##.## {$hourlyLargestPrefix}' |
}, |
hAxis: { |
title: 'Hour', |
format: 'HH:mm', |
direction: -1, |
ticks: [ |
{foreach from=$hourlyGraphData 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: '##.## {$hourlyLargestPrefix}' }); |
formatNumber.format(data, 1); |
formatNumber.format(data, 2); |
formatNumber.format(data, 3); |
let chart = new google.visualization.BarChart(document.getElementById('hourlyNetworkTrafficGraph')); |
chart.draw(data, google.charts.Bar.convertOptions(options)); |
} |
function drawDailyChart() |
{ |
var data = new google.visualization.DataTable(); |
data.addColumn('date', 'Day'); |
data.addColumn('number', 'Traffic In'); |
data.addColumn('number', 'Traffic Out'); |
data.addColumn('number', 'Total Traffic'); |
data.addRows([ |
{foreach from=$dailyGraphData key=key item=value} |
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}], |
{/foreach} |
]); |
let options = { |
title: 'Daily Network Traffic', |
orientation: 'horizontal', |
legend: { position: 'right' }, |
explorer: { |
axis: 'horizontal', |
maxZoomIn: 4.0, |
maxZoomOut: 3.0 |
}, |
vAxis: { |
title: 'Data', |
format: '##.## {$dailyLargestPrefix}' |
}, |
hAxis: { |
title: 'Day', |
format: 'dd/MM/YYYY', |
direction: -1 |
} |
}; |
var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy' }); |
formatDate.format(data, 0); |
var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$dailyLargestPrefix}' }); |
formatNumber.format(data, 1); |
formatNumber.format(data, 2); |
formatNumber.format(data, 3); |
let chart = new google.visualization.BarChart(document.getElementById('dailyNetworkTrafficGraph')); |
chart.draw(data, google.charts.Bar.convertOptions(options)); |
} |
function drawMonthlyChart() |
{ |
var data = new google.visualization.DataTable(); |
data.addColumn('date', 'Month'); |
data.addColumn('number', 'Traffic In'); |
data.addColumn('number', 'Traffic Out'); |
data.addColumn('number', 'Total Traffic'); |
data.addRows([ |
{foreach from=$monthlyGraphData key=key item=value} |
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}], |
{/foreach} |
]); |
let options = { |
title: 'Monthly Network Traffic', |
orientation: 'horizontal', |
legend: { position: 'right' }, |
explorer: { |
axis: 'horizontal', |
maxZoomIn: 4.0, |
maxZoomOut: 3.0 |
}, |
vAxis: { |
title: 'Data', |
format: '##.## {$monthlyLargestPrefix}' |
}, |
hAxis: { |
title: 'Month', |
format: 'MMMM YYYY', |
direction: -1 |
} |
}; |
var formatDate = new google.visualization.DateFormat({ pattern: 'MMMM YYYY' }); |
formatDate.format(data, 0); |
var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$monthlyLargestPrefix}' }); |
formatNumber.format(data, 1); |
formatNumber.format(data, 2); |
formatNumber.format(data, 3); |
let chart = new google.visualization.BarChart(document.getElementById('monthlyNetworkTrafficGraph')); |
chart.draw(data, google.charts.Bar.convertOptions(options)); |
} |
</script> |
/web/acc/manager/vnstat/templates/module_header.tpl |
---|
0,0 → 1,12 |
<!DOCTYPE html> |
<html lang="en"> |
<head> |
<title>Network Traffic</title> |
<meta charset="UTF-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
<!-- Bootstrap CSS --> |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> |
<!-- Custom CSS --> |
<link rel="stylesheet" href="./assets/css/style.css"> |
</head> |
<body> |
/web/acc/manager/vnstat/templates/module_header.tpl.orig |
---|
0,0 → 1,33 |
<!DOCTYPE html> |
<html lang="en"> |
<head> |
<title>Network Traffic</title> |
<meta charset="UTF-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
<!-- Bootstrap CSS --> |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> |
<!-- Custom CSS --> |
<link rel="stylesheet" href="./assets/css/style.css"> |
</head> |
<body> |
<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> |
/web/acc/manager/vnstat/templates/module_table.tpl |
---|
0,0 → 1,110 |
<div class="container"> |
<ul class="nav nav-tabs" id="tableTab" role="tablist"> |
<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"> |
<a class="nav-link" id="monthly-table-tab" data-toggle="tab" href="#monthly-table" role="tab" aria-controls="monthly-table" aria-selected="false">Monthly</a> |
</li> |
<li class="nav-item"> |
<a class="nav-link" id="top10-table-tab" data-toggle="tab" href="#top10-table" role="tab" aria-controls="top10-table" aria-selected="false">Top 10</a> |
</li> |
</ul> |
<div class="tab-content" id="tableTabContent"> |
<div class="tab-pane fade show active" id="hourly-table" role="tabpanel" aria-labelledby="hourly-table-tab"> |
<table class="table table-bordered"> |
<thead> |
<tr> |
<th>Hour</th> |
<th>Received</th> |
<th>Sent</th> |
<th>Total</th> |
</tr> |
</thead> |
<tbody> |
{foreach from=$hourlyTableData 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="daily-table" role="tabpanel" aria-labelledby="daily-table-tab"> |
<table class="table table-bordered"> |
<thead> |
<tr> |
<th>Day</th> |
<th>Received</th> |
<th>Sent</th> |
<th>Total</th> |
</tr> |
</thead> |
<tbody> |
{foreach from=$dailyTableData 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="monthly-table" role="tabpanel" aria-labelledby="monthly-table-tab"> |
<table class="table table-bordered"> |
<thead> |
<tr> |
<th>Month</th> |
<th>Received</th> |
<th>Sent</th> |
<th>Total</th> |
</tr> |
</thead> |
<tbody> |
{foreach from=$monthlyTableData 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="top10-table" role="tabpanel" aria-labelledby="top10-table-tab"> |
<table class="table table-bordered"> |
<thead> |
<tr> |
<th>Day</th> |
<th>Received</th> |
<th>Sent</th> |
<th>Total</th> |
</tr> |
</thead> |
<tbody> |
{foreach from=$top10TableData 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> |
</div> |
/web/acc/manager/vnstat/templates/site_index.tpl |
---|
0,0 → 1,7 |
{include file="module_header.tpl"} |
{include file="module_graph.tpl"} |
{include file="module_table.tpl"} |
{include file="module_footer.tpl"} |