Show traffic monthly summary
This commit is contained in:
@@ -75,7 +75,9 @@
|
||||
@endif
|
||||
@if ($o->hasUsage())
|
||||
<div class="tab-pane fade show" id="traffic" role="tabpanel">
|
||||
@include('u.service.widgets.'.$o->stype.'.usagegraph',['o'=>$o->type])
|
||||
@if ($o->type->usage(30)->count())
|
||||
@include('u.service.widgets.'.$o->stype.'.usagegraph',['o'=>$o->type])
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
<div class="tab-pane fade" id="invoices" role="tabpanel">
|
||||
|
@@ -71,4 +71,4 @@
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -4,7 +4,29 @@
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div id="graph"></div>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Period</th>
|
||||
<th class="text-right">Traffic</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,6 +37,14 @@
|
||||
@js('//code.highcharts.com/modules/exporting.js','highcharts-export','highcharts')
|
||||
@js('//code.highcharts.com/modules/offline-exporting.js','highcharts-export-offline','highcharts-export')
|
||||
<script>
|
||||
const timezone = new Date().getTimezoneOffset()
|
||||
|
||||
Highcharts.setOptions({
|
||||
global: {
|
||||
timezoneOffset: timezone
|
||||
}
|
||||
});
|
||||
|
||||
Highcharts.chart('graph', {
|
||||
chart: {
|
||||
type: 'areaspline'
|
||||
@@ -55,7 +85,7 @@
|
||||
},
|
||||
series: [{
|
||||
name: 'Traffic',
|
||||
data: {!! $o->usage(30)->map(function($item) { return ['x'=>$item->date->timestamp*1000,'y'=>$item->up_peak+$item->down_peak+$item->up_offpeak+$item->down_offpeak];}) !!}
|
||||
data: {!! $o->usage(30)->map(function($item) { return ['x'=>$item->date->timestamp*1000,'y'=>$item->total];}) !!}
|
||||
}]
|
||||
});
|
||||
</script>
|
||||
|
Reference in New Issue
Block a user