Merge branch 'simplify-UI' into pages

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,17 @@ class HistogramTable {
                                 this.#getColumnIndex('Symptom')
                             ]
                         },
+                        {
+                            render: frequency =>
+                                NumberWithBarElementFactory
+                                    .createNumberWithBarElement(
+                                        {
+                                            number: frequency,
+                                            barLenInPercent: frequency / this.#sumFrequencies * 100
+                                        })
+                                    .outerHTML,
+                            targets: [this.#getColumnIndex('Frequency')]
+                        }
                     ]
             });
     }
@@ -51,10 +63,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);
+    }
 }

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;
+    }
+}

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 = [];

docs/batchCodeTable.html

@@ -27,6 +27,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>
@@ -14937,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 -->

docs/gentelella/build/css/custom.css

@@ -4918,3 +4918,8 @@ table thead .checkbox.radio { margin-top:-7px;margin-top:-21px; }
 .chartWithSlider .sliderContainer {
     flex: 5%;
 }
+
+.bar {
+    height: 3px;
+    background-color: #1a73e8;
+}

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