Integrate chart.js to display anime stats.

4 files changed, 163 insertions, 16 deletions

diff --git a/resources/views/anime.blade.php b/resources/views/anime.blade.php
index 0e5596b..f2daedf 100644
--- a/resources/views/anime.blade.php
+++ b/resources/views/anime.blade.php
@@ -1,15 +1,17 @@
-@extends('layouts.app')
+@extends('layouts.app', [ 'title' => $anime["title_pref"]] )
 
 @section('content')
 <div class="container" id="index">
 	<h1>{{ $anime->title_pref }}</h1>
 
 	<div class="row">
-		<div class="col-sm">
-			<img src="{{ $anime->image_url }}" class="img-fluid">	
+		<div class="col-sm-4 col-lg-3">
+			<img src="{{ $anime->image_url }}" class="img-fluid" style="margin-bottom: 10px;">
 		</div>
-		<div class="col-sm">
-			{!! str_replace("%%br%%", "<br>", e($anime->synopsis)) !!}
+		<div class="col-sm-8 col-lg-9">
+			<h2>Synopsis</h2>
+			<!--{!! str_replace("%%br%%", "<br>", e($anime->synopsis)) !!}-->
+			{!! replaceSpecialChars(e($anime->synopsis)) !!}
 			<br>
 			<br>
 			<strong>Score: </strong> {{ $anime["basic_data"]->score }}
@@ -19,42 +21,160 @@
 			<strong>Popularity: </strong> {{ $anime["basic_data"]->popularity }}
 			<br>
 			<strong>Members: </strong> {{ $anime["basic_data"]->members }}
+			<br>
+			<a href="{{ $anime->url}}" title="Link zu MAL">Link zu MyAnimeList</a>
 		</div>
 	</div>
 
 	<p>
-	<h2>Score History</h2>
-	<canvas id="score_chart" height=""></canvas>
+		<h2>Score History</h2>
+		<canvas id="score_chart"></canvas>
+	</p>
+	<p>
+		<h2>Rank History</h2>
+		<canvas id="rank_chart"></canvas>
+	</p>
+	<p>
+		<h2>Popularity History</h2>
+		<canvas id="popularity_chart"></canvas>
+	</p>
+	<p>
+		<h2>Members History</h2>
+		<canvas id="members_chart"></canvas>
+	</p>
+	<p>
+		<h2>Favorites History</h2>
+		<canvas id="favorites_chart"></canvas>
+	</p>
 	<!--
 	{{ $anime }}
 	-->
-	</p>
 </div>
 <script>
-var ctx = document.getElementById('score_chart');
-var myChart = new Chart(ctx, {
+window.onload = function() {
+new Chart(document.getElementById('score_chart'), {
     type: 'line',
     data: {
-        labels: {!! json_encode($anime["score_label"]) !!},
+        labels: {!! json_encode($anime["chart_label"]) !!},
         datasets: [{
             label: 'Average Score on MAL',
             data: {{ json_encode($anime["score"]) }},
-	    file: 'false',	
+	    file: 'false',
 	    borderColor: 'rgb(75, 192, 192)',
 	    lineTension: 0.01,
 	    backgroundColor: 'white',
         }]
     },
     options: {
+	maintainAspectRatio: true,
         scales: {
             yAxes: [{
                 ticks: {
-                    beginAtZero: false
+		    beginAtZero: false,
+		    stepSize: 0.05,
                 }
             }]
         }
     }
 });
-
+new Chart(document.getElementById('rank_chart'), {
+    type: 'line',
+    data: {
+        labels: {!! json_encode($anime["chart_label"]) !!},
+        datasets: [{
+            label: 'Ranking of best Anime',
+            data: {{ json_encode($anime["rank"]) }},
+	    file: 'false',
+	    borderColor: 'rgb(75, 192, 192)',
+	    lineTension: 0.01,
+	    backgroundColor: 'white',
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero: false,
+                    reverse: true,
+		    stepSize: 1,
+                }
+            }]
+        }
+    }
+});
+new Chart(document.getElementById('popularity_chart'), {
+    type: 'line',
+    data: {
+        labels: {!! json_encode($anime["chart_label"]) !!},
+        datasets: [{
+            label: 'Popularity Score on MAL',
+            data: {{ json_encode($anime["popularity"]) }},
+	    file: 'false',
+	    borderColor: 'rgb(75, 192, 192)',
+	    lineTension: 0.01,
+	    backgroundColor: 'white',
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero: false,
+                    reverse: true,
+		    stepSize: 1,
+                }
+            }]
+        }
+    }
+});
+new Chart(document.getElementById('favorites_chart'), {
+    type: 'line',
+    data: {
+        labels: {!! json_encode($anime["chart_label"]) !!},
+        datasets: [{
+            label: 'Count of Favorites',
+            data: {{ json_encode($anime["favorites"]) }},
+	    file: 'false',
+	    borderColor: 'rgb(75, 192, 192)',
+	    lineTension: 0.01,
+	    backgroundColor: 'white',
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero: false,
+                    reverse: false,
+                }
+            }]
+        }
+    }
+});
+new Chart(document.getElementById('members_chart'), {
+    type: 'line',
+    data: {
+        labels: {!! json_encode($anime["chart_label"]) !!},
+        datasets: [{
+            label: 'Count of People which have this on Watch list',
+            data: {{ json_encode($anime["members"]) }},
+	    file: 'false',
+	    borderColor: 'rgb(75, 192, 192)',
+	    lineTension: 0.01,
+	    backgroundColor: 'white',
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero: false,
+                    reverse: false,
+                }
+            }]
+        }
+    }
+});
+};
 </script>
 @endsection
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 8a58e54..120c989 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -5,5 +5,6 @@
 	<h1>Anime Schedule</h1>
 
 	<p>fyi: it works!</p>
+	<a href="/anime">Link to anime stats</a>
 </div>
 @endsection
diff --git a/resources/views/index_anime.blade.php b/resources/views/index_anime.blade.php
new file mode 100644
index 0000000..8b0a587
--- /dev/null
+++ b/resources/views/index_anime.blade.php
@@ -0,0 +1,26 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container" id="index">
+
+@foreach($all_anime as $anime)
+	<div class="row">
+		<div class="col-sm-4 col-lg-3">
+			<a href="/anime/{{ $anime->mal_id}}" title="Click for more data">
+				<img src="{{ $anime->image_url }}" class="img-fluid" style="margin-bottom: 10px;">	
+			</a>
+		</div>
+		<div class="col-sm-8 col-lg-9">
+			<h2>{{ $anime->title_pref }}</h2>
+			<!--{!! str_replace("%%br%%", "<br>", e($anime->synopsis)) !!}-->
+			{!! replaceSpecialChars(e($anime->synopsis)) !!}
+			<br>
+			<br>
+			<a href="/anime/{{ $anime->mal_id}}" title="Click for more data">
+				Click for more data
+			</a>
+		</div>
+	</div>
+@endforeach
+</div>
+@endsection
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 4090062..f1289ec 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -8,11 +8,11 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <link rel="shortcut icon" href="https://iamfabulous.de/favicon.ico">
 
-    <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>@if (isset($title)) {{$title . " - "}} @endif {{ config('app.name') }}</title>
 
     <!-- Scripts -->
     <script src="{{ asset('js/app.js') }}" defer></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
+    <!--script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script-->
 
     <!-- Fonts -->
     <link rel="dns-prefetch" href="//fonts.gstatic.com">