adding sliders to charts

docs/HistogramChartView.js

@@ -20,10 +20,11 @@ class HistogramChartView {
             });
     }
 
-    // setData(data) {
-    //     this.#chart.config.data.datasets[0].data = data;
-    //     this.#chart.update();
-    // }
+    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);

docs/HistogramView.js

@@ -32,9 +32,48 @@ class HistogramView {
     #displayHistogram(histoDescr) {
         // FK-TODO: extract class for template-chartWithSlider
         const chartWithSlider = UIUtils.instantiateTemplate('template-chartWithSlider');
-        const canvas = chartWithSlider.querySelector("canvas");
         this.#uiContainer.appendChild(chartWithSlider);
+        const canvas = chartWithSlider.querySelector("canvas");
         const histogramChartView = new HistogramChartView(canvas);
         histogramChartView.displayChart(histoDescr);
+        this.#createSlider(
+            {
+                sliderElement: chartWithSlider.querySelector(".slider"),
+                range: {
+                    min: 0,
+                    max: Object.keys(histoDescr.histogram).length
+                },
+                orientation: 'vertical',
+                height: canvas.style.height,
+                onUpdate: range => histogramChartView.setData(this.#slice(histoDescr, range))
+            });
+    }
+
+    #slice(histoDescr, { start, endInclusive }) {
+        return {
+            batchcodes: histoDescr.batchcodes,
+            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;
+        }
     }
 }

docs/Utils.js

@@ -16,4 +16,8 @@ class Utils {
         }
         return { 'keys': keys, 'values': values };
     }
+
+    static sliceDict(dict, start, end) {
+        return Object.fromEntries(Object.entries(dict).slice(start, end));
+    }
 }

docs/batchCodeTable.css

@@ -4,4 +4,18 @@
 
 .dataTables_length {
     float: right !important;
+}
+
+.chartWithSlider {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+}
+
+.chartWithSlider .chartContainer {
+    flex: 95%;
+}
+
+.chartWithSlider .sliderContainer {
+    flex: 5%;
 }

docs/batchCodeTable.html

@@ -188,11 +188,11 @@
 
   <template id="template-chartWithSlider">
     <div class="chartWithSlider">
-      <div class="chart">
+      <div class="chartContainer">
         <canvas class="canvas"></canvas>
       </div>
-      <div class="slider">
-        <div id="slider"></div>
+      <div class="sliderContainer">
+        <div class="slider"></div>
       </div>
     </div>
   </template>