From 71c7f8d2611b0843ed10100fcca1cdb04265c34f Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Tue, 18 Apr 2023 16:48:25 +0200
Subject: [PATCH 1/2] adding bars to table's frequency column

---
 docs/HistogramTable.js               | 27 +++++++++++++++++++++++----
 docs/Utils.js                        |  4 ++++
 docs/batchCodeTable.html             |  6 ++++++
 docs/gentelella/build/css/custom.css |  5 +++++
 src/help.txt                         |  3 +--
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/docs/HistogramTable.js b/docs/HistogramTable.js
index 391b9ddd174..f4ff2b6ed14 100644
--- a/docs/HistogramTable.js
+++ b/docs/HistogramTable.js
@@ -2,6 +2,7 @@ class HistogramTable {
 
     #tableElement;
     #table;
+    #sumFrequencies;
 
     constructor(tableElement) {
         this.#tableElement = tableElement;
@@ -12,8 +13,8 @@ class HistogramTable {
     }
 
     display(frequencyBySymptom) {
-        const symptom_frequency_arrays = Object.entries(frequencyBySymptom);
-        this.#setTableRows(symptom_frequency_arrays);
+        const symptom_frequency_pairs = Object.entries(frequencyBySymptom);
+        this.#setTableRows(symptom_frequency_pairs);
     }
 
     #createEmptyTable() {
@@ -38,6 +39,18 @@ class HistogramTable {
                                 this.#getColumnIndex('Symptom')
                             ]
                         },
+                        {
+                            render: (data, type, row, meta) => {
+                                // FK-TODO: refactor
+                                const numberWithBar = UIUtils.instantiateTemplate('template-number-with-bar');
+                                const bar = numberWithBar.querySelector('.bar');
+                                bar.style.width = (data / this.#sumFrequencies * 100).toString() + "%";
+                                const number = numberWithBar.querySelector('.number');
+                                number.textContent = data;
+                                return numberWithBar.outerHTML;
+                            },
+                            targets: [this.#getColumnIndex('Frequency')]
+                        }
                     ]
             });
     }
@@ -51,10 +64,16 @@ class HistogramTable {
         }
     }
 
-    #setTableRows(rows) {
+    #setTableRows(symptom_frequency_pairs) {
+        this.#sumFrequencies = this.#getSumFrequencies(symptom_frequency_pairs);
         this.#table
             .clear()
-            .rows.add(rows)
+            .rows.add(symptom_frequency_pairs)
             .draw();
     }
+
+    #getSumFrequencies(symptom_frequency_pairs) {
+        const frequencies = symptom_frequency_pairs.map(symptom_frequency_pair => symptom_frequency_pair[1])
+        return Utils.sum(frequencies);
+    }
 }
diff --git a/docs/Utils.js b/docs/Utils.js
index bae5ac4d891..e9e315a7ee7 100644
--- a/docs/Utils.js
+++ b/docs/Utils.js
@@ -7,6 +7,10 @@ class Utils {
         return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
     }
 
+    static sum(numbers) {
+        return numbers.reduce((a, b) => a + b, 0);
+    }
+
     static getKeysAlignedWithValues(dict) {
         const keys = [];
         const values = [];
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index a87b8b9eb58..3c249237e5d 100644
--- a/docs/batchCodeTable.html
+++ b/docs/batchCodeTable.html
@@ -14938,6 +14938,12 @@
       <div class="clearfix"></div>
     </footer>
   </div>
+  <template id="template-number-with-bar">
+    <div>
+      <div class="number"></div>
+      <div class="bar"></div>
+    </div>
+  </template>
   <!-- jQuery -->
   <script src="gentelella/vendors/jquery/dist/jquery.min.js"></script>
   <!-- Bootstrap -->
diff --git a/docs/gentelella/build/css/custom.css b/docs/gentelella/build/css/custom.css
index 0a87aee2455..a33e4918ef3 100644
--- a/docs/gentelella/build/css/custom.css
+++ b/docs/gentelella/build/css/custom.css
@@ -4917,4 +4917,9 @@ table thead .checkbox.radio { margin-top:-7px;margin-top:-21px; }
 
 .chartWithSlider .sliderContainer {
     flex: 5%;
+}
+
+.bar {
+    height: 3px;
+    background-color: #1a73e8;
 }
\ No newline at end of file
diff --git a/src/help.txt b/src/help.txt
index 2b9c9109ae7..29595fb3df5 100644
--- a/src/help.txt
+++ b/src/help.txt
@@ -4,8 +4,7 @@ FK-FIXME:
 
 FK-TODO:
 - add google captcha to batchCodeTable.html
-- "Frequencies of Reported Symptoms" als Tabelle (datatables) darstellen
-- aus den Json-Dateien lethality und severity entfernen.
+- aus den JSON-Dateien lethality und severity entfernen.
 
 anacron job:
 sudo cp src/intensivstationen_howbadismybatch.sh /etc/cron.daily/intensivstationen_howbadismybatch

From 0fc151ccccb9404b7428f512b6292e590a4b03f0 Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Tue, 18 Apr 2023 17:21:41 +0200
Subject: [PATCH 2/2] refactoring

---
 docs/HistogramTable.js              | 17 ++++++++---------
 docs/NumberWithBarElementFactory.js | 14 ++++++++++++++
 docs/batchCodeTable.html            |  1 +
 3 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 docs/NumberWithBarElementFactory.js

diff --git a/docs/HistogramTable.js b/docs/HistogramTable.js
index f4ff2b6ed14..ec40d963820 100644
--- a/docs/HistogramTable.js
+++ b/docs/HistogramTable.js
@@ -40,15 +40,14 @@ class HistogramTable {
                             ]
                         },
                         {
-                            render: (data, type, row, meta) => {
-                                // FK-TODO: refactor
-                                const numberWithBar = UIUtils.instantiateTemplate('template-number-with-bar');
-                                const bar = numberWithBar.querySelector('.bar');
-                                bar.style.width = (data / this.#sumFrequencies * 100).toString() + "%";
-                                const number = numberWithBar.querySelector('.number');
-                                number.textContent = data;
-                                return numberWithBar.outerHTML;
-                            },
+                            render: frequency =>
+                                NumberWithBarElementFactory
+                                    .createNumberWithBarElement(
+                                        {
+                                            number: frequency,
+                                            barLenInPercent: frequency / this.#sumFrequencies * 100
+                                        })
+                                    .outerHTML,
                             targets: [this.#getColumnIndex('Frequency')]
                         }
                     ]
diff --git a/docs/NumberWithBarElementFactory.js b/docs/NumberWithBarElementFactory.js
new file mode 100644
index 00000000000..a2fffa6c4bc
--- /dev/null
+++ b/docs/NumberWithBarElementFactory.js
@@ -0,0 +1,14 @@
+class NumberWithBarElementFactory {
+
+    static createNumberWithBarElement({ number, barLenInPercent }) {
+        const numberWithBarElement = UIUtils.instantiateTemplate('template-number-with-bar');
+
+        const barElement = numberWithBarElement.querySelector('.bar');
+        barElement.style.width = barLenInPercent.toString() + "%";
+
+        const numberElement = numberWithBarElement.querySelector('.number');
+        numberElement.textContent = number;
+
+        return numberWithBarElement;
+    }
+}
\ No newline at end of file
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index 3c249237e5d..0b2dae62754 100644
--- a/docs/batchCodeTable.html
+++ b/docs/batchCodeTable.html
@@ -28,6 +28,7 @@
   <link href="forkMeOnGitHub.css" rel="stylesheet" type="text/css" />
   <script src="./Utils.js"></script>
   <script src="./UIUtils.js"></script>
+  <script src="./NumberWithBarElementFactory.js"></script>
   <script src="./GoogleAnalytics.js"></script>
   <script src="./BatchCodeSelectInitializer.js"></script>
   <script src="./HistoDescrsProvider.js"></script>