2022-09-30 16:30:18 +02:00
|
|
|
(()=>{"use strict";var __webpack_modules__={"./src/App.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "default": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nclass App extends react__WEBPACK_IMPORTED_MODULE_0__.Component {\n constructor(props) {\n super(props);\n this.state = {\n year: new Date().getFullYear()\n };\n this.yearsArray = [];\n }\n\n changeYear(event) {\n this.setState({\n year: event.target.value\n });\n }\n\n initDoughnut(data) {\n var labels = [];\n var counts = [];\n data.forEach(count => {\n if (!labels.includes(count.genre)) {\n labels.push(count.genre);\n }\n\n counts.push(count.count);\n });\n $("canvas#chartGenres").remove();\n $("div.genresPercent").append(\'<canvas id="chartGenres"></canvas>\');\n var ctx = document.getElementById("chartGenres");\n var myChart = new Chart(ctx, {\n type: \'doughnut\',\n data: {\n labels: labels,\n datasets: [{\n label: \'# of Tomatoes\',\n data: counts,\n backgroundColor: [\'#696ffc\', \'#7596fa\', \'#92adfe\', \'#abc0ff\'],\n borderWidth: 3,\n borderColor: \'#1f2940\'\n }]\n },\n options: {\n //cutoutPercentage: 40,\n responsive: true\n }\n });\n }\n\n initChart(data, ratings, year) {\n /*\r\n ----------------------------------\r\n Books per month per genre\r\n ----------------------------------\r\n */\n var genres = [];\n var colors = [\'#696ffc\', \'#7596fa\', \'#92adfe\', \'#abc0ff\'];\n var dataSet = [];\n data.forEach(book => {\n if (!genres.includes(book.genre)) {\n genres.push(book.genre);\n }\n });\n\n if (genres && genres.length > 0) {\n genres.forEach((genre, index) => {\n var genreData = [];\n\n for (var i = 0; i < 12; i++) {\n genreData[i] = 0;\n\n if (i + 1 < 10) {\n var month = "0" + (i + 1);\n } else {\n month = i + 1;\n }\n\n for (var j = 0; j < data.length; j++) {\n if (data && data[j] && data[j].readed == month + \'-\' + year) {\n if (data[j].genre == genre) {\n genreData[i] = data[j].count;\n }\n }\n }\n }\n\n dataSet.push({\n label: genre,\n data: genreData,\n backgroundColor: colors[index],\n order: 2\n });\n });\n }\n /*\r\n ----------------------------------\r\n Avarage ratings per month\r\n ----------------------------------\r\n */\n\n\n var avgRatings = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n\n for (var j = 0; j < 12; j++) {\n if (j < 9) {\n var month = "0" + (j + 1);\n } else {\n month = j + 1;\n }\n\n for (var i = 0; i < ratings.length; i++) {\n if (ratings[i].date == month + \'-\' + year) {\n avgRatings[j] = ratings[i].rating;\n }\n }\n }\n\n dataSet.push({\n label: \'Gemiddelde beoordeling\',\n data: avgRatings,\n backgroundColor: \'#ffa500\',\n borderColor: \'#ffa500\',\n tension: 0.4,\n type: \'line\',\n order: 1\n });\n /*\r\n ----------------------------------\r\n Stacked bar chart\r\n ----------------------------------\r\n */\n\n $("canvas#chart").remove();\n $("div.books-per-month").append(\'<canvas id="chart"></canvas>\');\n new Chart(document.getElementById(\'chart\'), {\n type: \'bar\',\n data: {\n labels: ["Januari", "Februari", "Maart", "April", "Mei"
|
