diff --git a/docs/BarChartDescriptionProvider.js b/docs/BarChartDescriptionProvider.js new file mode 100644 index 00000000000..410b8650795 --- /dev/null +++ b/docs/BarChartDescriptionProvider.js @@ -0,0 +1,7 @@ +class BarChartDescriptionProvider { + + static getBarChartDescription(batchcode) { + return fetch(`data/barChartDescriptionTables/${batchcode}.json`) + .then(response => response.json()); + } +} \ No newline at end of file diff --git a/docs/BatchcodeByCountryBarChartView.js b/docs/BatchcodeByCountryBarChartView.js new file mode 100644 index 00000000000..897887884d5 --- /dev/null +++ b/docs/BatchcodeByCountryBarChartView.js @@ -0,0 +1,43 @@ +class BatchcodeByCountryBarChartView { + + #uiContainer; + + constructor(uiContainer) { + this.#uiContainer = uiContainer + } + + displayBatchcodeByCountryBarChart(batchcode) { + this + .#loadBarChartDescription(batchcode) + .then(barChartDescription => this.#displayBatchcodeByCountryBarChart(barChartDescription)); + } + + #loadBarChartDescription(batchcode) { + const loadingText = document.createTextNode('Loading...'); + this.#uiContainer.appendChild(loadingText); + return BarChartDescriptionProvider + .getBarChartDescription(batchcode) + .then(barChartDescriptionTable => { + loadingText.remove(); + return barChartDescriptionTable; + }); + } + + #displayBatchcodeByCountryBarChart(barChartDescription) { + this.#displayHeading(barChartDescription.batchcode); + const chartWithSlider = UIUtils.instantiateTemplate('template-chartWithSlider'); + const chartView = new BatchcodeByCountryBarChartView2(chartWithSlider.querySelector("canvas")); + this.#uiContainer.appendChild(chartWithSlider); + this.#displayBarChart(barChartDescription, chartView); + } + + #displayHeading(batchcode) { + const h1 = document.createElement("h3"); + h1.appendChild(document.createTextNode(`Frequencies of reported Symptoms for Batch Code Combinations containing ${batchcode}`)); + this.#uiContainer.appendChild(h1); + } + + #displayBarChart(barChartDescription, chartView) { + chartView.displayChart(barChartDescription); + } +} diff --git a/docs/BatchcodeByCountryBarChartView2.js b/docs/BatchcodeByCountryBarChartView2.js new file mode 100644 index 00000000000..7c5e50baeb3 --- /dev/null +++ b/docs/BatchcodeByCountryBarChartView2.js @@ -0,0 +1,69 @@ +// FK-TODO: rename +class BatchcodeByCountryBarChartView2 { + + #canvas; + #chart; + + constructor(canvas) { + this.#canvas = canvas; + } + + displayChart(barChartDescription) { + if (this.#chart != null) { + this.#chart.destroy(); + } + this.#chart = new Chart( + this.#canvas, + { + type: 'bar', + data: this.#getData(barChartDescription), + options: this.#getOptions() + }); + } + + setData(barChartDescription) { + const data = this.#getData(barChartDescription); + this.#chart.config.data = data; + this.#chart.update(); + } + + #getData(barChartDescription) { + return { + labels: barChartDescription.countries, + datasets: [ + { + label: "frequencies before deletion", // FK-TODO: daterange einfügen, allerdings für "frequencies guessed" + data: barChartDescription["frequencies before deletion"] + }, + { + label: "frequencies guessed", + data: barChartDescription["frequencies guessed"] + } + ] + }; + } + + #getOptions() { + return { + indexAxis: 'y', + responsive: true, + scales: { + y: { + title: { + display: true, + text: 'Country' + } + }, + x: { + ticks: { + precision: 0 + }, + title: { + display: true, + text: 'Frequency' + } + } + } + }; + } +} \ No newline at end of file diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html index 610a9ab43eb..880e63f48b5 100644 --- a/docs/batchCodeTable.html +++ b/docs/batchCodeTable.html @@ -1,26 +1,36 @@ + - - -Batch Codes of Coronavirus 2019 Vaccines - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + -Fork me on GitHub -

Batch Codes of Coronavirus 2019 Vaccines

-

- -

-

-

-Check out your batch code (Last updated: June 02, 2023) + Fork me on GitHub +

Batch Codes of Coronavirus 2019 Vaccines

+

+

- - - - - - - - - - - - - - - -
BatchAdverse Reaction ReportsDeathsDisabilitiesLife Threatening IllnessesCompanyCountriesSevere reportsLethality
-

Data Source: -Vaccine Adverse Event Reporting System +

+

+ Check out your batch code (Last updated: June 02, 2023) +

+ + + + + + + + + + + + + + + +
BatchAdverse Reaction ReportsDeathsDisabilitiesLife Threatening IllnessesCompanyCountriesSevere reportsLethality
+

Data Source: + Vaccine Adverse Event Reporting System (VAERS) -

- - + + \ No newline at end of file diff --git a/docs/batchCodeTable.js b/docs/batchCodeTable.js index 4d42ae5fc28..128b27829bc 100644 --- a/docs/batchCodeTable.js +++ b/docs/batchCodeTable.js @@ -149,11 +149,13 @@ class BatchCodeTableInitializer { row.child.hide(); tr.removeClass('shown'); } else { - const uiContainer = document.createElement("div"); - row.child(uiContainer).show(); + const histogramViewContainer = document.createElement("div"); + const batchcodeByCountryBarChartContainer = document.createElement("div"); + row.child([histogramViewContainer, batchcodeByCountryBarChartContainer]).show(); tr.addClass('shown'); const batchcode = row.data()[thisClassInstance.#getColumnIndex('Batch')]; - new HistogramView(uiContainer).displayHistogramView(thisClassInstance.#getCountry(), batchcode); + new HistogramView(histogramViewContainer).displayHistogramView(thisClassInstance.#getCountry(), batchcode); + new BatchcodeByCountryBarChartView(batchcodeByCountryBarChartContainer).displayBatchcodeByCountryBarChart(batchcode); } }); }