From 74e73666e5f79fe5862bc9cd2c8d244004c381b4 Mon Sep 17 00:00:00 2001
From: horus
Date: Tue, 24 Mar 2020 17:18:39 +0100
Subject: Integrate chart.js to display anime stats.

---
 resources/views/anime.blade.php | 148 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 134 insertions(+), 14 deletions(-)

(limited to 'resources/views/anime.blade.php')

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
-- 
cgit v1.2.3