Update admin dashboard view

resources/views/admin/home.blade.php

@@ -1,4 +1,4 @@
-@extends('admin.partial.template')
+@extends('admin.partial.template-full')
 
 @section('section')
   <div class="title">
@@ -7,129 +7,135 @@
 
   <hr>
 
-  <div class="alert alert-info">
-    Hello, <b>{{Auth::user()->name}}</b>
-  </div>
-
   <div class="row">
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2">0</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Alerts</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Alerts</p>
+          <p class="h2 mb-0">0</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="[0,0]"></canvas>
       </div>
     </div>
 
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2">{{App\Util\Lexer\PrettyNumber::convert(DB::table('failed_jobs')->where('failed_at', '>=', \Carbon\Carbon::now()->subDay())->count())}}</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Failed Jobs (24h)</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Failed Jobs (24h)</p>
+          <p class="h2 mb-0">{{$data['failedjobs']['count']}}</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['failedjobs']['graph']}}"></canvas>
       </div>
     </div>
 
-    @php($reports = App\Report::whereNull('admin_seen')->count())
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2" title="{{$reports}}" data-toggle="tooltip">{{App\Util\Lexer\PrettyNumber::convert($reports)}}</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Reports</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Reports</p>
+          <p class="h2 mb-0" title="{{$data['reports']['count']}}" data-toggle="tooltip">{{$data['reports']['count']}}</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['reports']['graph']}}"></canvas>
       </div>
     </div>
   </div>
 
-  @php($statuses = App\Status::whereNull('in_reply_to_id')->whereNull('reblog_of_id')->count())
   <div class="row mt-4">
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2" title="{{$statuses}}" data-toggle="tooltip">{{App\Util\Lexer\PrettyNumber::convert($statuses)}}</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Statuses</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Statuses</p>
+          <p class="h2 mb-0" title="{{$data['statuses']['count']}}" data-toggle="tooltip">{{$data['statuses']['count']}}</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['statuses']['graph']}}"></canvas>
       </div>
     </div>
 
-    @php($replies = App\Status::whereNotNull('in_reply_to_id')->count())
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2" title="{{$replies}}" data-toggle="tooltip">{{App\Util\Lexer\PrettyNumber::convert($replies)}}</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Replies</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Replies</p>
+          <p class="h2 mb-0" title="{{$data['replies']['count']}}" data-toggle="tooltip">{{$data['replies']['count']}}</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['replies']['graph']}}""></canvas>
       </div>
     </div>
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2">{{App\Util\Lexer\PrettyNumber::convert(App\Status::whereNotNull('reblog_of_id')->count())}}</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Shares (Reblogs)</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Shares (Reblogs)</p>
+          <p class="h2 mb-0">{{$data['shares']['count']}}</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['shares']['graph']}}"></canvas>
       </div>
     </div>
   </div>
 
   <div class="row mt-4">
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2">{{App\Util\Lexer\PrettyNumber::convert(App\Like::count())}}</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Likes</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Likes</p>
+          <p class="h2 mb-0">{{$data['likes']['count']}}</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['likes']['graph']}}"></canvas>
       </div>
     </div>
 
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2">{{App\Util\Lexer\PrettyNumber::convert(App\Profile::count())}}</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Profiles</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Profiles</p>
+          <p class="h2 mb-0">{{$data['profiles']['count']}}</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['profiles']['graph']}}"></canvas>
       </div>
     </div>
 
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2">{{App\Util\Lexer\PrettyNumber::convert(App\User::count())}}</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Users</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Users</p>
+          <p class="h2 mb-0">{{$data['users']['count']}}</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['users']['graph']}}"></canvas>
       </div>
     </div>
   </div>
 
   <div class="row mt-4">
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2">{{App\Util\Lexer\PrettyNumber::convert(App\Status::whereNotNull('url')->distinct('url')->count())}}</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Remote Instances</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Remote Instances</p>
+          <p class="h2 mb-0">{{$data['instances']['count']}}</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['instances']['graph']}}"></canvas>
       </div>
     </div>
 
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="h2">{{App\Util\Lexer\PrettyNumber::convert(App\Media::count())}}</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Photos Uploaded</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Photos Uploaded</p>
+          <p class="h2 mb-0">{{$data['media']['count']}}</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['media']['graph']}}"></canvas>
       </div>
     </div>
     <div class="col-md-4">
-      <div class="card">
-        <div class="card-body text-center">
-          <p class="human-size" data-bytes="{{App\Media::sum('size')}}">{{App\Media::sum('size')}} bytes</p>
-          <p class="small text-uppercase font-weight-bold text-muted mb-0">Storage Used</p>
+      <div class="card" style="min-height:125px">
+        <div class="card-body">
+          <p class="small text-uppercase font-weight-bold text-muted">Storage Used</p>
+          <p class="human-size mb-0" data-bytes="{{$data['storage']['count']}}">{{$data['storage']['count']}} bytes</p>
         </div>
+        <canvas width="100" height="10" class="sparkline mb-1" data-chart_values="{{$data['storage']['graph']}}"></canvas>
       </div>
     </div>
   </div>
 @endsection
 
 @push('scripts')
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" integrity="sha256-oSgtFCCmHWRPQ/JmR4OoZ3Xke1Pw4v50uh6pLcu+fIc=" crossorigin="anonymous"></script>
   <script type="text/javascript">
     $(document).ready(function() {
       $('.human-size').each(function(d,a) {
@@ -138,6 +144,55 @@
         el.addClass('h2');
         el.text(filesize(size, {round: 0}));
       });
+      $('.sparkline').each(function() {
+          var ctx = $(this).get(0).getContext("2d");
+          var myNewChart = new Chart(ctx);
+          var chartData = JSON.parse($(this).attr('data-chart_values'));
+          var data = {};
+          var labels = [];
+          var datasets = {};
+          for (var i = 0; i < chartData.length; i++) {
+            labels.push('');
+          }
+          datasets['data'] = chartData;
+          datasets['backgroundColor'] = '#ffffff';
+          data['labels'] = labels;
+          data['datasets'] = [datasets];
+          new Chart(ctx, {
+            type: 'line',
+            data: data,
+            options: {
+              responsive: true,
+              legend: {
+                display: false
+              },
+              elements: {
+                line: {
+                  borderColor: '#08d',
+                  borderWidth: 1
+                },
+                point: {
+                  radius: 0
+                }
+              },
+              tooltips: {
+                enabled: false
+              },
+              scales: {
+                yAxes: [
+                  {
+                    display: false
+                  }
+                ],
+                xAxes: [
+                  {
+                    display: false
+                  }
+                ]
+              }
+            }
+          });
+      })
     });
   </script>
 @endpush