changes to genres en languages

ras/frontend/src/components/Charts.js

@@ -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,

ras/frontend/src/components/Genres.js

@@ -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>

ras/frontend/src/components/Languages.js

@@ -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>
     )

ras/frontend/src/views/dashboard.js

@@ -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} />