有名なヒートマップのようなやつを搭載した

This commit is contained in:
shibafu 2017-11-07 00:22:40 +09:00
parent 58258f8fe3
commit 6d0472c14b
2 changed files with 43 additions and 2 deletions

View File

@ -47,7 +47,23 @@ SQL
abort(404);
}
return view('user.stats')->with(compact('user'));
$groupByDay = Ejaculation::select(DB::raw(<<<'SQL'
to_char(ejaculated_date, 'YYYY/MM/DD') AS "date",
count(*) AS "count"
SQL
))
->where('user_id', $user->id)
->where('ejaculated_date', '>=', Carbon::now()->addMonths(-9)->firstOfMonth())
->groupBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"))
->orderBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"))
->get();
$calendarData = [];
foreach ($groupByDay as $data) {
$timestamp = Carbon::createFromFormat('Y/m/d', $data->date)->getTimestamp();
$calendarData[$timestamp] = $data->count;
}
return view('user.stats')->with(compact('user', 'calendarData'));
}
public function okazu($name)

View File

@ -1,10 +1,35 @@
@extends('user.base')
@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"></div>
<hr class="my-4">
@endif
@endsection
@push('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',
start: new Date({{ \Carbon\Carbon::now()->addMonths(-9)->timestamp * 1000 }}),
range: 10,
data: @json($calendarData),
legend: [1, 2, 3, 4]
});
</script>
@endpush