First view books per month per genre
This commit is contained in:
parent
2318f741a4
commit
e37f48da37
|
@ -1,3 +1,5 @@
|
||||||
|
![alt text](./graph.png)
|
||||||
|
|
||||||
# Reading Analytics System
|
# Reading Analytics System
|
||||||
Analytics system of my reading progress
|
Analytics system of my reading progress
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,6 @@ from django.urls import path
|
||||||
from .views import *
|
from .views import *
|
||||||
|
|
||||||
urlpatterns = [
|
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)
|
||||||
]
|
]
|
|
@ -8,22 +8,6 @@ from django.db.models import Q
|
||||||
from django.templatetags.static import static
|
from django.templatetags.static import static
|
||||||
import json
|
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'])
|
@api_view(['GET'])
|
||||||
def books_per_genre_per_month(request):
|
def books_per_genre_per_month(request):
|
||||||
|
|
||||||
|
@ -53,3 +37,29 @@ def books_per_genre_per_month(request):
|
||||||
return Response(data)
|
return Response(data)
|
||||||
else:
|
else:
|
||||||
return Response("No year header included")
|
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")
|
|
@ -5,12 +5,18 @@ export default class App extends Component {
|
||||||
super(props);
|
super(props);
|
||||||
}
|
}
|
||||||
|
|
||||||
initChart(data, year) {
|
initChart(data, ratings, year) {
|
||||||
|
|
||||||
|
/*
|
||||||
|
----------------------------------
|
||||||
|
Books per month per genre
|
||||||
|
----------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
var genres = [];
|
var genres = [];
|
||||||
|
|
||||||
var colors = [
|
var colors = [
|
||||||
'#d0b2cf', '#b66f2b', '#003C72', '#ecdb0e'
|
'#696ffc', '#7596fa', '#92adfe', '#abc0ff'
|
||||||
]
|
]
|
||||||
|
|
||||||
var dataSet = [];
|
var dataSet = [];
|
||||||
|
@ -48,11 +54,51 @@ export default class App extends Component {
|
||||||
dataSet.push({
|
dataSet.push({
|
||||||
label: genre,
|
label: genre,
|
||||||
data: genreData,
|
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'), {
|
new Chart(document.getElementById('chart'), {
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: {
|
data: {
|
||||||
|
@ -60,29 +106,37 @@ export default class App extends Component {
|
||||||
datasets: dataSet
|
datasets: dataSet
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
showTooltips: true,
|
||||||
legend: {
|
legend: {
|
||||||
display: true,
|
display: true,
|
||||||
},
|
},
|
||||||
tooltips: {
|
interaction: {
|
||||||
mode: 'index',
|
mode: 'index'
|
||||||
intersect: true,
|
|
||||||
axis: 'y'
|
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
x: {
|
x: {
|
||||||
ticks: {
|
ticks: {
|
||||||
beginAtZero: true,
|
beginAtZero: true,
|
||||||
|
color: "white",
|
||||||
},
|
},
|
||||||
stacked: true,
|
stacked: true,
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
ticks: {
|
ticks: {
|
||||||
beginAtZero: true,
|
beginAtZero: true,
|
||||||
stepSize: 1
|
stepSize: 1,
|
||||||
|
color: "white",
|
||||||
},
|
},
|
||||||
stacked: true
|
stacked: true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
color: "white"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -90,9 +144,7 @@ export default class App extends Component {
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
|
||||||
var currentyear = new Date().getFullYear()
|
var currentyear = new Date("2021-09-29").getFullYear()
|
||||||
|
|
||||||
console.log(currentyear);
|
|
||||||
|
|
||||||
fetch('/api/books/genres', {
|
fetch('/api/books/genres', {
|
||||||
"method": "GET",
|
"method": "GET",
|
||||||
|
@ -101,17 +153,26 @@ export default class App extends Component {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(books => {
|
||||||
this.initChart(data, currentyear);
|
fetch('/api/ratings', {
|
||||||
console.log(data);
|
"method": "GET",
|
||||||
|
"headers": {
|
||||||
|
"year": currentyear
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(ratings => {
|
||||||
|
console.log(ratings);
|
||||||
|
this.initChart(books, ratings, currentyear);
|
||||||
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<canvas id="chart"></canvas>
|
<div className="books-per-month"><canvas id="chart"></canvas></div>
|
||||||
<p>Soon here comes the Reading Analytics System! test</p>
|
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -19,6 +19,17 @@
|
||||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
||||||
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
||||||
crossorigin=""></script>
|
crossorigin=""></script>
|
||||||
|
<style>
|
||||||
|
html, body{
|
||||||
|
background:#141b2d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.books-per-month{
|
||||||
|
background: #1f2940;
|
||||||
|
margin:50px;
|
||||||
|
padding:20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
Loading…
Reference in New Issue