Subversion Repositories ALCASAR

Compare Revisions

Ignore whitespace Rev 2809 → Rev 3106

/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>