/*! 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\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.fit = function fit() {\n        fitValue.bind(chart.legend)();\n        return this.height += 30;\n      };\n    }\n  };\n  $("canvas#chartGenres").remove();\n  data && data.length > 0 ? $(".no-data-msg").remove() : $("canvas#chartGenres").remove();\n  data && data.length > 0 ? $("div.genresPercent").append(\'<canvas id="chartGenres"></canvas>\') : $("div.genresPercent").append(\'<div class="no-data-msg">Geen data beschikbaar</div>\');\n  var ctx = document.getElementById("chartGenres");\n  var myChart = new Chart(ctx, {\n    type: \'pie\',\n    data: {\n      labels: labels,\n      datasets: [{\n        label: \'# of Tomatoes\',\n        data: counts,\n        backgroundColor: [\'#404e67\', \'#01a9ac\', \'#64c5b1\', \'#1ABB9C\'],\n        borderWidth: 0,\n        borderColor: \'#1f2940\',\n        tooltip: {\n          callbacks: {\n            label: function (context) {\n              let label = context.label;\n              let value = context.formattedValue;\n              if (!label) label = \'Unknown\';\n              let sum = 0;\n              let dataArr = context.chart.data.datasets[0].data;\n              dataArr.map(data => {\n                sum += Number(data);\n              });\n              let percentage = (value * 100 / sum).toFixed(1) + \'%\';\n              return label + ": " + percentage;\n            }\n          }\n        }\n      }]\n    },\n    options: {\n      showAllTooltips: true,\n      cutout: \'80%\',\n      responsive: true,\n      plugins: {\n        legend: {\n          position: \'top\',\n          labels: {\n            padding: 20,\n            usePointStyle: true,\n            // This more specific font property overrides the global property\n            color: "#333",\n            font: {\n              size: 11\n            }\n          }\n        }\n      }\n    },\n    plugins: [{\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  });\n};\nconst initHorBar = data => {\n  var countries = [];\n  var counts = [];\n  data.forEach(count => {\n    if (!countries.includes(count.country)) {\n      countries.push(count.country);\n    }\n    counts.push(count.count);\n  });\n  $("canvas#countryChart").remove();\n  $("div.books-per-country").append(\'<canvas id="countryChart"></canvas>\');\n  var ctx = document.getElementById("countryChart");\n  new Chart(ctx, {\n    type: \'bar\',\n    options: {\n      indexAxis: \'y\',\n      plugins: {\n        legend: {\n          display: false\n        }\n      },\n      scales: {\n        x: {\n          ticks: {\n            beginAtZero: true,\n            color: "white"\n          },\n          stacked: true\n        },\n        y: {\n          ticks: {\n            beginAtZero: true,\n            stepSize: 1,\n            color: "white"\n          },\n          stacked: true\n        }\n      }\n    },\n    data: {\n      labels: countries,\n      datasets: [{\n        label: "Boeken",\n        data: counts,\n        backgroundColor: \'#696ffc\'\n      }]\n    }\n  });\n};\n\n//# sourceURL=webpack://frontend/./src/components/Charts.js?')}}]);