pepepper/tissue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
shibafu 2019-08-04 01:31:53 +09:00
parent 370d1cc01b
commit 3c2fec21a0
2 changed files with 58 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
resources/assets/js/user/stats.js vendored
View File

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

9
resources/views/user/stats.blade.php
View File

@ -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>