From 763d0a366bbbe28bb8f21271727a781a7dc54333 Mon Sep 17 00:00:00 2001
From: Frank Knoll <Knoll_Frank@web.de>
Date: Sun, 28 Jul 2024 10:04:23 +0200
Subject: [PATCH] styling chart

---
 docs/DrugsForPathologies/index.html           |  4 +-
 docs/DrugsForPathologies/js/DrugsChartView.js | 47 +++++++++----------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/docs/DrugsForPathologies/index.html b/docs/DrugsForPathologies/index.html
index 8e51ca6c746..d04a74cf80a 100644
--- a/docs/DrugsForPathologies/index.html
+++ b/docs/DrugsForPathologies/index.html
@@ -1180,11 +1180,11 @@
   <script src="../gentelella/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
   <script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"
     type="text/javascript"></script>
   <script
-    src=" https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js "></script>
+    src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
   <!-- FastClick -->
   <script src="../gentelella/vendors/fastclick/lib/fastclick.js"></script>
   <!-- Custom Theme Scripts -->
diff --git a/docs/DrugsForPathologies/js/DrugsChartView.js b/docs/DrugsForPathologies/js/DrugsChartView.js
index 7824e403cdc..1d0acb6c8c7 100644
--- a/docs/DrugsForPathologies/js/DrugsChartView.js
+++ b/docs/DrugsForPathologies/js/DrugsChartView.js
@@ -15,31 +15,26 @@ class DrugsChartView {
             this.#canvas,
             {
                 type: 'bar',
-                plugins: [ChartDataLabels],
                 data: this.#getData(drugDescr),
                 options: this.#getOptions()
             });
     }
 
-    setData(histoDescr) {
-        const data = this.#getData(histoDescr);
-        this.#chart.config.data = data;
-        this.#chart.update();
-    }
-
     #getData(drugDescr) {
         return {
             labels: drugDescr['DRUG'],
-            datasets: [{
-                label: 'Fatal',
-                data: this.#divide(drugDescr['FATAL'], drugDescr['CASES']),
-                backgroundColor: '#FF0000'
-            },
-            {
-                label: 'Recovered',
-                data: this.#divide(drugDescr['RECOVERED'], drugDescr['CASES']),
-                backgroundColor: '#00FF00'
-            }]
+            datasets: [
+                {
+                    label: 'Recovered',
+                    data: this.#divide(drugDescr['RECOVERED'], drugDescr['CASES']),
+                    backgroundColor: '#00FF00'
+                },
+                {
+                    label: 'Fatal',
+                    data: this.#divide(drugDescr['FATAL'], drugDescr['CASES']),
+                    backgroundColor: '#FF0000'
+                }
+            ]
         };
     }
 
@@ -51,24 +46,26 @@ class DrugsChartView {
 
     #getOptions() {
         return {
-            plugins: {
-                datalabels: {
-                    anchor: 'end',
-                    align: 'top'
-                }
-            },
             title: {
                 display: true,
                 position: 'top'
             },
             scales: {
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Drug'
+                    }
+                },
                 y: {
                     ticks: {
-                        precision: 0
+                        format: {
+                            style: 'percent'
+                        }
                     },
                     title: {
                         display: true,
-                        text: 'Frequency'
+                        text: 'percentage of reports'
                     }
                 }
             }