kuvia/resources/views/dashboard/index.blade.php

102 lines
3.6 KiB
PHP
Raw Normal View History

2021-01-12 14:49:45 +00:00
@extends('layout/template')
@section('content')
2021-01-17 04:12:42 +00:00
<div class="row" style="margin-top: 20px;">
2021-01-12 14:49:45 +00:00
<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