月別チェックイン回数グラフ

app/Http/Controllers/UserController.php

@@ -63,7 +63,28 @@ SQL
             $calendarData[$timestamp] = $data->count;
         }
 
-        return view('user.stats')->with(compact('user', 'calendarData'));
+        $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'));
     }
 
     public function okazu($name)

resources/views/user/stats.blade.php

@@ -13,10 +13,14 @@
     <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>
+    <canvas id="monthly-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>
 <script>
@@ -31,5 +35,46 @@
         data: @json($calendarData),
         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');
+        var chart = new Chart(context, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: @json($monthlyCounts),
+                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                    borderColor: 'rgba(255, 99, 132, 1)',
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                legend: {
+                    display: false
+                },
+                elements: {
+                    line: {
+                        tension: 0
+                    }
+                },
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: true
+                        }
+                    }]
+                }
+            }
+        });
+    })();
 </script>
 @endpush