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

年間チェックイングラフの追加

Browse Source
This commit is contained in:
shibafu
2018-01-04 15:52:04 +09:00
parent c04ec89c3e
commit 7a3a1c1ada
2 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,13 +13,15 @@
<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>
<h5 class="my-4">月間チェックイン回数</h5>
<canvas id="monthly-graph" class="w-100"></canvas>
<hr class="my-4">
<h5 class="my-4">年間チェックイン回数</h5>
<canvas id="yearly-graph" class="w-100"></canvas>
@endif
@endsection
@push('script')
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/chart.js@2.7.1/dist/Chart.min.js"></script>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
@@ -32,26 +34,18 @@
domainLabelFormat: '%Y/%m',
start: new Date({{ \Carbon\Carbon::now()->addMonths(-9)->timestamp * 1000 }}),
range: 10,
data: @json($calendarData),
data: @json($dailySum),
legend: [1, 2, 3, 4]
});
(function () {
var labels = [];
var m = moment().date(1);
while (labels.length < 12) {
labels.push(m.format('YYYY/MM'));
m = m.subtract(1, 'months');
}
labels.reverse();
var context = document.getElementById('monthly-graph').getContext('2d');
function createGraph(id, labels, data) {
var context = document.getElementById(id).getContext('2d');
var chart = new Chart(context, {
type: 'line',
data: {
labels: labels,
datasets: [{
data: @json($monthlyCounts),
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
@@ -75,6 +69,8 @@
}
}
});
})();
}
createGraph('monthly-graph', @json(array_keys($monthlySum)), @json(array_values($monthlySum)));
createGraph('yearly-graph', @json(array_keys($yearlySum)), @json(array_values($yearlySum)));
</script>
@endpush