displaying a bar chart in each table row

docs/BarChartDescriptionProvider.js

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

docs/BarChartDescriptionsProvider.js

@@ -0,0 +1,6 @@
+class BarChartDescriptionsProvider {
+
+    static getBarChartDescriptions() {
+        return fetch('data/barChartDescriptionTable.json').then(response => response.json());
+    }
+}

docs/BatchcodeByCountryBarChartView.js

@@ -6,37 +6,13 @@ class BatchcodeByCountryBarChartView {
         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);
+    displayBatchcodeByCountryBarChart(barChartDescription) {
         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

@@ -16,7 +16,6 @@ class BatchcodeByCountryBarChartView2 {
             this.#canvas,
             {
                 type: 'bar',
-                plugins: [ChartDataLabels],
                 data: this.#getData(barChartDescription),
                 options: this.#getOptions()
             });

docs/batchCodeTable.html

@@ -26,7 +26,7 @@
   <script src="./ColumnSearch.js"></script>
   <script src="./batchCodeTable.js"></script>
   <script src="./HistoDescrsProvider.js"></script>
-  <script src="./BarChartDescriptionProvider.js"></script>
+  <script src="./BarChartDescriptionsProvider.js"></script>
   <script src="./HistogramChartView.js"></script>
   <script src="./BatchcodeByCountryBarChartView2.js"></script>
   <script src="./BatchcodeCombinationSelection.js"></script>

docs/batchCodeTable.js

@@ -5,6 +5,7 @@ class BatchCodeTableInitializer {
     #batchCodeTableElement;
     #batchCodeTable;
     #columnSearch;
+    #barChartDescriptions;
 
     constructor({ heading, countrySelect, batchCodeTableElement }) {
         this.#heading = heading;
@@ -67,11 +68,27 @@ class BatchCodeTableInitializer {
                             targets: [this.#getColumnIndex('Countries'), this.#getColumnIndex('Company')]
                         },
                         {
-                            render: (data, type, row) => {
+                            render: data => {
                                 const numberInPercent = parseFloat(data);
-                                return !isNaN(numberInPercent) ? numberInPercent.toFixed(2) + " %" : '';
+                                return !isNaN(numberInPercent) ? numberInPercent.toFixed(2) + "%" : '';
                             },
                             targets: [this.#getColumnIndex('Severe reports'), this.#getColumnIndex('Lethality')]
+                        },
+                        {
+                            width: "1000px",
+                            render: function (data, type, row, meta) {
+                                return "";
+                            },
+                            createdCell: (cell, cellData, row, rowIndex, colIndex) => {
+                                const batchcode = row[this.#getColumnIndex('Batch')];
+                                if (batchcode in this.#barChartDescriptions) {
+                                    const barChartDescription = this.#barChartDescriptions[batchcode];
+                                    barChartDescription['batchcode'] = batchcode;
+                                    new BatchcodeByCountryBarChartView(cell).displayBatchcodeByCountryBarChart(barChartDescription);
+                                }
+                            },
+                            className: "dt-head-center",
+                            targets: [this.#getColumnIndex('Countries')]
                         }
                     ]
             });
@@ -105,17 +122,22 @@ class BatchCodeTableInitializer {
     #displayCountry() {
         this.#heading.textContent = this.#getCountry() == 'Global' ? 'Global Batch Codes' : `Batch Codes for ${this.#getCountry()}`;
         // FK-TODO: show "Loading.." message or spinning wheel.
-        fetch(`data/batchCodeTables/${this.#getCountry()}.json`)
-            .then(response => response.json())
-            .then(json => {
-                this.#_addEmptyControlColumn(json);
-                return json;
+        BarChartDescriptionsProvider
+            .getBarChartDescriptions()
+            .then(barChartDescriptions => {
+                this.#barChartDescriptions = barChartDescriptions;
+                fetch(`data/batchCodeTables/${this.#getCountry()}.json`)
+                    .then(response => response.json())
+                    .then(json => {
+                        this.#_addEmptyControlColumn(json);
+                        return json;
+                    })
+                    .then(json => {
+                        this.#setTableRows(json.data);
+                        this.#columnSearch.columnContentUpdated();
+                        this.#selectInput();
+                    });
             })
-            .then(json => {
-                this.#setTableRows(json.data);
-                this.#columnSearch.columnContentUpdated();
-                this.#selectInput();
-            });
     }
 
     #_addEmptyControlColumn(json) {
@@ -150,7 +172,7 @@ class BatchCodeTableInitializer {
                         tr.removeClass('shown');
                     } else {
                         const histogramViewContainer = document.createElement("div");
-                        const batchcodeByCountryBarChartContainer = document.createElement("div");                
+                        const batchcodeByCountryBarChartContainer = document.createElement("div");
                         row.child([histogramViewContainer, batchcodeByCountryBarChartContainer]).show();
                         tr.addClass('shown');
                         const batchcode = row.data()[thisClassInstance.#getColumnIndex('Batch')];