osb/resources/views/theme/backend/adminlte/service/widget/broadband/usagegraph.blade.php

92 lines
1.7 KiB
PHP
Raw Normal View History

<div class="card">
<div class="card-header bg-gray-dark">
<h3 class="card-title">Broadband Traffic</h3>
</div>
<div class="card-body">
2021-03-12 10:08:40 +00:00
<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>
2021-03-12 10:08:40 +00:00
</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>
@section('page-scripts')
@js(highcharts)
<script>
2021-03-12 10:08:40 +00:00
const timezone = new Date().getTimezoneOffset()
Highcharts.setOptions({
global: {
timezoneOffset: timezone,
},
lang: {
thousandsSep: ','
2021-03-12 10:08:40 +00:00
}
});
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',
2021-03-12 10:08:40 +00:00
data: {!! $o->usage(30)->map(function($item) { return ['x'=>$item->date->timestamp*1000,'y'=>$item->total];}) !!}
}]
});
</script>
@append