サーバ内全体の日別総チェックイン数グラフをトップに設置

app/Http/Controllers/HomeController.php

@@ -36,6 +36,31 @@ class HomeController extends Controller
         $categories = Information::CATEGORIES;
 
         if (Auth::check()) {
+            // チェックイン動向グラフ用のデータ取得
+            $groupByDay = Ejaculation::select(DB::raw(
+                <<<'SQL'
+to_char(ejaculated_date, 'YYYY/MM/DD') AS "date",
+count(*) AS "count"
+SQL
+            ))
+                ->join('users', function ($join) {
+                    $join->on('users.id', '=', 'ejaculations.user_id')
+                        ->where('users.accept_analytics', true);
+                })
+                ->where('ejaculated_date', '>=', now()->subDays(14))
+                ->groupBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"))
+                ->orderBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"))
+                ->get()
+                ->mapWithKeys(function ($item) {
+                    return [$item['date'] => $item['count']];
+                });
+            $globalEjaculationCounts = [];
+            $day = Carbon::now()->subDays(29);
+            for ($i = 0; $i < 30; $i++) {
+                $globalEjaculationCounts[$day->format('Y/m/d') . ' の総チェックイン数'] = $groupByDay[$day->format('Y/m/d')] ?? 0;
+                $day->addDay();
+            }
+
             // お惣菜コーナー用のデータ取得
             $publicLinkedEjaculations = Ejaculation::join('users', 'users.id', '=', 'ejaculations.user_id')
                 ->where('users.is_protected', false)
@@ -47,7 +72,7 @@ class HomeController extends Controller
                 ->take(10)
                 ->get();
 
-            return view('home')->with(compact('informations', 'categories', 'publicLinkedEjaculations'));
+            return view('home')->with(compact('informations', 'categories', 'globalEjaculationCounts', 'publicLinkedEjaculations'));
         } else {
             return view('guest')->with(compact('informations', 'categories'));
         }

resources/views/home.blade.php

@@ -43,6 +43,12 @@
             </div>
         </div>
         <div class="col-lg-8">
+            @if (!empty($globalEjaculationCounts))
+                <h5>チェックインの動向</h5>
+                <div class="w-100 mb-3 position-relative" style="height: 70px;">
+                    <canvas id="global-count-graph"></canvas>
+                </div>
+            @endif
             @if (!empty($publicLinkedEjaculations))
                 <h5 class="mb-3">お惣菜コーナー</h5>
                 <p class="text-secondary">最近の公開チェックインから、オカズリンク付きのものを表示しています。</p>
@@ -100,6 +106,7 @@
 @endsection
 
 @push('script')
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/chart.js@2.7.1/dist/Chart.min.js"></script>
     <script>
         $('.link-card').each(function () {
             var $this = $(this);
@@ -138,5 +145,41 @@
                 }
             });
         });
+
+        (function () {
+            var context = document.getElementById('global-count-graph').getContext('2d');
+            var chart = new Chart(context, {
+                type: 'bar',
+                data: {
+                    labels: @json(array_keys($globalEjaculationCounts)),
+                    datasets: [{
+                        data: @json(array_values($globalEjaculationCounts)),
+                        backgroundColor: 'rgba(0, 0, 0, .1)',
+                        borderColor: 'rgba(0, 0, 0, .25)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    maintainAspectRatio: false,
+                    legend: {
+                        display: false
+                    },
+                    elements: {
+                        line: {}
+                    },
+                    scales: {
+                        xAxes: [{
+                            display: false
+                        }],
+                        yAxes: [{
+                            display: false,
+                            ticks: {
+                                beginAtZero: true
+                            }
+                        }]
+                    }
+                }
+            });
+        }());
     </script>
 @endpush