adding slider to MedianOfFreeBedsByKreisChartView

docs/MedianOfFreeBedsByKreisChartView.js

@@ -21,6 +21,11 @@ class MedianOfFreeBedsByKreisChartView {
             });
     }
 
+    setData(data) {
+        this.#chart.config.data.datasets[0].data = data;
+        this.#chart.update();
+    }
+
     #getData(data, label) {
         return {
             datasets: [

docs/intensivstationen.html

@@ -25,16 +25,6 @@
     document.addEventListener(
       "DOMContentLoaded",
       event => {
-        const slider = document.getElementById('slider');
-        noUiSlider.create(slider, {
-          start: [20, 80],
-          connect: true,
-          range: {
-            'min': 0,
-            'max': 100
-          }
-        });
-        slider.noUiSlider.on('update', values => console.log(values[0], ' - ', values[1]));
         const intensiveCareCapacitiesChartView = new IntensiveCareCapacitiesChartView(document.getElementById("intensiveCareCapacities"));
         const freeBedsChartView = new FreeBedsChartView(document.getElementById('freeBeds'));
         const kreisSelect = document.querySelector('#kreisSelect');
@@ -42,7 +32,9 @@
         kreisSelect.addEventListener(
           'change',
           event => onKreisOptionSelected(kreisSelect, intensiveCareCapacitiesChartView, freeBedsChartView));
-        displayMedianOfFreeBedsByKreisChart(document.getElementById('medianOfFreeBedsByKreis'));
+        displayMedianOfFreeBedsByKreisChart(
+          document.getElementById('medianOfFreeBedsByKreis'),
+          document.getElementById('slider'));
       });
 
     function onKreisOptionSelected(kreisSelect, intensiveCareCapacitiesChartView, freeBedsChartView) {

docs/intensivstationen.js

@@ -46,9 +46,32 @@ function add_median_free_beds_in_percent(dataDicts) {
     }
 }
 
-function displayMedianOfFreeBedsByKreisChart(canvas) {
+function displayMedianOfFreeBedsByKreisChart(canvas, slider) {
-    const medianOfFreeBedsByKreisChartView = new MedianOfFreeBedsByKreisChartView(canvas);
     fetch(`data/intensivstationen/medianOfFreeBedsByKreisTable.json`)
         .then(response => response.json())
-        .then(json => medianOfFreeBedsByKreisChartView.displayChart(json));
+        .then(json => _displayMedianOfFreeBedsByKreisChart(canvas, slider, json));
+}
+
+function _displayMedianOfFreeBedsByKreisChart(canvas, sliderElement, data) {
+    const medianOfFreeBedsByKreisChartView = new MedianOfFreeBedsByKreisChartView(canvas);
+    medianOfFreeBedsByKreisChartView.displayChart(data);
+    createSlider(
+        sliderElement,
+        {
+            min: 0,
+            max: data.length - 1
+        },
+        values => medianOfFreeBedsByKreisChartView.setData(data.slice(values[0], values[1] + 1)));
+}
+
+function createSlider(sliderElement, range, onUpdate) {
+    noUiSlider.create(
+        sliderElement,
+        {
+            start: [range.min, range.max],
+            connect: true,
+            range: range,
+            step: 1,
+        });
+    sliderElement.noUiSlider.on('update', onUpdate);
 }

src/help.txt

@@ -21,6 +21,8 @@ FK-TODO:
 - Intensivstationen ergänzen durch Tabelle oder Barchart:
   Kreis => "Median der Anteile freier Betten", absteigend sortiert nach "Median der Anteile freier Betten".
 - Darstellung als Dashboard, siehe https://covid-karte.de/ oder https://experience.arcgis.com/experience/3a132983ad3c4ab8a28704e9addefaba
+- Rot-Gelb-Grün eingefärbte Deutschland-Karte anzeigen wie in https://experience.arcgis.com/experience/3a132983ad3c4ab8a28704e9addefaba
+- Alle Charts mit Slidern versehen.
 
 man 5 fcrontab