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

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
+