From 3c2fec21a067bd3cfc5f222f1ea84f0ea247ff6d Mon Sep 17 00:00:00 2001
From: shibafu <shibafu528@gmail.com>
Date: Sun, 4 Aug 2019 01:31:53 +0900
Subject: [PATCH] =?UTF-8?q?=E6=9C=88=E9=96=93=E3=83=81=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=82=A4=E3=83=B3=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AE?=
 =?UTF-8?q?=E5=AF=BE=E8=B1=A1=E5=B9=B4=E3=82=92=E5=88=87=E3=82=8A=E6=9B=BF?=
 =?UTF-8?q?=E3=81=88=E3=82=89=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=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    | 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 @@
     <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>
+    <div class="row my-4">
+        <div class="col-12 col-lg-6 d-flex align-items-center">
+            <h5 class="my-0">月間チェックイン回数</h5>
+        </div>
+        <div class="col-12 col-lg-6">
+            <select id="monthly-term" class="form-control"></select>
+        </div>
+    </div>
     <canvas id="monthly-graph" class="w-100"></canvas>
     <hr class="my-4">
     <h5 class="my-4">年間チェックイン回数</h5>