novelmetrix-python/ras/frontend/static/js/src_components_Charts_js.js

/*! 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  $(\"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        legend: {\n          position: 'top',\n          labels: {\n            usePointStyle: true,\n            color: \"#333\",\n            padding: 20,\n            font: {\n              size: 11,\n              weight: 300,\n              family: 'Poppins'\n            }\n          }\n        }\n      },\n      tooltips: {\n        bodyFont: 'Poppins'\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  $(\"div.genresPercent\").append('<canvas id=\"chartGenres\"></canvas>');\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              weight: 300,\n              family: 'Poppins'\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?")}}]);