2024-02-26 08:31:15 +01:00
|
|
|
"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, year) => {\n /*\n ----------------------------------\n Books per month per genre\n ----------------------------------\n */\n\n var genres = [];\n var colors = [\'#405181\', \'#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 Stacked bar chart\n ----------------------------------\n */\n\n $("canvas#chart").remove();\n data && data.length > 0 ? $(".no-data-msg").remove() : $("canvas#chartGenres").remove();\n data && data.length > 0 ? $("div.books-per-month").append(\'<canvas id="chart"></canvas>\') : $("div.books-per-month").append(\'<div class="no-data-msg">Geen data beschikbaar</div>\');\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 },\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 },\n stacked: true\n }\n },\n plugins: {\n legend: {\n position: \'top\',\n labels: {\n usePointStyle: true,\n color: "#333",\n padding: 20,\n font: {\n size: 11\n }\n }\n }\n }\n },\n plugins: [legendMargin]\n });\n};\nconst 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 counts.push(count.count);\n });\n const legendMargin = {\n id: \'legendMargin\',\n beforeInit(chart, legend, options) {\n const fitValue = chart.legend.fit;\n chart.legend.fi
|
