グラフ画面のインラインスクリプトをuser/stats.jsに移動

2019-03-05 01:04:20 +09:00
parent d4d98db686
commit 2c396da84e
3 changed files with 100 additions and 83 deletions
--- a/resources/assets/js/user/stats.js
+++ b/resources/assets/js/user/stats.js
@@ -0,0 +1,90 @@
+import CalHeatMap from 'cal-heatmap';
+import Chart from 'chart.js';
+
+function createLineGraph(id, labels, data) {
+    const context = document.getElementById(id).getContext('2d');
+    new Chart(context, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [{
+                data: data,
+                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                borderColor: 'rgba(255, 99, 132, 1)',
+                borderWidth: 1
+            }]
+        },
+        options: {
+            legend: {
+                display: false
+            },
+            elements: {
+                line: {
+                    tension: 0
+                }
+            },
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            }
+        }
+    });
+}
+
+function createBarGraph(id, labels, data) {
+    const context = document.getElementById(id).getContext('2d');
+    new Chart(context, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{
+                data: data,
+                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                borderColor: 'rgba(255, 99, 132, 1)',
+                borderWidth: 1
+            }]
+        },
+        options: {
+            legend: {
+                display: false
+            },
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            }
+        }
+    });
+}
+
+// TODO: これはいくらなんでもひどすぎるだろ
+const dailySum = JSON.parse(document.getElementById('graph-daily-sum').textContent);
+const monthlyKey = JSON.parse(document.getElementById('graph-monthly-key').textContent);
+const monthlySum = JSON.parse(document.getElementById('graph-monthly-sum').textContent);
+const yearlyKey = JSON.parse(document.getElementById('graph-yearly-key').textContent);
+const yearlySum = JSON.parse(document.getElementById('graph-yearly-sum').textContent);
+const hourlyKey = JSON.parse(document.getElementById('graph-hourly-key').textContent);
+const hourlySum = JSON.parse(document.getElementById('graph-hourly-sum').textContent);
+const dowSum = JSON.parse(document.getElementById('graph-dow-sum').textContent);
+
+new CalHeatMap().init({
+    itemSelector: '#cal-heatmap',
+    domain: 'month',
+    subDomain: 'day',
+    domainLabelFormat: '%Y/%m',
+    weekStartOnMonday: false,
+    start: new Date().setMonth(new Date().getMonth() - 9),
+    range: 10,
+    data: dailySum,
+    legend: [1, 2, 3, 4]
+});
+
+createLineGraph('monthly-graph', monthlyKey, monthlySum);
+createLineGraph('yearly-graph', yearlyKey, yearlySum);
+createBarGraph('hourly-graph', hourlyKey, hourlySum);
+createBarGraph('dow-graph', ['日', '月', '火', '水', '木', '金', '土'], dowSum);