プロフィールトップに最近のシコ草を移動

app/Http/Controllers/UserController.php

@@ -62,7 +62,18 @@ SQL
             ->limit(10)
             ->get();
 
-        return view('user.profile')->with(compact('user', 'ejaculations', 'tags'));
+        // シコ草
+        $countByDayQuery = $this->countEjaculationByDay($user)
+            ->where('ejaculated_date', '>=', now()->startOfMonth()->subMonths(9))
+            ->where('ejaculated_date', '<', now()->addMonth()->startOfMonth())
+            ->get();
+        $countByDay = [];
+        foreach ($countByDayQuery as $data) {
+            $date = Carbon::createFromFormat('Y/m/d', $data->date);
+            $countByDay[$date->timestamp] = $data->count;
+        }
+
+        return view('user.profile')->with(compact('user', 'ejaculations', 'tags', 'countByDay'));
     }
 
     public function stats($name)
@@ -223,16 +234,8 @@ SQL
             $dateCondition[] = ['ejaculated_date', '>=', $dateSince];
         }
 
-        $groupByDay = Ejaculation::select(DB::raw(
-            <<<'SQL'
-to_char(ejaculated_date, 'YYYY/MM/DD') AS "date",
-count(*) AS "count"
-SQL
-        ))
-            ->where('user_id', $user->id)
+        $groupByDay = $this->countEjaculationByDay($user)
             ->where($dateCondition)
-            ->groupBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"))
-            ->orderBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"))
             ->get();
 
         $groupByHour = Ejaculation::select(DB::raw(
@@ -287,4 +290,17 @@ SQL
             'hourlySum' => array_values($hourlySum),
         ];
     }
+
+    private function countEjaculationByDay(User $user)
+    {
+        return Ejaculation::select(DB::raw(
+            <<<'SQL'
+to_char(ejaculated_date, 'YYYY/MM/DD') AS "date",
+count(*) AS "count"
+SQL
+        ))
+            ->where('user_id', $user->id)
+            ->groupBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"))
+            ->orderBy(DB::raw("to_char(ejaculated_date, 'YYYY/MM/DD')"));
+    }
 }

resources/assets/js/user/profile.js

@@ -0,0 +1,15 @@
+import CalHeatMap from 'cal-heatmap';
+
+if (document.getElementById('cal-heatmap')) {
+    new CalHeatMap().init({
+        itemSelector: '#cal-heatmap',
+        domain: 'month',
+        subDomain: 'day',
+        domainLabelFormat: '%Y/%m',
+        weekStartOnMonday: false,
+        start: new Date().setMonth(new Date().getMonth() - 9),
+        range: 10,
+        data: JSON.parse(document.getElementById('count-by-day').textContent),
+        legend: [1, 2, 3, 4]
+    });
+}

resources/views/user/profile.blade.php

@@ -2,6 +2,12 @@
 
 @section('title', $user->display_name . ' (@' . $user->name . ')')
 
+@push('head')
+    @if (Route::currentRouteName() === 'user.profile')
+        <link rel="stylesheet" href="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
+    @endif
+@endpush
+
 @section('sidebar')
     {{-- TODO: タイムラインとオカズのテンプレを分けたら条件外す --}}
     @if (Route::currentRouteName() === 'user.profile')
@@ -32,6 +38,11 @@
         <span class="oi oi-lock-locked"></span> このユーザはチェックイン履歴を公開していません。
     </p>
 @else
+    @if ($ejaculations->count() !== 0 && $ejaculations->currentPage() === 1)
+        <h5 class="mx-4 my-3">Shikontributions</h5>
+        <div id="cal-heatmap" class="tis-contribution-graph mx-4 mt-3"></div>
+        <hr class="mt-4 mb-2">
+    @endif
     <ul class="list-group">
         @forelse ($ejaculations as $ejaculation)
             <li class="list-group-item border-bottom-only pt-3 pb-3 text-break">
@@ -116,3 +127,10 @@
     @endslot
 @endcomponent
 @endsection
+
+@push('script')
+    <script id="count-by-day" type="application/json">@json($countByDay)</script>
+    <script src="{{ mix('js/vendor/chart.js') }}"></script>
+    <script src="{{ mix('js/user/profile.js') }}"></script>
+@endpush
+

webpack.mix.js

@@ -14,6 +14,7 @@ require('laravel-mix-bundle-analyzer')
 
 mix.js('resources/assets/js/app.js', 'public/js')
     .js('resources/assets/js/home.js', 'public/js')
+    .js('resources/assets/js/user/profile.js', 'public/js/user')
     .js('resources/assets/js/user/stats.js', 'public/js/user')
     .js('resources/assets/js/setting/privacy.js', 'public/js/setting')
     .js('resources/assets/js/setting/import.js', 'public/js/setting')