116 lines
3.9 KiB
PHP
116 lines
3.9 KiB
PHP
@extends('user.base')
|
|
|
|
@section('title', $user->display_name . ' さんのグラフ')
|
|
|
|
@push('head')
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
|
|
@endpush
|
|
|
|
@section('tab-content')
|
|
@if ($user->is_protected && !$user->isMe())
|
|
<p class="mt-4">
|
|
<span class="oi oi-lock-locked"></span> このユーザはチェックイン履歴を公開していません。
|
|
</p>
|
|
@else
|
|
<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>
|
|
<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>
|
|
<hr class="my-4">
|
|
<h5 class="my-4">時間別チェックイン回数</h5>
|
|
<canvas id="hourly-graph" class="w-100"></canvas>
|
|
<hr class="my-4">
|
|
<h5 class="my-4">曜日別チェックイン回数</h5>
|
|
<canvas id="dow-graph" class="w-100"></canvas>
|
|
@endif
|
|
@endsection
|
|
|
|
@push('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>
|
|
<script>
|
|
var cal = new CalHeatMap();
|
|
cal.init({
|
|
itemSelector: '#cal-heatmap',
|
|
domain: 'month',
|
|
subDomain: 'day',
|
|
domainLabelFormat: '%Y/%m',
|
|
weekStartOnMonday: false,
|
|
start: new Date({{ \Carbon\Carbon::now()->addMonths(-9)->timestamp * 1000 }}),
|
|
range: 10,
|
|
data: @json($dailySum),
|
|
legend: [1, 2, 3, 4]
|
|
});
|
|
|
|
function createLineGraph(id, labels, data) {
|
|
var context = document.getElementById(id).getContext('2d');
|
|
var chart = 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) {
|
|
var context = document.getElementById(id).getContext('2d');
|
|
var chart = 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
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
createLineGraph('monthly-graph', @json(array_keys($monthlySum)), @json(array_values($monthlySum)));
|
|
createLineGraph('yearly-graph', @json(array_keys($yearlySum)), @json(array_values($yearlySum)));
|
|
createBarGraph('hourly-graph', @json(array_keys($hourlySum)), @json(array_values($hourlySum)));
|
|
createBarGraph('dow-graph', ['日', '月', '火', '水', '木', '金', '土'], @json($dowSum));
|
|
</script>
|
|
@endpush |