adding slider4freeBeds

docs/FreeBedsChartView.js

@@ -48,6 +48,12 @@ class FreeBedsChartView {
         return { beforeDraw: drawTrafficLights };
     }
 
+    setData(data) {
+        this.#chart.config.data.datasets[0].data = data;
+        this.#chart.config.data.datasets[1].data = data;
+        this.#chart.update();
+    }
+
     #getData(data, label) {
         return {
             datasets: [

docs/intensivstationen.html

@@ -58,6 +58,7 @@
       displayFreeBedsChart(
         {
           freeBedsChartView: freeBedsChartView,
+          sliderElement: document.getElementById('slider4freeBeds'),
           kreisText: selectedOption.text,
           kreisValue: selectedOption.value
         });
@@ -524,6 +525,7 @@
                     <option value="Zwickau">Zwickau</option>
                   </select>
                   <canvas id="freeBeds"></canvas>
+                  <div id="slider4freeBeds"></div>
                 </div>
               </div>
             </div>

docs/intensivstationen.js

@@ -4,31 +4,47 @@ function displayIntensiveCareCapacitiesChart(
     headingElement.textContent = kreisText
     fetch(`data/intensivstationen/intensivstationen-${kreisValue}.json`)
         .then(response => response.json())
-        .then(json => {
+        .then(json => _displayIntensiveCareCapacitiesChart({ intensiveCareCapacitiesChartView, sliderElement, populationElement, kreisText, json }));
-            populationElement.textContent = new Intl.NumberFormat().format(json.population);
+}
-            intensiveCareCapacitiesChartView.displayChart({ data: json.data, title: kreisText });
+
-            createSlider(
+function _displayIntensiveCareCapacitiesChart({ intensiveCareCapacitiesChartView, sliderElement, populationElement, kreisText, json }) {
-                {
+    populationElement.textContent = new Intl.NumberFormat().format(json.population);
-                    sliderElement: sliderElement,
+    intensiveCareCapacitiesChartView.displayChart({ data: json.data, title: kreisText });
-                    range: {
+    createSlider(
-                        min: 0,
+        {
-                        max: json.data.length - 1
+            sliderElement: sliderElement,
-                    },
+            range: {
-                    orientation: 'horizontal',
+                min: 0,
-                    onUpdate: ([start, end]) => intensiveCareCapacitiesChartView.setData(json.data.slice(start, end + 1))
+                max: json.data.length - 1
-                });
+            },
+            orientation: 'horizontal',
+            onUpdate: ([start, end]) => intensiveCareCapacitiesChartView.setData(json.data.slice(start, end + 1))
         });
 }
 
-function displayFreeBedsChart({ freeBedsChartView, kreisText, kreisValue }) {
+function displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, kreisValue }) {
     fetch(`data/intensivstationen/intensivstationen-${kreisValue}.json`)
         .then(response => response.json())
-        .then(json =>
+        .then(json => _displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, json }));
-            freeBedsChartView.displayChart(
+}
-                {
+
-                    data: getDataDicts(json.data),
+function _displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, json }) {
-                    title: kreisText
+    const data = getDataDicts(json.data);
-                }));
+    freeBedsChartView.displayChart(
+        {
+            data: data,
+            title: kreisText
+        });
+    createSlider(
+        {
+            sliderElement: sliderElement,
+            range: {
+                min: 0,
+                max: data.length - 1
+            },
+            orientation: 'horizontal',
+            onUpdate: ([start, end]) => freeBedsChartView.setData(data.slice(start, end + 1))
+        });
 }
 
 function getDataDicts(data) {
@@ -79,6 +95,9 @@ function _displayMedianOfFreeBedsByKreisChart(canvas, sliderElement, data) {
 }
 
 function createSlider({ sliderElement, range, orientation, height = null, onUpdate }) {
+    if ('noUiSlider' in sliderElement) {
+        sliderElement.noUiSlider.destroy();
+    }
     noUiSlider.create(
         sliderElement,
         {