グラフページを対象期間ごとに掘り下げる形に変更

This commit is contained in:
shibafu
2020-05-24 17:27:42 +09:00
parent 00f75f33cc
commit 019412c72a
9 changed files with 302 additions and 131 deletions

View File

@@ -0,0 +1,14 @@
<div class="d-flex flex-row align-items-end">
<img src="{{ $user->getProfileImageUrl(48) }}" srcset="{{ Formatter::profileImageSrcSet($user, 48) }}" class="rounded mr-2">
<div class="d-flex flex-column overflow-hidden">
<h5 class="card-title text-truncate">
<a class="text-dark" href="{{ route('user.profile', ['name' => $user->name]) }}">{{ $user->display_name }}</a>
</h5>
<h6 class="card-subtitle">
<a class="text-muted" href="{{ route('user.profile', ['name' => $user->name]) }}">&commat;{{ $user->name }}</a>
@if ($user->is_protected)
<span class="oi oi-lock-locked text-muted"></span>
@endif
</h6>
</div>
</div>

View File

@@ -4,8 +4,17 @@
<div class="container">
<div class="row">
<div class="col-lg-4">
@component('components.profile', ['user' => $user])
@endcomponent
@if (Route::currentRouteName() === 'user.profile')
@component('components.profile', ['user' => $user])
@endcomponent
@else
<div class="card mb-4">
<div class="card-body">
@component('components.profile-mini', ['user' => $user])
@endcomponent
</div>
</div>
@endif
@section('sidebar')
@show
</div>
@@ -15,7 +24,7 @@
<a class="nav-link {{ Route::currentRouteName() === 'user.profile' ? 'active' : '' }}" href="{{ route('user.profile', ['name' => $user->name]) }}">タイムライン</a>
</li>
<li class="nav-item">
<a class="nav-link {{ Route::currentRouteName() === 'user.stats' ? 'active' : '' }}" href="{{ route('user.stats', ['name' => $user->name]) }}">グラフ</a>
<a class="nav-link {{ stripos(Route::currentRouteName(), 'user.stats') === 0 ? 'active' : '' }}" href="{{ route('user.stats', ['name' => $user->name]) }}">グラフ</a>
</li>
<li class="nav-item">
<a class="nav-link {{ Route::currentRouteName() === 'user.okazu' ? 'active' : '' }}" href="{{ route('user.okazu', ['name' => $user->name]) }}">オカズ</a>

View File

@@ -0,0 +1,20 @@
@extends('user.stats.base')
@section('title', $user->display_name . ' さんのグラフ')
@section('stats-content')
<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>
@endsection
@push('script')
<script id="graph-data" type="application/json">@json($graphData)</script>
<script src="{{ mix('js/vendor/chart.js') }}"></script>
<script src="{{ mix('js/user/stats.js') }}"></script>
@endpush

View File

@@ -0,0 +1,70 @@
@extends('user.base')
@section('sidebar')
@if (!$user->is_protected || $user->isMe())
<div class="nav d-none d-lg-flex flex-column nav-pills" aria-orientation="vertical">
<a class="nav-link {{ Route::currentRouteName() === 'user.stats.all' ? 'active' : '' }}"
href="{{ route('user.stats.all', ['name' => $user->name]) }}">全期間</a>
@foreach ($availableMonths as $year => $months)
<div class="border-top mt-1">
<a class="nav-link mt-1 {{ Route::currentRouteName() === 'user.stats.yearly' && $currentYear === $year ? 'active' : '' }}"
href="{{ route('user.stats.yearly', ['name' => $user->name, 'year' => $year]) }}">{{ $year }}</a>
@foreach ($months as $month)
<a class="nav-link ml-3 {{ Route::currentRouteName() === 'user.stats.monthly' && $currentYear === $year && $currentMonth === $month ? 'active' : '' }}"
href="{{ route('user.stats.monthly', ['name' => $user->name, 'year' => $year, 'month' => $month]) }}">{{ $month }}</a>
@endforeach
</div>
@endforeach
</div>
@endif
@endsection
@section('tab-content')
@if ($user->is_protected && !$user->isMe())
<p class="mt-4">
<span class="oi oi-lock-locked"></span> このユーザはチェックイン履歴を公開していません。
</p>
@else
<div class="row my-2 d-lg-none">
<div class="col-12 text-secondary font-weight-bold small">グラフの対象期間</div>
<div class="col-6 text-secondary small"></div>
<div class="col-6 text-secondary small"></div>
<div class="col-12">
<ul class="nav nav-pills nav-fill">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{{ Route::currentRouteName() === 'user.stats.all' ? '全期間' : "{$currentYear}" }}
</a>
<div class="dropdown-menu">
<a href="{{ route('user.stats.all', ['name' => $user->name]) }}" class="dropdown-item">全期間</a>
@foreach ($availableMonths as $year => $months)
<a href="{{ route('user.stats.yearly', ['name' => $user->name, 'year' => $year]) }}" class="dropdown-item">{{ $year }}</a>
@endforeach
</div>
</li>
@if (Route::currentRouteName() === 'user.stats.all')
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle disabled"
href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">全期間</a>
</li>
@else
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{{ Route::currentRouteName() === 'user.stats.yearly' ? '全期間' : "{$currentMonth}" }}
</a>
<div class="dropdown-menu">
<a href="{{ route('user.stats.yearly', ['name' => $user->name, 'year' => $year]) }}" class="dropdown-item">全期間</a>
@foreach ($availableMonths[$currentYear] as $month)
<a href="{{ route('user.stats.monthly', ['name' => $user->name, 'year' => $year, 'month' => $month]) }}" class="dropdown-item">{{ $month }}</a>
@endforeach
</div>
</li>
@endif
</ul>
</div>
</div>
<div class="row d-lg-none no-gutters border-bottom"></div>
@yield('stats-content')
@endif
@endsection

View File

@@ -0,0 +1,17 @@
@extends('user.stats.base')
@section('title', $user->display_name . ' さんのグラフ')
@section('stats-content')
<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>
@endsection
@push('script')
<script id="graph-data" type="application/json">@json($graphData)</script>
<script src="{{ mix('js/vendor/chart.js') }}"></script>
<script src="{{ mix('js/user/stats.js') }}"></script>
@endpush

View File

@@ -1,4 +1,4 @@
@extends('user.base')
@extends('user.stats.base')
@section('title', $user->display_name . ' さんのグラフ')
@@ -6,34 +6,18 @@
<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
@section('stats-content')
<h5 class="my-4">Shikontribution graph</h5>
<div id="cal-heatmap" class="tis-contribution-graph"></div>
<hr class="my-4">
<div class="row my-4">
<div class="col-12 col-lg-6 d-flex align-items-center">
<h5 class="my-0">月間チェックイン回数</h5>
</div>
<div class="col-12 col-lg-6 mt-2 mt-lg-0">
<select id="monthly-term" class="form-control"></select>
</div>
</div>
<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')