From 370d1cc01b57f0a57a8f45c4c4e51162346ee910 Mon Sep 17 00:00:00 2001 From: shibafu Date: Sun, 4 Aug 2019 00:57:35 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E6=9C=88=E9=96=93=E3=82=B0=E3=83=A9?= =?UTF-8?q?=E3=83=95=E3=81=AE=E3=83=87=E3=83=BC=E3=82=BF=E6=95=B4=E5=BD=A2?= =?UTF-8?q?=E3=82=92=E3=82=AF=E3=83=A9=E3=82=A4=E3=82=A2=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=82=B5=E3=82=A4=E3=83=89=E3=81=A7=E3=82=84=E3=82=89=E3=81=9B?= =?UTF-8?q?=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/Http/Controllers/UserController.php | 16 +++------------- package.json | 1 + resources/assets/js/user/stats.js | 16 ++++++++++++++-- yarn.lock | 2 +- 4 files changed, 19 insertions(+), 16 deletions(-) diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php index 04aed97..86e8571 100644 --- a/app/Http/Controllers/UserController.php +++ b/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,21 +116,18 @@ 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) { $hour = (int)$data->hour; $hourlySum[$hour] += $data->count; } - + $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), diff --git a/package.json b/package.json index 76d71d7..dec71a0 100644 --- a/package.json +++ b/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", diff --git a/resources/assets/js/user/stats.js b/resources/assets/js/user/stats.js index adb9628..c38da11 100644 --- a/resources/assets/js/user/stats.js +++ b/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); \ No newline at end of file +createBarGraph('dow-graph', ['日', '月', '火', '水', '木', '金', '土'], graphData.dowSum); diff --git a/yarn.lock b/yarn.lock index e1a9256..7144883 100644 --- a/yarn.lock +++ b/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== From 3c2fec21a067bd3cfc5f222f1ea84f0ea247ff6d Mon Sep 17 00:00:00 2001 From: shibafu Date: Sun, 4 Aug 2019 01:31:53 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E6=9C=88=E9=96=93=E3=83=81=E3=82=A7?= =?UTF-8?q?=E3=83=83=E3=82=AF=E3=82=A4=E3=83=B3=E3=82=B0=E3=83=A9=E3=83=95?= =?UTF-8?q?=E3=81=AE=E5=AF=BE=E8=B1=A1=E5=B9=B4=E3=82=92=E5=88=87=E3=82=8A?= =?UTF-8?q?=E6=9B=BF=E3=81=88=E3=82=89=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/assets/js/user/stats.js | 61 +++++++++++++++++++++++----- resources/views/user/stats.blade.php | 9 +++- 2 files changed, 58 insertions(+), 12 deletions(-) diff --git a/resources/assets/js/user/stats.js b/resources/assets/js/user/stats.js index c38da11..b01625b 100644 --- a/resources/assets/js/user/stats.js +++ b/resources/assets/js/user/stats.js @@ -2,9 +2,11 @@ import CalHeatMap from 'cal-heatmap'; import Chart from 'chart.js'; import {addMonths, format, startOfMonth, subMonths} from 'date-fns'; +const graphData = JSON.parse(document.getElementById('graph-data').textContent); + function createLineGraph(id, labels, data) { const context = document.getElementById(id).getContext('2d'); - new Chart(context, { + return new Chart(context, { type: 'line', data: { labels: labels, @@ -63,7 +65,22 @@ function createBarGraph(id, labels, data) { }); } -const graphData = JSON.parse(document.getElementById('graph-data').textContent); +/** + * @param {Date} from + */ +function createMonthlyGraphData(from) { + const keys = []; + const values = []; + + for (let i = 0; i < 12; i++) { + const current = addMonths(from, i); + const yearAndMonth = format(current, 'YYYY/MM'); + keys.push(yearAndMonth); + values.push(graphData.monthlySum[yearAndMonth] || 0); + } + + return {keys, values}; +} new CalHeatMap().init({ itemSelector: '#cal-heatmap', @@ -78,17 +95,39 @@ new CalHeatMap().init({ }); // 直近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); -} +const {keys: monthlyKey, values: monthlySum} = createMonthlyGraphData(monthlyTermFrom); -createLineGraph('monthly-graph', monthlyKey, monthlySum); +const monthlyGraph = createLineGraph('monthly-graph', monthlyKey, monthlySum); createLineGraph('yearly-graph', graphData.yearlyKey, graphData.yearlySum); createBarGraph('hourly-graph', graphData.hourlyKey, graphData.hourlySum); createBarGraph('dow-graph', ['日', '月', '火', '水', '木', '金', '土'], graphData.dowSum); + +// 月間グラフの期間セレクターを準備 +const monthlyTermSelector = document.getElementById('monthly-term'); +for (let year = monthlyTermFrom.getFullYear(); year <= new Date().getFullYear(); year++) { + const opt = document.createElement('option'); + opt.setAttribute('value', year); + opt.textContent = year; + monthlyTermSelector.insertBefore(opt, monthlyTermSelector.firstChild); +} +if (monthlyTermSelector.children.length) { + monthlyTermSelector.selectedIndex = 0; +} + +monthlyTermSelector.addEventListener('change', function (e) { + let monthlyTermFrom; + if (e.target.selectedIndex === 0) { + // 今年のデータを表示する時は、直近12ヶ月を表示 + monthlyTermFrom = subMonths(startOfMonth(new Date()), 11); + } else { + // 過去のデータを表示する時は、選択年の1〜12月を表示 + monthlyTermFrom = new Date(e.target.value, 0, 1); + } + + const {keys, values} = createMonthlyGraphData(monthlyTermFrom); + + monthlyGraph.data.labels = keys; + monthlyGraph.data.datasets[0].data = values; + monthlyGraph.update(); +}); diff --git a/resources/views/user/stats.blade.php b/resources/views/user/stats.blade.php index e6e7658..37492f8 100644 --- a/resources/views/user/stats.blade.php +++ b/resources/views/user/stats.blade.php @@ -15,7 +15,14 @@
Shikontribution graph
-
月間チェックイン回数
+
+
+
月間チェックイン回数
+
+
+ +
+
年間チェックイン回数
From ab461171380559c357ec7a6f74b1f52a9e882f86 Mon Sep 17 00:00:00 2001 From: shibafu Date: Sun, 4 Aug 2019 01:33:54 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=E5=AF=BE=E8=B1=A1=E5=B9=B4=E3=81=AE?= =?UTF-8?q?=E8=A1=A8=E8=A8=98=E3=82=92=20yyyy=E5=B9=B4=20=E3=81=AB?= =?UTF-8?q?=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/assets/js/user/stats.js | 2 +- resources/views/user/stats.blade.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/assets/js/user/stats.js b/resources/assets/js/user/stats.js index b01625b..25e4895 100644 --- a/resources/assets/js/user/stats.js +++ b/resources/assets/js/user/stats.js @@ -108,7 +108,7 @@ const monthlyTermSelector = document.getElementById('monthly-term'); for (let year = monthlyTermFrom.getFullYear(); year <= new Date().getFullYear(); year++) { const opt = document.createElement('option'); opt.setAttribute('value', year); - opt.textContent = year; + opt.textContent = `${year}年`; monthlyTermSelector.insertBefore(opt, monthlyTermSelector.firstChild); } if (monthlyTermSelector.children.length) { diff --git a/resources/views/user/stats.blade.php b/resources/views/user/stats.blade.php index 37492f8..d202234 100644 --- a/resources/views/user/stats.blade.php +++ b/resources/views/user/stats.blade.php @@ -19,7 +19,7 @@
月間チェックイン回数
-
+