displaying "Frequencies of Reported Symptoms" as a table

docs/BatchCodeDetailsView.js

@@ -2,14 +2,13 @@ class BatchCodeDetailsView {
 
     #uiContainer;
     #adverseReactionReportsChartView;
-    #histogramChartView;
-    #chartWithSlider;
+    #histogramTable;
 
     constructor(uiContainer) {
         this.#uiContainer = uiContainer
         this.#adverseReactionReportsChartView = new AdverseReactionReportsChartView(this.#uiContainer.querySelector('#adverseReactionReportsChartView'));
-        this.#chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
-        this.#histogramChartView = new HistogramChartView(this.#chartWithSlider.querySelector("canvas"));
+        this.#histogramTable = new HistogramTable($('#histogramTable'));
+        this.#histogramTable.initialize();
     }
 
     displayBatchCodeDetails(batchcode) {
@@ -30,59 +29,7 @@ class BatchCodeDetailsView {
     }
 
     #displayHistogramViewForHistoDescrs(histoDescrs) {
-        this.#displayAdverseReactionReportsChart(histoDescrs);
-        this.#displayHistogram(histoDescrs);
-    }
-
-    #displayAdverseReactionReportsChart(histoDescrs) {
         this.#adverseReactionReportsChartView.displayChart(histoDescrs);
-    }
-
-    #displayHistogram(histoDescr) {
-        this.#histogramChartView.displayChart(histoDescr);
-        this.#createSlider(
-            {
-                sliderElement: this.#chartWithSlider.querySelector(".slider"),
-                range: {
-                    min: 0,
-                    max: Object.keys(histoDescr.histogram).length
-                },
-                orientation: 'vertical',
-                height: this.#chartWithSlider.querySelector("canvas").style.height,
-                onUpdate: range => this.#histogramChartView.setData(this.#slice(histoDescr, range))
-            });
-    }
-
-    #slice(histoDescr, { start, endInclusive }) {
-        return {
-            batchcode: histoDescr.batchcode,
-            histogram: Utils.sliceDict(histoDescr.histogram, start, endInclusive + 1)
-        };
-    }
-
-    #createSlider({ sliderElement, range, orientation, height = null, onUpdate }) {
-        if ('noUiSlider' in sliderElement) {
-            sliderElement.noUiSlider.destroy();
-        }
-        noUiSlider.create(
-            sliderElement,
-            {
-                start: [range.min, range.max],
-                connect: true,
-                range: range,
-                step: 1,
-                orientation: orientation
-            });
-        sliderElement.noUiSlider.on(
-            'update',
-            ([start, endInclusive]) =>
-                onUpdate(
-                    {
-                        start: parseInt(start, 10),
-                        endInclusive: parseInt(endInclusive, 10)
-                    }));
-        if (height != null) {
-            sliderElement.style.height = height;
-        }
+        this.#histogramTable.display(histoDescrs.histogram);
     }
 }

docs/HistogramChartView.js

@@ -1,64 +0,0 @@
-class HistogramChartView {
-
-    #canvas;
-    #chart;
-
-    constructor(canvas) {
-        this.#canvas = canvas;
-    }
-
-    displayChart(histoDescr) {
-        if (this.#chart != null) {
-            this.#chart.destroy();
-        }
-        this.#chart = new Chart(
-            this.#canvas,
-            {
-                type: 'bar',
-                data: this.#getData(histoDescr),
-                options: this.#getOptions()
-            });
-    }
-
-    setData(histoDescr) {
-        const data = this.#getData(histoDescr);
-        this.#chart.config.data = data;
-        this.#chart.update();
-    }
-
-    #getData(histoDescr) {
-        const { 'keys': symptoms, 'values': frequencies } = Utils.getKeysAlignedWithValues(histoDescr.histogram);
-        return {
-            labels: symptoms,
-            datasets: [{
-                label: 'Batch ' + histoDescr.batchcode,
-                data: frequencies,
-                backgroundColor: '#1a73e8'
-            }]
-        };
-    }
-
-    #getOptions() {
-        return {
-            indexAxis: 'y',
-            responsive: true,
-            scales: {
-                y: {
-                    title: {
-                        display: true,
-                        text: 'Symptom'
-                    }
-                },
-                x: {
-                    ticks: {
-                        precision: 0
-                    },
-                    title: {
-                        display: true,
-                        text: 'Frequency'
-                    }
-                }
-            }
-        };
-    }
-}

docs/HistogramTable.js

@@ -0,0 +1,60 @@
+class HistogramTable {
+
+    #tableElement;
+    #table;
+
+    constructor(tableElement) {
+        this.#tableElement = tableElement;
+    }
+
+    initialize() {
+        this.#table = this.#createEmptyTable();
+    }
+
+    display(frequencyBySymptom) {
+        const symptom_frequency_arrays = Object.entries(frequencyBySymptom);
+        this.#setTableRows(symptom_frequency_arrays);
+    }
+
+    #createEmptyTable() {
+        return this.#tableElement.DataTable(
+            {
+                language:
+                {
+                    searchPlaceholder: "Enter Symptom"
+                },
+                search:
+                {
+                    return: false
+                },
+                processing: true,
+                deferRender: true,
+                order: [[this.#getColumnIndex('Frequency'), "desc"]],
+                columnDefs:
+                    [
+                        {
+                            searchable: true,
+                            targets: [
+                                this.#getColumnIndex('Symptom')
+                            ]
+                        },
+                    ]
+            });
+    }
+
+    #getColumnIndex(columnName) {
+        switch (columnName) {
+            case 'Symptom':
+                return 0;
+            case 'Frequency':
+                return 1;
+        }
+    }
+
+    #setTableRows(rows) {
+        this.#table
+            .clear()
+            .rows.add(rows)
+            .draw();
+    }
+}

docs/batchCodeTable.html

@@ -20,24 +20,18 @@
   </script> -->
   <!-- Bootstrap -->
   <link href="gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
   <!-- Font Awesome -->
   <link href="gentelella/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
   <!-- Custom Theme Style -->
   <link href="gentelella/build/css/custom.css" rel="stylesheet" />
   <link href="forkMeOnGitHub.css" rel="stylesheet" type="text/css" />
-  <script crossorigin="anonymous"
-    integrity="sha512-T5Bneq9hePRO8JR0S/0lQ7gdW+ceLThvC80UjwkMRz+8q+4DARVZ4dqKoyENC7FcYresjfJ6ubaOgIE35irf4w=="
-    referrerpolicy="no-referrer"
-    src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.min.js"></script>
-  <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.css"
-    integrity="sha512-MKxcSu/LDtbIYHBNAWUQwfB3iVoG9xeMCm32QV5hZ/9lFaQZJVaXfz9aFa0IZExWzCpm7OWvp9zq9gVip/nLMg=="
-    referrerpolicy="no-referrer" rel="stylesheet" />
   <script src="./Utils.js"></script>
   <script src="./UIUtils.js"></script>
   <script src="./GoogleAnalytics.js"></script>
   <script src="./BatchCodeSelectInitializer.js"></script>
   <script src="./HistoDescrsProvider.js"></script>
-  <script src="./HistogramChartView.js"></script>
+  <script src="./HistogramTable.js"></script>
   <script src="./AdverseReactionReportsChartView.js"></script>
   <script src="./BatchCodeDetailsView.js"></script>
   <script>
@@ -14913,14 +14907,14 @@
                   <div class="clearfix"></div>
                 </div>
                 <div class="x_content">
-                  <div class="chartWithSlider">
-                    <div class="chartContainer">
-                      <canvas class="canvas"></canvas>
-                    </div>
-                    <div class="sliderContainer">
-                      <div class="slider"></div>
-                    </div>
-                  </div>
+                  <table class="display" id="histogramTable">
+                    <thead>
+                      <tr>
+                        <th>Symptom</th>
+                        <th>Frequency</th>
+                      </tr>
+                    </thead>
+                  </table>
                 </div>
               </div>
             </div>
@@ -14946,9 +14940,13 @@
   </div>
   <!-- jQuery -->
   <script src="gentelella/vendors/jquery/dist/jquery.min.js"></script>
+  <!-- Bootstrap -->
+  <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 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>
   <!-- FastClick -->