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