/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,8 → 1,17 |
<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" id="daily-graph-tab" data-toggle="tab" href="#daily-graph" role="tab" aria-controls="daily-graph" aria-selected="false">Daily Graph</a> |
</li> |
12,9 → 21,19 |
</ul> |
<div class="tab-content"> |
{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> |
/web/acc/manager/vnstat/templates/module_graph_js.tpl |
---|
2,10 → 2,79 |
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}, |
73,6 → 156,8 |
{/foreach} |
]); |
let endD = (new {$dailyGraphData[0]['label']}).getTime(); |
let options = { |
title: 'Daily Network Traffic', |
orientation: 'horizontal', |
79,17 → 164,34 |
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: { |
{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} |
] |
} |
}; |
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,8 → 1,17 |
<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" id="daily-table-tab" data-toggle="tab" href="#daily-table" role="tab" aria-controls="daily-table" aria-selected="false">Daily</a> |
</li> |
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> |