making scatter chart for symptoms downloadable

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" />
@@ -60,7 +60,8 @@
             symptomVsSymptomChart: {
               symptomSelectXElement: $('#symptomSelectX'),
               symptomSelectYElement: $('#symptomSelectY'),
-              symptomVsSymptomChartViewElement: document.querySelector('#symptomVsSymptomChartView')
+              symptomVsSymptomChartViewElement: document.querySelector('#symptomVsSymptomChartView'),
+              downloadSymptomVsSymptomChartButton: document.querySelector("#downloadSymptomVsSymptomChart")
             }
           }
         );
@@ -40192,8 +40193,11 @@
                       <option value="pH urine normal">pH urine normal</option>
                     </select>
                   </div>
+                  <div>
                     <canvas id="symptomVsSymptomChartView"></canvas>
                   </div>
+                  <button class="btn downloadButton" id="downloadSymptomVsSymptomChart">Download</button>
+                </div>
               </div>
             </div>
           </div>

docs/SymptomsCausedByCOVIDLots/js/SymptomVsSymptomChartView.js

@@ -8,12 +8,13 @@ class SymptomVsSymptomChartView {
     }
 
     loadAndDisplayChart(symptomX, symptomY) {
-        Promise
+        return Promise
             .all([symptomX, symptomY].map(symptom => PrrByVaccineProvider.getPrrByVaccine(symptom)))
             .then(
                 ([prrByLotX, prrByLotY]) => {
                     const { labels, data } = SymptomVsSymptomChartDataProvider.getChartData({ prrByLotX, prrByLotY });
                     this.#displayChart(symptomX, symptomY, labels, data);
+                    return { labels, data };
                 });
     }
 

docs/SymptomsCausedByCOVIDLots/js/SymptomVsSymptomChartViewInitializer.js

@@ -3,11 +3,15 @@ class SymptomVsSymptomChartViewInitializer {
     #symptomVsSymptomChartView;
     #symptomX;
     #symptomY;
+    #batches;
+    #data;
+    #downloadSymptomVsSymptomChartButton;
 
     configureSymptomVsSymptomChart(
-        { symptomSelectXElement, symptomSelectYElement, symptomVsSymptomChartViewElement },
+        { symptomSelectXElement, symptomSelectYElement, symptomVsSymptomChartViewElement, downloadSymptomVsSymptomChartButton },
         initializeSelectElement) {
 
+        this.#initializeButton(downloadSymptomVsSymptomChartButton);
         this.#symptomVsSymptomChartView = new SymptomVsSymptomChartView(symptomVsSymptomChartViewElement);
         {
             initializeSelectElement(
@@ -37,8 +41,44 @@ class SymptomVsSymptomChartViewInitializer {
     }
 
     #loadAndDisplayChart() {
-        if (this.#symptomX != null && this.#symptomY != null) {
+        UIUtils.disableButton(this.#downloadSymptomVsSymptomChartButton);
-            this.#symptomVsSymptomChartView.loadAndDisplayChart(this.#symptomX, this.#symptomY);
+        if (this.#symptomX == null || this.#symptomY == null) {
+            return;
         }
+
+        this.#symptomVsSymptomChartView
+            .loadAndDisplayChart(this.#symptomX, this.#symptomY)
+            .then(({ labels, data }) => {
+                this.#batches = labels;
+                this.#data = data;
+                UIUtils.enableButton(this.#downloadSymptomVsSymptomChartButton);
+            });
+    }
+
+    #initializeButton(downloadSymptomVsSymptomChartButton) {
+        this.#downloadSymptomVsSymptomChartButton = downloadSymptomVsSymptomChartButton;
+        UIUtils.disableButton(downloadSymptomVsSymptomChartButton);
+        downloadSymptomVsSymptomChartButton.addEventListener(
+            'click',
+            () => this.#downloadSymptomVsSymptomChart())
+    }
+
+    #downloadSymptomVsSymptomChart() {
+        UIUtils.downloadUrlAsFilename(
+            window.URL.createObjectURL(
+                new Blob(
+                    [
+                        ScatterChart2CsvConverter.convertScatterChart2Csv(
+                            {
+                                symptomX: this.#symptomX,
+                                symptomY: this.#symptomY,
+                                batches: this.#batches,
+                                data: this.#data
+                            }
+                        )
+                    ],
+                    { type: 'text/csv' })),
+            `${this.#symptomX} Vs ${this.#symptomY}`
+        );
     }
 }