First view books per month per genre

README.md

@@ -1,3 +1,5 @@
+![alt text](./graph.png)
+
 # Reading Analytics System
 Analytics system of my reading progress
 

ras/api/urls.py

@@ -2,6 +2,6 @@ from django.urls import path
 from .views import *
 
 urlpatterns = [
-    path('books', api_all_books),
-    path('books/genres', books_per_genre_per_month)
+    path('books/genres', books_per_genre_per_month),
+    path('ratings', avg_ratings_per_month)
 ]

ras/api/views.py

@@ -8,22 +8,6 @@ from django.db.models import Q
 from django.templatetags.static import static
 import json
 
-@api_view(['GET'])
-def api_all_books(request):
-    df = pd.read_csv("api/static/books2.csv", encoding = "utf-8")
-    books = []
-    for book in df['Books']:
-        info = book.split(';')
-        books.append({
-            "name": info[0],
-            "author": info[1],
-            "genre": info[2],
-            "pages": info[3],
-            "readed": info[4],
-            "rating": info[5]
-        })
-    return Response(books)
-
 @api_view(['GET'])
 def books_per_genre_per_month(request):
 
@@ -50,6 +34,32 @@ def books_per_genre_per_month(request):
                 "count": row['count']
             })
         
+        return Response(data)
+    else:
+        return Response("No year header included")
+
+@api_view(['GET'])
+def avg_ratings_per_month(request):
+    datayear = request.META.get('HTTP_YEAR')
+
+    if datayear:
+        data = []
+
+        # Get CSV file with book data
+        df = pd.read_csv("api/static/books2.csv", encoding = "utf-8", header = 0, sep=';')
+
+        # Filter data on year
+        df = df.where(df['readed'].str.contains(datayear))
+
+        avgratingspermonth = df.groupby('readed')['rating'].mean().reset_index(name="rating")
+
+        for index, row in avgratingspermonth.iterrows():
+
+            data.append({
+                "date": row['readed'],
+                "rating": int(row['rating'])
+            })
+        
         return Response(data)
     else:
         return Response("No year header included")

ras/frontend/src/App.js

@@ -5,15 +5,21 @@ export default class App extends Component {
         super(props);
     }
 
-    initChart(data, year) {
+    initChart(data, ratings, year) {
+
+        /*
+        ----------------------------------
+             Books per month per genre
+        ----------------------------------
+        */
 
         var genres = [];
 
         var colors = [
-            '#d0b2cf', '#b66f2b', '#003C72', '#ecdb0e'
+            '#696ffc', '#7596fa', '#92adfe', '#abc0ff'
         ]
 
-        var dataSet = []; 
+        var dataSet = [];
 
         data.forEach(book => {
             if (!genres.includes(book.genre)) {
@@ -48,11 +54,51 @@ export default class App extends Component {
                 dataSet.push({
                     label: genre,
                     data: genreData,
-                    backgroundColor: colors[index]
+                    backgroundColor: colors[index],
+                    order: 2
                 })
             })
         }
 
+        /*
+        ----------------------------------
+             Avarage ratings per month
+        ----------------------------------
+        */
+
+        var avgRatings = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+
+        for (var j = 0; j < 12; j++) {
+
+            if (j < 9) {
+                var month = "0" + (j + 1)
+            } else {
+                month = (j + 1)
+            }
+
+            for (var i = 0; i < ratings.length; i++) {
+                if (ratings[i].date == month + '-' + year) {
+                    avgRatings[j] = ratings[i].rating;
+                }
+            }
+        }
+
+        dataSet.push({
+            label: 'Gemiddelde beoordeling',
+            data: avgRatings,
+            backgroundColor: '#ffa500',
+            borderColor: '#ffa500',
+            tension: 0.4,
+            type: 'line',
+            order: 1
+        })
+
+        /*
+        ----------------------------------
+             Stacked bar chart
+        ----------------------------------
+        */
+
         new Chart(document.getElementById('chart'), {
             type: 'bar',
             data: {
@@ -60,29 +106,37 @@ export default class App extends Component {
                 datasets: dataSet
             },
             options: {
+                responsive: true,
+                showTooltips: true,
                 legend: {
                     display: true,
                 },
-                tooltips: {
-                    mode: 'index',
-                    intersect: true,
-                    axis: 'y'
+                interaction: {
+                    mode: 'index'
                 },
                 scales: {
                     x: {
                         ticks: {
                             beginAtZero: true,
-
+                            color: "white",
                         },
                         stacked: true,
                     },
                     y: {
                         ticks: {
                             beginAtZero: true,
-                            stepSize: 1
+                            stepSize: 1,
+                            color: "white",
                         },
                         stacked: true
                     }
+                },
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: "white"
+                        }
+                    }
                 }
             }
         });
@@ -90,9 +144,7 @@ export default class App extends Component {
 
     componentDidMount() {
 
-        var currentyear = new Date().getFullYear()
-
-        console.log(currentyear);
+        var currentyear = new Date("2021-09-29").getFullYear()
 
         fetch('/api/books/genres', {
             "method": "GET",
@@ -101,17 +153,26 @@ export default class App extends Component {
             }
         })
             .then(response => response.json())
-            .then(data => {
-                this.initChart(data, currentyear);
-                console.log(data);
+            .then(books => {
+                fetch('/api/ratings', {
+                    "method": "GET",
+                    "headers": {
+                        "year": currentyear
+                    }
+                })
+                    .then(response => response.json())
+                    .then(ratings => {
+                        console.log(ratings);
+                        this.initChart(books, ratings, currentyear);
+                    })
+
             })
     }
 
     render() {
         return (
             <React.Fragment>
-                <canvas id="chart"></canvas>
-                <p>Soon here comes the Reading Analytics System! test</p>
+                <div className="books-per-month"><canvas id="chart"></canvas></div>
             </React.Fragment>
 
         )

ras/frontend/templates/index.html

@@ -19,6 +19,17 @@
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
+   <style>
+    html, body{
+      background:#141b2d;
+    }
+
+    .books-per-month{
+      background: #1f2940;
+      margin:50px;
+      padding:20px;
+    }
+   </style>
   </head>
   
   <body>