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 00:57:35 +09:00
parent fb84a1d416
commit 370d1cc01b
4 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);
createBarGraph('dow-graph', ['日', '月', '火', '水', '木', '金', '土'], graphData.dowSum);