refactoring

docs/HistogramView.js

@@ -3,13 +3,15 @@ class HistogramView {
     constructor() {
     }
 
-    show(batchcode, div) {
+    show(batchcode, uiContainer) {
         fetch(`data/histograms/${batchcode}.json`)
             .then(response => response.json())
             .then(json => {
                 const data = json.histograms[3].histogram;
+                const canvas = document.createElement("canvas");
+                uiContainer.appendChild(canvas);
                 new Chart(
-                    div.querySelector('#symptomByBatchcodeHisto'),
+                    canvas,
                     {
                         type: 'bar',
                         data: {

docs/batchCodeTable.js

@@ -16,13 +16,6 @@ class BatchCodeTableInitializer {
         this.#countrySelect.addEventListener('change', event => this.#displayCountry(event.target.value));
         this.#displayCountry('Global')
         const histogramView = new HistogramView();
-        function createDiv() {
-            const div = document.createElement("div");
-            const canvas = document.createElement("canvas");
-            canvas.setAttribute("id", "symptomByBatchcodeHisto");
-            div.appendChild(canvas);
-            return div;
-        }
         const thisClassInstance = this;
         $(`#${this.#batchCodeTableElement[0].id} tbody`).on(
             'click',
@@ -34,10 +27,10 @@ class BatchCodeTableInitializer {
                     row.child.hide();
                     tr.removeClass('shown');
                 } else {
-                    const div = createDiv();
+                    const uiContainer = document.createElement("div");
-                    row.child(div).show();
+                    row.child(uiContainer).show();
                     tr.addClass('shown');
-                    histogramView.show('FD6840', div);
+                    histogramView.show('FD6840', uiContainer);
                 }
             });
     }