Added usage graph (ADSL), improved logging for usage collection (ADSL)

resources/views/theme/backend/adminlte/u/service/home.blade.php

@@ -25,7 +25,6 @@
 		<div class="col-7">
 			<div class="card">
 				<div class="card-header bg-dark d-flex p-0">
-					<span class="p-3"><i class="fa fa-bars"></i></span>
 					<ul class="nav nav-pills p-2 w-100">
 						{{--
 						<li class="nav-item"><a class="nav-link active" href="#product" data-toggle="tab">Product</a></li>
@@ -34,6 +33,10 @@
 						@if (! $o->suspend_billing AND ! $o->external_billing)
 							<li class="nav-item active"><a class="nav-link" href="#pending_items" data-toggle="tab">Pending Items</a></li>
 						@endif
+						@if ($o->hasUsage())
+							<li class="nav-item active"><a class="nav-link" href="#traffic" data-toggle="tab">Traffic</a></li>
+						@endif
+
 						{{--
 						<li class="nav-item"><a class="nav-link" href="#invoices" data-toggle="tab">Invoices</a></li>
 						<li class="nav-item"><a class="nav-link" href="#emails" data-toggle="tab">Emails</a></li>
@@ -62,9 +65,6 @@
 
 				<div class="card-body">
 					<div class="tab-content">
-						<div class="tab-pane fade" id="traffic" role="tabpanel">
-							Traffic.
-						</div>
 						<div class="tab-pane fade" id="product" role="tabpanel">
 							Product.
 						</div>
@@ -73,6 +73,11 @@
 								@include('common.service.widget.invoice')
 							</div>
 						@endif
+						@if ($o->hasUsage())
+							<div class="tab-pane fade show" id="traffic" role="tabpanel">
+								@include('u.service.widgets.'.$o->stype.'.usagegraph',['o'=>$o->type])
+							</div>
+						@endif
 						<div class="tab-pane fade" id="invoices" role="tabpanel">
 							Invoices.
 						</div>

resources/views/theme/backend/adminlte/u/service/widgets/broadband/usagegraph.blade.php

@@ -0,0 +1,62 @@
+<div class="card">
+	<div class="card-header bg-gray-dark">
+		<h3 class="card-title">Broadband Traffic</h3>
+	</div>
+
+	<div class="card-body">
+		<div id="graph"></div>
+	</div>
+</div>
+
+@section('page-scripts')
+	@js('//code.highcharts.com/highcharts.js','highcharts')
+	@js('//code.highcharts.com/highcharts-more.js','highcharts-more','highcharts')
+	@js('//code.highcharts.com/modules/xrange.js','highcharts-xrange','highcharts')
+	@js('//code.highcharts.com/modules/exporting.js','highcharts-export','highcharts')
+	@js('//code.highcharts.com/modules/offline-exporting.js','highcharts-export-offline','highcharts-export')
+	<script>
+		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->up_peak+$item->down_peak+$item->up_offpeak+$item->down_offpeak];}) !!}
+			}]
+		});
+	</script>
+@append