changes to genres en languages
This commit is contained in:
parent
bdd68a55f7
commit
895c7c9ff5
|
@ -207,6 +207,105 @@ export const initDoughnut = (data) => {
|
|||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
display: false,
|
||||
labels: {
|
||||
padding: 20,
|
||||
usePointStyle: true,
|
||||
// This more specific font property overrides the global property
|
||||
color: "#333",
|
||||
font: {
|
||||
size: 11,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [{
|
||||
id: 'legendMargin',
|
||||
beforeInit(chart, legend, options) {
|
||||
const fitValue = chart.legend.fit;
|
||||
|
||||
chart.legend.fit = function fit() {
|
||||
fitValue.bind(chart.legend)();
|
||||
return this.height += 30;
|
||||
}
|
||||
}
|
||||
}],
|
||||
});
|
||||
}
|
||||
|
||||
export const initDoughnut2 = (data) => {
|
||||
console.log(data);
|
||||
var labels = [];
|
||||
var counts = [];
|
||||
|
||||
data.forEach((count) => {
|
||||
if (!labels.includes(count.name)) {
|
||||
labels.push(count.name)
|
||||
}
|
||||
|
||||
counts.push(count.count)
|
||||
})
|
||||
|
||||
const legendMargin = {
|
||||
id: 'legendMargin',
|
||||
beforeInit(chart, legend, options) {
|
||||
const fitValue = chart.legend.fit;
|
||||
|
||||
chart.legend.fit = function fit() {
|
||||
fitValue.bind(chart.legend)();
|
||||
return this.height += 30;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$("canvas#chartLangs").remove();
|
||||
data && data.length > 0 ? $(".no-data-msg").remove() : $("canvas#chartLangs").remove();
|
||||
data && data.length > 0 ? $("div.languages").append('<canvas id="chartLangs"></canvas>') : $("div.languages").append('<div class="no-data-msg">Geen data beschikbaar</div>');
|
||||
|
||||
var ctx = document.getElementById("chartLangs");
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: '# of Tomatoes',
|
||||
data: counts,
|
||||
backgroundColor: [
|
||||
'#405181', '#01a9ac', '#64c5b1', '#1ABB9C'
|
||||
],
|
||||
borderWidth: 0,
|
||||
borderColor: '#1f2940',
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (context) {
|
||||
let label = context.label;
|
||||
let value = context.formattedValue;
|
||||
|
||||
if (!label)
|
||||
label = 'Unknown'
|
||||
|
||||
let sum = 0;
|
||||
let dataArr = context.chart.data.datasets[0].data;
|
||||
dataArr.map(data => {
|
||||
sum += Number(data);
|
||||
});
|
||||
|
||||
let percentage = (value * 100 / sum).toFixed(1) + '%';
|
||||
return label + ": " + percentage;
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
showAllTooltips: true,
|
||||
cutout: '80%',
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
display: false,
|
||||
labels: {
|
||||
padding: 20,
|
||||
usePointStyle: true,
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const Genres = (props) => {
|
||||
const [genresbooks, setGenresBooks] = useState([])
|
||||
|
||||
const getData = async () => {
|
||||
const [data, charts] = await Promise.all([
|
||||
await import("./Data.js"),
|
||||
|
@ -11,6 +13,7 @@ const Genres = (props) => {
|
|||
|
||||
if(yeargenres){
|
||||
charts.initDoughnut(yeargenres, props.year);
|
||||
setGenresBooks(yeargenres);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -22,6 +25,38 @@ const Genres = (props) => {
|
|||
<React.Fragment>
|
||||
<div className="genresPercent">
|
||||
<span className="block_name">Genres</span>
|
||||
|
||||
<table className="ratingstable responsive nowrap" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>genre</th>
|
||||
<th>count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{genresbooks.map(genre => {
|
||||
|
||||
var dotcolor = '';
|
||||
|
||||
if(genre.genre === "Thriller"){
|
||||
dotcolor = '#405181';
|
||||
}else if (genre.genre === "Roman"){
|
||||
dotcolor = '#01a9ac';
|
||||
}else if(genre.genre === 'Non-fictie'){
|
||||
dotcolor = '#64c5b1';
|
||||
}else{
|
||||
dotcolor = '#1ABB9C';
|
||||
}
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td><div className="dotgenre" style={{background: dotcolor }}></div> {genre.genre}</td>
|
||||
<td style={{textAlign: 'right'}}>{genre.count}</td>
|
||||
</tr>)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<canvas id="chartGenres"></canvas>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
|
|
|
@ -4,10 +4,18 @@ const Languages = (props) => {
|
|||
const [languageBooks, setLanguageBooks] = useState([])
|
||||
|
||||
const getData = async () => {
|
||||
const data = await import("./Data.js")
|
||||
const [data, charts] = await Promise.all([
|
||||
await import("./Data.js"),
|
||||
await import("./Charts.js")
|
||||
]);
|
||||
|
||||
const languagebooks = await data.getLanguagesBooks(props.year)
|
||||
|
||||
if(languagebooks){
|
||||
charts.initDoughnut2(languagebooks, props.year);
|
||||
setLanguageBooks(languagebooks);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
|
@ -15,7 +23,7 @@ const Languages = (props) => {
|
|||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="ratings">
|
||||
<div className="ratings languages">
|
||||
<span className="block_name">Talen</span>
|
||||
<table className="ratingstable responsive nowrap" width="100%">
|
||||
<thead>
|
||||
|
@ -34,6 +42,8 @@ const Languages = (props) => {
|
|||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<canvas id="chartLangs"></canvas>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
|
|
@ -48,7 +48,7 @@ const Dashboard = (props) => {
|
|||
<div className="content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-8">
|
||||
<div className="col-md-9">
|
||||
<div className="row">
|
||||
<div className="col-md-4 col-sm-4">
|
||||
<div className="stat-block">
|
||||
|
@ -70,7 +70,7 @@ const Dashboard = (props) => {
|
|||
<Books year={year} />
|
||||
</div>
|
||||
|
||||
<div className="col-md-4">
|
||||
<div className="col-md-3">
|
||||
<Languages year={year} />
|
||||
<Genres year={year} />
|
||||
<Ratings year={year} />
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue