年間チェックイングラフの追加

app/Http/Controllers/UserController.php

@@ -53,38 +53,42 @@ count(*) AS "count"
 SQL
         ))
             ->where('user_id', $user->id)
-            ->where('ejaculated_date', '>=', Carbon::now()->addMonths(-9)->firstOfMonth())
             ->groupBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"))
             ->orderBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"))
             ->get();
-        $calendarData = [];
+
+        $dailySum = [];
+        $monthlySum = [];
+        $yearlySum = [];
+
+        // 年間グラフ用の配列初期化
+        if ($groupByDay->first() !== null) {
+            $year = Carbon::createFromFormat('Y/m/d', $groupByDay->first()->date)->year;
+            $currentYear = date('Y');
+            for (; $year <= $currentYear; $year++) {
+                $yearlySum[$year] = 0;
+            }
+        }
+
+        // 月間グラフ用の配列初期化
+        $month = Carbon::now()->subMonth(11)->firstOfMonth(); // 直近12ヶ月
+        for ($i = 0; $i < 12; $i++) {
+            $monthlySum[$month->format('Y/m')] = 0;
+            $month->addMonth();
+        }
+
         foreach ($groupByDay as $data) {
-            $timestamp = Carbon::createFromFormat('Y/m/d', $data->date)->getTimestamp();
-            $calendarData[$timestamp] = $data->count;
+            $date = Carbon::createFromFormat('Y/m/d', $data->date);
+            $yearAndMonth = $date->format('Y/m');
+
+            $dailySum[$date->timestamp] = $data->count;
+            $yearlySum[$date->year] += $data->count;
+            if (isset($monthlySum[$yearAndMonth])) {
+                $monthlySum[$yearAndMonth] += $data->count;
+            }
         }
 
-        $groupByMonth = Ejaculation::select(DB::raw(<<<'SQL'
-to_char(ejaculated_date, 'YYYY/MM') AS "date",
-count(*) AS "count"
-SQL
-        ))
-            ->where('user_id', $user->id)
-            ->where('ejaculated_date', '>=', Carbon::now()->addMonths(-11)->firstOfMonth())
-            ->groupBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM')"))
-            ->orderBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM')"))
-            ->get();
-        $monthlyCounts = [];
-        $month = (new Carbon())->subMonth(11);
-        while ($month->format('Y/m') <= date('Y/m')) {
-            if ($groupByMonth->first()['date'] === $month->format('Y/m')) {
-                $monthlyCounts[] = $groupByMonth->shift()['count'];
-            } else {
-                $monthlyCounts[] = 0;
-            }
-            $month = $month->addMonth(1);
-        }
-
-        return view('user.stats')->with(compact('user', 'calendarData', 'monthlyCounts'));
+        return view('user.stats')->with(compact('user', 'dailySum', 'monthlySum', 'yearlySum'));
     }
 
     public function okazu($name)

resources/views/user/stats.blade.php

@@ -13,13 +13,15 @@
     <h5 class="my-4">Shikontribution graph</h5>
     <div id="cal-heatmap" class="tis-contribution-graph"></div>
     <hr class="my-4">
-    <h5 class="my-4">月別チェックイン回数</h5>
+    <h5 class="my-4">月間チェックイン回数</h5>
     <canvas id="monthly-graph" class="w-100"></canvas>
+    <hr class="my-4">
+    <h5 class="my-4">年間チェックイン回数</h5>
+    <canvas id="yearly-graph" class="w-100"></canvas>
 @endif
 @endsection
 
 @push('script')
-<script type="text/javascript" src="//cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js"></script>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/chart.js@2.7.1/dist/Chart.min.js"></script>
 <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
 <script type="text/javascript" src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
@@ -32,26 +34,18 @@
         domainLabelFormat: '%Y/%m',
         start: new Date({{ \Carbon\Carbon::now()->addMonths(-9)->timestamp * 1000 }}),
         range: 10,
-        data: @json($calendarData),
+        data: @json($dailySum),
         legend: [1, 2, 3, 4]
     });
 
-    (function () {
-        var labels = [];
-        var m = moment().date(1);
-        while (labels.length < 12) {
-            labels.push(m.format('YYYY/MM'));
-            m = m.subtract(1, 'months');
-        }
-        labels.reverse();
-
-        var context = document.getElementById('monthly-graph').getContext('2d');
+    function createGraph(id, labels, data) {
+        var context = document.getElementById(id).getContext('2d');
         var chart = new Chart(context, {
             type: 'line',
             data: {
                 labels: labels,
                 datasets: [{
-                    data: @json($monthlyCounts),
+                    data: data,
                     backgroundColor: 'rgba(255, 99, 132, 0.2)',
                     borderColor: 'rgba(255, 99, 132, 1)',
                     borderWidth: 1
@@ -75,6 +69,8 @@
                 }
             }
         });
-    })();
+    }
+    createGraph('monthly-graph', @json(array_keys($monthlySum)), @json(array_values($monthlySum)));
+    createGraph('yearly-graph', @json(array_keys($yearlySum)), @json(array_values($yearlySum)));
 </script>
 @endpush