adding sliders to charts

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