時間帯・曜日別チェックイン回数グラフ (#14)

* 曜日別回数グラフの追加
* 時間別回数グラフの追加
This commit is contained in:
shibafu 2019-01-02 14:44:31 +09:00 committed by GitHub
parent bcc9f3acda
commit b39b43e705
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 4 deletions

View File

@ -73,9 +73,21 @@ SQL
->orderBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"))
->get();
$groupByHour = Ejaculation::select(DB::raw(<<<'SQL'
to_char(ejaculated_date, 'HH24') AS "hour",
count(*) AS "count"
SQL
))
->where('user_id', $user->id)
->groupBy(DB::raw("to_char(ejaculated_date, 'HH24')"))
->orderBy(DB::raw("1"))
->get();
$dailySum = [];
$monthlySum = [];
$yearlySum = [];
$dowSum = array_fill(0, 7, 0);
$hourlySum = array_fill(0, 24, 0);
// 年間グラフ用の配列初期化
if ($groupByDay->first() !== null) {
@ -99,12 +111,18 @@ SQL
$dailySum[$date->timestamp] = $data->count;
$yearlySum[$date->year] += $data->count;
$dowSum[$date->dayOfWeek] += $data->count;
if (isset($monthlySum[$yearAndMonth])) {
$monthlySum[$yearAndMonth] += $data->count;
}
}
return view('user.stats')->with(compact('user', 'dailySum', 'monthlySum', 'yearlySum'));
foreach ($groupByHour as $data) {
$hour = (int)$data->hour;
$hourlySum[$hour] += $data->count;
}
return view('user.stats')->with(compact('user', 'dailySum', 'monthlySum', 'yearlySum', 'dowSum', 'hourlySum'));
}
public function okazu($name)

View File

@ -18,6 +18,12 @@
<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
@ -39,7 +45,7 @@
legend: [1, 2, 3, 4]
});
function createGraph(id, labels, data) {
function createLineGraph(id, labels, data) {
var context = document.getElementById(id).getContext('2d');
var chart = new Chart(context, {
type: 'line',
@ -71,7 +77,38 @@
}
});
}
createGraph('monthly-graph', @json(array_keys($monthlySum)), @json(array_values($monthlySum)));
createGraph('yearly-graph', @json(array_keys($yearlySum)), @json(array_values($yearlySum)));
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