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

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