85 lines
1.5 KiB
PHP
85 lines
1.5 KiB
PHP
<div class="row">
|
|
<div class="col-3">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Period</th>
|
|
<th class="text-right">Traffic <small>(GB)</small></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($o->usage_summary(6) as $key => $oo)
|
|
<tr>
|
|
<td>{{ $key }}</td>
|
|
<td class="text-right">{{ number_format($oo/1024,2) }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="col-9">
|
|
<div id="graph"></div>
|
|
</div>
|
|
</div>
|
|
|
|
@section('page-scripts')
|
|
@js(highcharts)
|
|
|
|
<script>
|
|
const timezone = new Date().getTimezoneOffset()
|
|
|
|
Highcharts.setOptions({
|
|
global: {
|
|
timezoneOffset: timezone,
|
|
},
|
|
lang: {
|
|
thousandsSep: ','
|
|
}
|
|
});
|
|
|
|
Highcharts.chart('graph', {
|
|
chart: {
|
|
type: 'areaspline'
|
|
},
|
|
title: {
|
|
text: 'Usage Traffic up to {{ $o->usage(30)->max('date')->format('Y-m-d') }}'
|
|
},
|
|
legend: {
|
|
layout: 'vertical',
|
|
align: 'left',
|
|
verticalAlign: 'top',
|
|
x: 150,
|
|
y: 100,
|
|
floating: true,
|
|
borderWidth: 1,
|
|
backgroundColor:
|
|
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF'
|
|
},
|
|
xAxis: {
|
|
type: 'datetime'
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'MB'
|
|
}
|
|
},
|
|
tooltip: {
|
|
shared: true,
|
|
valueSuffix: ' MB'
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
plotOptions: {
|
|
areaspline: {
|
|
fillOpacity: 0.5
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Traffic',
|
|
data: {!! $o->usage(30)->map(function($item) { return ['x'=>$item->date->timestamp*1000,'y'=>$item->total];}) !!}
|
|
}]
|
|
});
|
|
</script>
|
|
@append |