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

<div class="card">
	<div class="card-header bg-gray-dark">
		<h3 class="card-title">Broadband Traffic</h3>
	</div>

	<div class="card-body">
		<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>
	</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