From 99b210e4fff2ad4052891d8cf0b813d0745bd683 Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Thu, 9 Nov 2023 10:22:20 +0100
Subject: [PATCH] labeling axes in scatter chart

---
 .../js/PageInitializer.js                     |  2 +-
 .../js/SymptomVsSymptomChartView.js           | 88 ++++++++++---------
 2 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/docs/SymptomsCausedByCOVIDLots/js/PageInitializer.js b/docs/SymptomsCausedByCOVIDLots/js/PageInitializer.js
index ccf650cbe39..8cb9b3f2ae1 100644
--- a/docs/SymptomsCausedByCOVIDLots/js/PageInitializer.js
+++ b/docs/SymptomsCausedByCOVIDLots/js/PageInitializer.js
@@ -6,7 +6,7 @@ class PageInitializer {
         PageInitializer.#configureSymptom(symptom);
         PageInitializer.#configureVaccine(vaccine);
         PageInitializer.#symptomVsSymptomChartView = new SymptomVsSymptomChartView(symptomVsSymptomChartViewElement);
-        PageInitializer.#symptomVsSymptomChartView.displayChart('Immunosuppression', 'Immunoglobulin therapy');
+        PageInitializer.#symptomVsSymptomChartView.loadAndDisplayChart('Immunosuppression', 'Immunoglobulin therapy');
     }
 
     static #configureSymptom({ symptomSelectElement, prrByVaccineTableElement, downloadPrrByVaccineTableButton }) {
diff --git a/docs/SymptomsCausedByCOVIDLots/js/SymptomVsSymptomChartView.js b/docs/SymptomsCausedByCOVIDLots/js/SymptomVsSymptomChartView.js
index ef7daf31421..8a01b11386d 100644
--- a/docs/SymptomsCausedByCOVIDLots/js/SymptomVsSymptomChartView.js
+++ b/docs/SymptomsCausedByCOVIDLots/js/SymptomVsSymptomChartView.js
@@ -8,56 +8,62 @@ class SymptomVsSymptomChartView {
     }
 
     // FK-TODO: refactor
-    displayChart(symptomX, symptomY) {
+    loadAndDisplayChart(symptomX, symptomY) {
+        Promise
+            .all([symptomX, symptomY].map(symptom => PrrByVaccineProvider.getPrrByVaccine(symptom)))
+            .then(([prrByLotX, prrByLotY]) => this.#displayChart(prrByLotX, prrByLotY, symptomX, symptomY));
+    }
+
+    #displayChart(prrByLotX, prrByLotY, symptomX, symptomY) {
         if (this.#chart != null) {
             this.#chart.destroy();
         }
-        // FK-TODO: move PrrByVaccineProvider.getPrrByVaccine() calls out of this function
-        Promise
-            .all([symptomX, symptomY].map(symptom => PrrByVaccineProvider.getPrrByVaccine(symptom)))
-            .then(([prrByLotX, prrByLotY]) => {
-                const chartData = SymptomVsSymptomChartDataProvider.getChartData({ prrByLotX, prrByLotY });
-                const data = {
-                    datasets: [{
+        const chartData = SymptomVsSymptomChartDataProvider.getChartData({ prrByLotX, prrByLotY });
+        const data = {
+            datasets:
+                [
+                    {
                         labels: chartData.labels,
                         data: chartData.data,
                         backgroundColor: 'rgb(0, 0, 255)'
-                    }],
-                };
-                const config = {
-                    type: 'scatter',
-                    data: data,
-                    options: {
-                        scales: {
-                            x: {
-                                type: 'linear',
-                                position: 'bottom'
-                            }
-                        },
-                        plugins: {
-                            legend: {
-                                display: false
-                            },
-                            tooltip: {
-                                callbacks: {
-                                    label: function (context) {
-                                        return 'Batch: ' + context.dataset.labels[context.dataIndex];
-                                    }
-                                }
+                    }
+                ]
+        };
+        const config = {
+            type: 'scatter',
+            data: data,
+            options: {
+                scales: {
+                    x: {
+                        type: 'linear',
+                        position: 'bottom',
+                        title: {
+                            display: true,
+                            text: 'PRR ratio of Batch for ' + symptomX
+                        }
+                    },
+                    y: {
+                        title: {
+                            display: true,
+                            text: 'PRR ratio of Batch for ' + symptomY
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function (context) {
+                                return 'Batch: ' + context.dataset.labels[context.dataIndex];
                             }
                         }
                     }
-                };
-                this.#chart = new Chart(
-                    this.#canvas,
-                    // {
-                    //     type: 'bar',
-                    //     plugins: [ChartDataLabels],
-                    //     data: this.#getData(ADRDescr),
-                    //     options: this.#getOptions()
-                    // }
-                    config);
-            });
+                }
+            }
+        };
+        this.#chart = new Chart(this.#canvas, config);
     }
 
     setData(histoDescr) {