handlich vaccines in UI

docs/SymptomsCausedByVaccines/js/PageInitializer.js

@@ -1,22 +1,37 @@
 class PageInitializer {
 
-    static initializePage({ symptomSelectElement, prrByVaccineTableElement }) {
+    static initializePage({ symptom, vaccine }) {
+        PageInitializer.#configureSymptom(symptom);
+        PageInitializer.#configureVaccine(vaccine);
+    }
+
+    static #configureSymptom({ symptomSelectElement, prrByVaccineTableElement }) {
         const prrByVaccineTableView = new PrrByVaccineTableView(prrByVaccineTableElement);
-        PageInitializer.#initializeSymptomSelectElement(
+        PageInitializer.#initializeSelectElement(
             {
-                symptomSelectElement: symptomSelectElement,
-                onSymptomSelected: symptom => prrByVaccineTableView.displayPrrByVaccineTable4Symptom(symptom)
+                selectElement: symptomSelectElement,
+                onValueSelected: symptom => prrByVaccineTableView.displayPrrByVaccineTable4Symptom(symptom),
+                minimumInputLength: 4
             });
     }
 
-    static #initializeSymptomSelectElement({ symptomSelectElement, onSymptomSelected }) {
-        symptomSelectElement.select2({ minimumInputLength: 4 });
-        symptomSelectElement.on(
+    static #configureVaccine({ vaccineSelectElement, prrBySymptomTableElement }) {
+        const prrBySymptomTableView = new PrrBySymptomTableView(prrBySymptomTableElement);
+        PageInitializer.#initializeSelectElement(
+            {
+                selectElement: vaccineSelectElement,
+                onValueSelected: vaccine => prrBySymptomTableView.displayPrrBySymptomTable4Vaccine(vaccine),
+                minimumInputLength: 0
+            });
+    }
+
+    static #initializeSelectElement({ selectElement, onValueSelected, minimumInputLength }) {
+        selectElement.select2({ minimumInputLength: minimumInputLength });
+        selectElement.on(
             'select2:select',
             function (event) {
-                const symptom = event.params.data.id;
-                onSymptomSelected(symptom);
+                const value = event.params.data.id;
+                onValueSelected(value);
             });
-        symptomSelectElement.select2('open');
     }
 }

docs/SymptomsCausedByVaccines/js/PrrBySymptomTable.js

@@ -0,0 +1,72 @@
+class PrrBySymptomTable {
+
+    #tableElement;
+    #table;
+    #sumPrrs;
+
+    constructor(tableElement) {
+        this.#tableElement = tableElement;
+    }
+
+    initialize() {
+        this.#table = this.#createEmptyTable();
+    }
+
+    display(prrBySymptom) {
+        const symptom_prr_pairs = Object.entries(prrBySymptom);
+        this.#setTableRows(symptom_prr_pairs);
+    }
+
+    #createEmptyTable() {
+        return this.#tableElement.DataTable(
+            {
+                search:
+                {
+                    return: false
+                },
+                processing: true,
+                deferRender: true,
+                order: [[this.#getColumnIndex('Proportional Reporting Ratio > 1'), "desc"]],
+                columnDefs:
+                    [
+                        {
+                            searchable: false,
+                            targets: [this.#getColumnIndex('Proportional Reporting Ratio > 1')]
+                        },
+                        {
+                            render: prr =>
+                                NumberWithBarElementFactory
+                                    .createNumberWithBarElement(
+                                        {
+                                            number: prr,
+                                            barLenInPercent: prr / this.#sumPrrs * 100
+                                        })
+                                    .outerHTML,
+                            targets: [this.#getColumnIndex('Proportional Reporting Ratio > 1')]
+                        }
+                    ]
+            });
+    }
+
+    #getColumnIndex(columnName) {
+        switch (columnName) {
+            case 'Symptom':
+                return 0;
+            case 'Proportional Reporting Ratio > 1':
+                return 1;
+        }
+    }
+
+    #setTableRows(symptom_prr_pairs) {
+        this.#sumPrrs = this.#getSumPrrs(symptom_prr_pairs);
+        this.#table
+            .clear()
+            .rows.add(symptom_prr_pairs)
+            .draw();
+    }
+
+    #getSumPrrs(symptom_prr_pairs) {
+        const prrs = symptom_prr_pairs.map(symptom_prr_pair => symptom_prr_pair[1])
+        return Utils.sum(prrs);
+    }
+}

docs/SymptomsCausedByVaccines/js/PrrBySymptomTableView.js

@@ -0,0 +1,15 @@
+class PrrBySymptomTableView {
+
+    #prrBySymptomTable;
+
+    constructor(prrBySymptomTableElement) {
+        this.#prrBySymptomTable = new PrrBySymptomTable(prrBySymptomTableElement);
+        this.#prrBySymptomTable.initialize();
+    }
+
+    displayPrrBySymptomTable4Vaccine(vaccine) {
+        PrrByVaccineProvider
+            .getPrrBySymptom(vaccine)
+            .then(prrBySymptom => this.#prrBySymptomTable.display(prrBySymptom));
+    }
+}

docs/SymptomsCausedByVaccines/js/PrrByVaccineProvider.js

@@ -3,4 +3,8 @@ class PrrByVaccineProvider {
     static getPrrByVaccine(symptom) {
         return fetch(`../data/ProportionalReportingRatios/symptoms/${symptom}.json`).then(response => response.json());
     }
+
+    static getPrrBySymptom(vaccine) {
+        return fetch(`../data/ProportionalReportingRatios/vaccines/${vaccine}.json`).then(response => response.json());
+    }
 }