displaying BatchcodeByCountryBarChart

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