changes to genres en languages
This commit is contained in:
parent
bdd68a55f7
commit
895c7c9ff5
|
@ -207,6 +207,105 @@ export const initDoughnut = (data) => {
|
||||||
plugins: {
|
plugins: {
|
||||||
legend: {
|
legend: {
|
||||||
position: 'top',
|
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: {
|
labels: {
|
||||||
padding: 20,
|
padding: 20,
|
||||||
usePointStyle: true,
|
usePointStyle: true,
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
const Genres = (props) => {
|
const Genres = (props) => {
|
||||||
|
const [genresbooks, setGenresBooks] = useState([])
|
||||||
|
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
const [data, charts] = await Promise.all([
|
const [data, charts] = await Promise.all([
|
||||||
await import("./Data.js"),
|
await import("./Data.js"),
|
||||||
|
@ -11,6 +13,7 @@ const Genres = (props) => {
|
||||||
|
|
||||||
if(yeargenres){
|
if(yeargenres){
|
||||||
charts.initDoughnut(yeargenres, props.year);
|
charts.initDoughnut(yeargenres, props.year);
|
||||||
|
setGenresBooks(yeargenres);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -22,6 +25,38 @@ const Genres = (props) => {
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div className="genresPercent">
|
<div className="genresPercent">
|
||||||
<span className="block_name">Genres</span>
|
<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>
|
<canvas id="chartGenres"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
|
|
|
@ -4,9 +4,17 @@ const Languages = (props) => {
|
||||||
const [languageBooks, setLanguageBooks] = useState([])
|
const [languageBooks, setLanguageBooks] = useState([])
|
||||||
|
|
||||||
const getData = async () => {
|
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)
|
const languagebooks = await data.getLanguagesBooks(props.year)
|
||||||
setLanguageBooks(languagebooks);
|
|
||||||
|
if(languagebooks){
|
||||||
|
charts.initDoughnut2(languagebooks, props.year);
|
||||||
|
setLanguageBooks(languagebooks);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -15,7 +23,7 @@ const Languages = (props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div className="ratings">
|
<div className="ratings languages">
|
||||||
<span className="block_name">Talen</span>
|
<span className="block_name">Talen</span>
|
||||||
<table className="ratingstable responsive nowrap" width="100%">
|
<table className="ratingstable responsive nowrap" width="100%">
|
||||||
<thead>
|
<thead>
|
||||||
|
@ -34,6 +42,8 @@ const Languages = (props) => {
|
||||||
})}
|
})}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
<canvas id="chartLangs"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
|
|
|
@ -48,7 +48,7 @@ const Dashboard = (props) => {
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-8">
|
<div className="col-md-9">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-4 col-sm-4">
|
<div className="col-md-4 col-sm-4">
|
||||||
<div className="stat-block">
|
<div className="stat-block">
|
||||||
|
@ -70,7 +70,7 @@ const Dashboard = (props) => {
|
||||||
<Books year={year} />
|
<Books year={year} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-4">
|
<div className="col-md-3">
|
||||||
<Languages year={year} />
|
<Languages year={year} />
|
||||||
<Genres year={year} />
|
<Genres year={year} />
|
||||||
<Ratings 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