refactoring

docs/HistogramView.js

@@ -0,0 +1,25 @@
+class HistogramView {
+
+    constructor() {
+    }
+
+    show(batchcode, div) {
+        fetch(`data/histograms/${batchcode}.json`)
+            .then(response => response.json())
+            .then(json => {
+                const data = json.histograms[3].histogram;
+                new Chart(
+                    div.querySelector('#symptomByBatchcodeHisto'),
+                    {
+                        type: 'bar',
+                        data: {
+                            datasets: [{
+                                label: 'Acquisitions by year',
+                                data: data
+                            }]
+                        }
+                    }
+                );
+            });
+    }
+}

docs/batchCodeTable.html

@@ -11,6 +11,7 @@
 <script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js" type="text/javascript"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
 <script src="./batchCodeTable.js"></script>
+<script src="./HistogramView.js"></script>
 <script>
     $(document).ready(function () {
       const batchCodeTableInitializer =

docs/batchCodeTable.js

@@ -15,7 +15,7 @@ class BatchCodeTableInitializer {
         this.#batchCodeTable = this.#createEmptyBatchCodeTable();
         this.#countrySelect.addEventListener('change', event => this.#displayCountry(event.target.value));
         this.#displayCountry('Global')
-        // FK-TODO: refactor
+        const histogramView = new HistogramView();
         function createDiv() {
             const div = document.createElement("div");
             const canvas = document.createElement("canvas");
@@ -37,24 +37,7 @@ class BatchCodeTableInitializer {
                     const div = createDiv();
                     row.child(div).show();
                     tr.addClass('shown');
-                    const batchcode = 'FD6840';
+                    histogramView.show('FD6840', div);
-                    fetch(`data/histograms/${batchcode}.json`)
-                        .then(response => response.json())
-                        .then(json => {
-                            const data = json.histograms[3].histogram;
-                            new Chart(
-                                div.querySelector('#symptomByBatchcodeHisto'),
-                                {
-                                    type: 'bar',
-                                    data: {
-                                        datasets: [{
-                                            label: 'Acquisitions by year',
-                                            data: data
-                                        }]
-                                    }
-                                }
-                            );
-                        });
                 }
             });
     }