adding bars to table's frequency column

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

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

@@ -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 -->

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