102 lines
3.6 KiB
PHP
102 lines
3.6 KiB
PHP
|
@extends('layout/template')
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<h1>Dashboard</h1>
|
||
|
|
<div class="alert alert-danger" role="alert">
|
||
|
|
This system is in development mode, all data will be removed!
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="card bg-secondary" style="">
|
||
|
|
<div class="card-header">Storage</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<canvas id="storageChart" width="200" height="100"></canvas>
|
||
|
|
<p class="card-text">Currently you use {{ $currentSize }} of Storage.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="card bg-secondary">
|
||
|
|
<div class="card-header">Traffic</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<canvas id="myChart" width="200" height="100"></canvas>
|
||
|
|
<p class="card-text">In the last 24 Hours you use {{ $currentTraffic }} Traffic, this month you used already {{ $monthlyTraffic }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
FAQ
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
@endsection
|
||
|
|
|
||
|
|
@section('js')
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
|
||
|
|
<script>
|
||
|
|
var data = {
|
||
|
|
labels: [@foreach($lastDaysTreffic as $date => $traffic)
|
||
|
|
"{{ $date }}",
|
||
|
|
@endforeach],
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: "Traffic per Day",
|
||
|
|
fillColor: "rgba(220,220,220,0.2)",
|
||
|
|
strokeColor: "rgba(220,220,220,1)",
|
||
|
|
pointColor: "rgba(220,220,220,1)",
|
||
|
|
pointStrokeColor: "#fff",
|
||
|
|
pointHighlightFill: "#fff",
|
||
|
|
pointHighlightStroke: "rgba(220,220,220,1)",
|
||
|
|
data: [
|
||
|
|
@foreach($lastDaysTreffic as $traffic)
|
||
|
|
{{ $traffic }},
|
||
|
|
@endforeach
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
var ctx = document.getElementById('myChart').getContext('2d');
|
||
|
|
var myChart = new Chart(ctx, {
|
||
|
|
type: 'line',
|
||
|
|
data: data
|
||
|
|
});
|
||
|
|
|
||
|
|
var datastorage = {
|
||
|
|
labels: [@foreach($lastDaysSize as $date => $traffic)
|
||
|
|
"{{ $date }}",
|
||
|
|
@endforeach],
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: "Storage per Day",
|
||
|
|
fillColor: "rgba(220,220,220,0.2)",
|
||
|
|
strokeColor: "rgba(220,220,220,1)",
|
||
|
|
pointColor: "rgba(220,220,220,1)",
|
||
|
|
pointStrokeColor: "#fff",
|
||
|
|
pointHighlightFill: "#fff",
|
||
|
|
pointHighlightStroke: "rgba(220,220,220,1)",
|
||
|
|
data: [
|
||
|
|
@foreach($lastDaysSize as $traffic)
|
||
|
|
{{ $traffic }},
|
||
|
|
@endforeach
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
var ctxstorage = document.getElementById('storageChart').getContext('2d');
|
||
|
|
var myChartstorage = new Chart(ctxstorage, {
|
||
|
|
type: 'line',
|
||
|
|
data: datastorage
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
@endsection
|