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) {
+    displayBatchcodeByCountryBarChart(barChartDescription) {
-        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

@@ -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,6 +122,10 @@ 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.
+        BarChartDescriptionsProvider
+            .getBarChartDescriptions()
+            .then(barChartDescriptions => {
+                this.#barChartDescriptions = barChartDescriptions;
                 fetch(`data/batchCodeTables/${this.#getCountry()}.json`)
                     .then(response => response.json())
                     .then(json => {
@@ -116,6 +137,7 @@ class BatchCodeTableInitializer {
                         this.#columnSearch.columnContentUpdated();
                         this.#selectInput();
                     });
+            })
     }
 
     #_addEmptyControlColumn(json) {

src/BarChartDescriptionTablePersister.py

@@ -1,10 +0,0 @@
-import shutil
-from IOUtils import IOUtils
-
-def saveBarChartDescriptionTable(barChartDescriptionTable):
-    directory = '../docs/data/barChartDescriptionTables'
-    shutil.rmtree(directory, ignore_errors = True)
-    for row in barChartDescriptionTable.itertuples():
-        batchcode = row.BAR_CHART_DESCRIPTION['batchcode']
-        barChartDescription = row.BAR_CHART_DESCRIPTION
-        IOUtils.saveDictAsJson(barChartDescription, f'{directory}/{batchcode}.json')

src/CountryCountsByBatchcodeTable2BarChartDescriptionTableConverter.py

@@ -12,12 +12,6 @@ class CountryCountsByBatchcodeTable2BarChartDescriptionTableConverter:
                             'COUNTRY_COUNT_BY_VAX_LOT Before Deletion': 'frequencies before deletion'
                         })
                 .groupby('VAX_LOT')
-                .apply(CountryCountsByBatchcodeTable2BarChartDescriptionTableConverter._convert2BarChartDescription)
+                .apply(lambda countryCountsTable: countryCountsTable.to_dict('list'))
                 .rename('BAR_CHART_DESCRIPTION')
                 .to_frame())
-
-    @staticmethod
-    def _convert2BarChartDescription(countryCountsTable):
-        barChartDescription = countryCountsTable.to_dict('list')
-        barChartDescription['batchcode'] = countryCountsTable.index.values[0]
-        return barChartDescription

src/CountryCountsByBatchcodeTable2BarChartDescriptionTableConverterTest.py

@@ -30,7 +30,6 @@ class CountryCountsByBatchcodeTable2BarChartDescriptionTableConverterTest(unitte
                 data = [
                         [
                             {
-                                'batchcode':                   '!D0181',
                                 'countries':                   ['Germany', 'Hungary'],
                                 'frequencies guessed':         [10,        15],
                                 'frequencies before deletion': [20,        30]
@@ -38,7 +37,6 @@ class CountryCountsByBatchcodeTable2BarChartDescriptionTableConverterTest(unitte
                         ],
                         [
                             {
-                                'batchcode':                   '# 009C01A',
                                 'countries':                   ['Germany'],
                                 'frequencies guessed':         [70],
                                 'frequencies before deletion': [80]

src/HowBadIsMyBatch.ipynb

@@ -194,9 +194,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "from BarChartDescriptionTablePersister import saveBarChartDescriptionTable\n",
+    "barChartDescriptionTable['BAR_CHART_DESCRIPTION'].to_json('../docs/data/barChartDescriptionTable.json')\n"
-    "\n",
-    "saveBarChartDescriptionTable(barChartDescriptionTable)"
    ]
   }
  ],