月間チェックイングラフの対象年を切り替えられるようにした

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();
+});

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>