From ae5701310c7673701802690158284e00d991c661 Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Sun, 20 Mar 2022 17:36:26 +0100
Subject: [PATCH] adding slider to MedianOfFreeBedsByKreisChartView

---
 docs/MedianOfFreeBedsByKreisChartView.js |  5 ++++
 docs/intensivstationen.html              | 14 +++---------
 docs/intensivstationen.js                | 29 +++++++++++++++++++++---
 src/help.txt                             |  2 ++
 4 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/docs/MedianOfFreeBedsByKreisChartView.js b/docs/MedianOfFreeBedsByKreisChartView.js
index 941b958d952..add365222b4 100644
--- a/docs/MedianOfFreeBedsByKreisChartView.js
+++ b/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: [
diff --git a/docs/intensivstationen.html b/docs/intensivstationen.html
index 632bc4d7805..77cb23508e6 100644
--- a/docs/intensivstationen.html
+++ b/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) {
diff --git a/docs/intensivstationen.js b/docs/intensivstationen.js
index 75fcc25ab53..9e0c20c7a4e 100644
--- a/docs/intensivstationen.js
+++ b/docs/intensivstationen.js
@@ -46,9 +46,32 @@ function add_median_free_beds_in_percent(dataDicts) {
     }
 }
 
-function displayMedianOfFreeBedsByKreisChart(canvas) {
-    const medianOfFreeBedsByKreisChartView = new MedianOfFreeBedsByKreisChartView(canvas);
+function displayMedianOfFreeBedsByKreisChart(canvas, slider) {
     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);
 }
diff --git a/src/help.txt b/src/help.txt
index 1704b8aeea5..a41b885fbce 100644
--- a/src/help.txt
+++ b/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