starting SymptomVsSymptomChartView

docs/SymptomsCausedByCOVIDLots/index.html

@@ -9,14 +9,14 @@
   <meta content="width=device-width, initial-scale=1.0" name="viewport" />
   <title>Safety Signals for COVID Batches</title>
   <!-- Google tag (gtag.js) -->
-  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-ERHYDH4P64"></script>
+  <!-- <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-ERHYDH4P64"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag() { dataLayer.push(arguments); }
     gtag('js', new Date());
 
     gtag('config', 'G-ERHYDH4P64');
-  </script>
+  </script> -->
   <!-- Bootstrap -->
   <link href="../gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
   <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
@@ -35,6 +35,7 @@
   <script src="./js/PrrByKeyTableView.js"></script>
   <script src="./js/PrrByVaccineTableView.js"></script>
   <script src="./js/PrrBySymptomTableView.js"></script>
+  <script src="./js/SymptomVsSymptomChartView.js"></script>
   <script>
     document.addEventListener(
       "DOMContentLoaded",
@@ -50,7 +51,8 @@
               vaccineSelectElement: $('#vaccineSelect'),
               prrBySymptomTableElement: $('#prrBySymptomTable'),
               downloadPrrBySymptomTableButton: document.querySelector("#downloadPrrBySymptomTable")
-            }
+            },
+            symptomVsSymptomChartViewElement: document.querySelector('#symptomVsSymptomChartView')
           }
         );
       });
@@ -13823,6 +13825,20 @@
             </div>
           </div>
           <div class="clearfix"></div>
+          <div class="row">
+            <div class="col-xs-12 col-sm-6">
+              <div class="x_panel">
+                <div class="x_title">
+                  <h3>Worst Batches Bla Bla</h3>
+                  <div class="clearfix"></div>
+                </div>
+                <div class="x_content">
+                  <canvas id="symptomVsSymptomChartView"></canvas>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="clearfix"></div>
         </div>
       </div>
     </div>

docs/SymptomsCausedByCOVIDLots/js/PageInitializer.js

@@ -1,8 +1,12 @@
 class PageInitializer {
 
-    static initializePage({ symptom, vaccine }) {
+    static #symptomVsSymptomChartView;
+
+    static initializePage({ symptom, vaccine, symptomVsSymptomChartViewElement }) {
         PageInitializer.#configureSymptom(symptom);
         PageInitializer.#configureVaccine(vaccine);
+        PageInitializer.#symptomVsSymptomChartView = new SymptomVsSymptomChartView(symptomVsSymptomChartViewElement);
+        PageInitializer.#symptomVsSymptomChartView.displayChart('Immunosuppression', 'Immunoglobulin therapy');
     }
 
     static #configureSymptom({ symptomSelectElement, prrByVaccineTableElement, downloadPrrByVaccineTableButton }) {

docs/SymptomsCausedByCOVIDLots/js/SymptomVsSymptomChartView.js

@@ -0,0 +1,115 @@
+class SymptomVsSymptomChartView {
+
+    #canvas;
+    #chart;
+
+    constructor(canvas) {
+        this.#canvas = canvas;
+    }
+
+    displayChart(symptom1, symptom2) {
+        if (this.#chart != null) {
+            this.#chart.destroy();
+        }
+        // FK-TODO: fetch multiple files: https://stackoverflow.com/a/31711496 or https://stackoverflow.com/a/53892713
+        PrrByVaccineProvider.getPrrByVaccine(symptom1)
+            .then(
+                prrByKey1 => {
+                    PrrByVaccineProvider.getPrrByVaccine(symptom2)
+                        .then(
+                            prrByKey2 => {
+                                const myData =
+                                    Object
+                                        .values(prrByKey2)
+                                        .map(
+                                            val =>
+                                            ({
+                                                x: val,
+                                                y: val
+                                            }));
+                                const data = {
+                                    datasets: [{
+                                        label: 'Scatter Dataset',
+                                        data: myData,
+                                        backgroundColor: 'rgb(255, 99, 132)'
+                                    }],
+                                };
+                                const config = {
+                                    type: 'scatter',
+                                    data: data,
+                                    options: {
+                                        scales: {
+                                            x: {
+                                                type: 'linear',
+                                                position: 'bottom'
+                                            }
+                                        }
+                                    }
+                                };
+                                this.#chart = new Chart(
+                                    this.#canvas,
+                                    // {
+                                    //     type: 'bar',
+                                    //     plugins: [ChartDataLabels],
+                                    //     data: this.#getData(ADRDescr),
+                                    //     options: this.#getOptions()
+                                    // }
+                                    config);
+                            });
+                });
+    }
+
+    setData(histoDescr) {
+        const data = this.#getData(histoDescr);
+        this.#chart.config.data = data;
+        this.#chart.update();
+    }
+
+    #getData(ADRDescr) {
+        return {
+            labels: [
+                'Deaths',
+                'Disabilities',
+                'Life Threatening Illnesses',
+                'Other Adverse Events'
+            ],
+            datasets: [{
+                // FK-TODO: refactor
+                label: 'Batch ' + ADRDescr['batchcode'],
+                data: [
+                    ADRDescr['Deaths'],
+                    ADRDescr['Disabilities'],
+                    ADRDescr['Life Threatening Illnesses'],
+                    ADRDescr['Adverse Reaction Reports'] - (ADRDescr['Deaths'] + ADRDescr['Disabilities'] + ADRDescr['Life Threatening Illnesses'])
+                ],
+                backgroundColor: '#1a73e8'
+            }]
+        };
+    }
+
+    #getOptions() {
+        return {
+            plugins: {
+                datalabels: {
+                    anchor: 'end',
+                    align: 'top'
+                }
+            },
+            title: {
+                display: true,
+                position: 'top'
+            },
+            scales: {
+                y: {
+                    ticks: {
+                        precision: 0
+                    },
+                    title: {
+                        display: true,
+                        text: 'Frequency'
+                    }
+                }
+            }
+        };
+    }
+}