2 lines
7.9 KiB
JavaScript
2 lines
7.9 KiB
JavaScript
|
/*! For license information please see src_components_Charts_js.js.LICENSE.txt */
|
||
|
|
"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["src_components_Charts_js"],{"./src/components/Charts.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 */ \"initChart\": () => (/* binding */ initChart),\n/* harmony export */ \"initDoughnut\": () => (/* binding */ initDoughnut),\n/* harmony export */ \"initHorBar\": () => (/* binding */ initHorBar)\n/* harmony export */ });\nconst initChart = (data, ratings, year) => {\n /*\n ----------------------------------\n Books per month per genre\n ----------------------------------\n */\n\n var genres = [];\n var colors = [\n // '#696ffc', '#7596fa', '#92adfe', '#abc0ff'\n '#404e67', '#01a9ac', '#64c5b1', '#1ABB9C'];\n var dataSet = [];\n data.forEach(book => {\n if (!genres.includes(book.genre)) {\n genres.push(book.genre);\n }\n });\n if (genres && genres.length > 0) {\n genres.forEach((genre, index) => {\n var genreData = [];\n for (var i = 0; i < 12; i++) {\n genreData[i] = 0;\n if (i + 1 < 10) {\n var month = \"0\" + (i + 1);\n } else {\n month = i + 1;\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 dataSet.push({\n label: genre,\n data: genreData,\n backgroundColor: colors[index],\n order: 2\n });\n });\n }\n\n /*\n ----------------------------------\n Avarage ratings per month\n ----------------------------------\n */\n\n var avgRatings = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\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 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 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 console.log(dataSet);\n\n /*\n ----------------------------------\n Stacked bar chart\n ----------------------------------\n */\n\n $(\"canvas#chart\").remove();\n $(\"div.books-per-month\").append('<canvas id=\"chart\"></canvas>');\n const legendMargin = {\n id: 'legendMargin',\n beforeInit(chart, legend, options) {\n const fitValue = chart.legend.fit;\n chart.legend.fit = function fit() {\n fitValue.bind(chart.legend)();\n return this.height += 30;\n };\n }\n };\n new Chart(document.getElementById('chart'), {\n type: 'bar',\n data: {\n labels: [\"Januari\", \"Februari\", \"Maart\", \"April\", \"Mei\", \"Juni\", \"Juli\", \"Augustus\", \"September\", \"Oktober\", \"November\", \"December\"],\n datasets: dataSet\n },\n options: {\n maintainAspectRatio: false,\n responsive: true,\n showTooltips: true,\n legend: {\n display: true,\n labels: {\n usePointStyle: true\n }\n },\n interaction: {\n mode: 'index'\n },\n scales: {\n x: {\n grid: {\n display: false\n },\n ticks: {\n beginAtZero: true,\n color: \"#333\",\n size: 11,\n fontFamily: \"Poppins\"\n },\n stacked: true\n },\n y: {\n grid: {\n display: false\n },\n ticks: {\n beginAtZero: true,\n stepSize: 1,\n color: \"#333\",\n size: 11,\n fontFamily: \"Poppins\"\n },\n stacked: true\n }\n },\n plugins: {\n
|