displaying BatchcodeByCountryBarChart

docs/BarChartDescriptionProvider.js

@@ -0,0 +1,7 @@
+class BarChartDescriptionProvider {
+
+    static getBarChartDescription(batchcode) {
+        return fetch(`data/barChartDescriptionTables/${batchcode}.json`)
+            .then(response => response.json());
+    }
+}

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);
+    }
+}

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'
+                    }
+                }
+            }
+        };
+    }
+}

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);
                     }
                 });
     }