月間グラフのデータ整形をクライアントサイドでやらせる

app/Http/Controllers/UserController.php

@@ -109,13 +109,6 @@ SQL
             }
         }
 
-        // 月間グラフ用の配列初期化
-        $month = Carbon::now()->firstOfMonth()->subMonth(11); // 直近12ヶ月
-        for ($i = 0; $i < 12; $i++) {
-            $monthlySum[$month->format('Y/m')] = 0;
-            $month->addMonth();
-        }
-
         foreach ($groupByDay as $data) {
             $date = Carbon::createFromFormat('Y/m/d', $data->date);
             $yearAndMonth = $date->format('Y/m');
@@ -123,9 +116,7 @@ SQL
             $dailySum[$date->timestamp] = $data->count;
             $yearlySum[$date->year] += $data->count;
             $dowSum[$date->dayOfWeek] += $data->count;
-            if (isset($monthlySum[$yearAndMonth])) {
-                $monthlySum[$yearAndMonth] += $data->count;
-            }
+            $monthlySum[$yearAndMonth] = ($monthlySum[$yearAndMonth] ?? 0) + $data->count;
         }
 
         foreach ($groupByHour as $data) {
@@ -136,8 +127,7 @@ SQL
         $graphData = [
             'dailySum' => $dailySum,
             'dowSum' => $dowSum,
-            'monthlyKey' => array_keys($monthlySum),
-            'monthlySum' => array_values($monthlySum),
+            'monthlySum' => $monthlySum,
             'yearlyKey' => array_keys($yearlySum),
             'yearlySum' => array_values($yearlySum),
             'hourlyKey' => array_keys($hourlySum),

package.json

@@ -16,6 +16,7 @@
     "cal-heatmap": "^3.3.10",
     "chart.js": "^2.7.1",
     "cross-env": "^5.2.0",
+    "date-fns": "^1.30.1",
     "husky": "^1.3.1",
     "jquery": "^3.2.1",
     "js-cookie": "^2.2.0",

resources/assets/js/user/stats.js

@@ -1,5 +1,6 @@
 import CalHeatMap from 'cal-heatmap';
 import Chart from 'chart.js';
+import {addMonths, format, startOfMonth, subMonths} from 'date-fns';
 
 function createLineGraph(id, labels, data) {
     const context = document.getElementById(id).getContext('2d');
@@ -76,7 +77,18 @@ new CalHeatMap().init({
     legend: [1, 2, 3, 4]
 });
 
-createLineGraph('monthly-graph', graphData.monthlyKey, graphData.monthlySum);
+// 直近1年の月間グラフのデータを準備
+const monthlyKey = [];
+const monthlySum = [];
+const monthlyTermFrom = subMonths(startOfMonth(new Date()), 11);
+for (let i = 0; i < 12; i++) {
+    const current = addMonths(monthlyTermFrom, i);
+    const yearAndMonth = format(current, 'YYYY/MM');
+    monthlyKey.push(yearAndMonth);
+    monthlySum.push(graphData.monthlySum[yearAndMonth] || 0);
+}
+
+createLineGraph('monthly-graph', monthlyKey, monthlySum);
 createLineGraph('yearly-graph', graphData.yearlyKey, graphData.yearlySum);
 createBarGraph('hourly-graph', graphData.hourlyKey, graphData.hourlySum);
 createBarGraph('dow-graph', ['日', '月', '火', '水', '木', '金', '土'], graphData.dowSum);

yarn.lock

@@ -2333,7 +2333,7 @@ d3@^3.0.6:
   resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8"
   integrity sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g=
 
-date-fns@^1.27.2:
+date-fns@^1.27.2, date-fns@^1.30.1:
   version "1.30.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==