Merge branch 'main' into pages

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/IntensiveCareCapacitiesChartView.js

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

docs/intensivstationen.js

@@ -1,24 +1,50 @@
 function displayIntensiveCareCapacitiesChart(
-    { intensiveCareCapacitiesChartView, headingElement, populationElement, kreisText, kreisValue }) {
+    { intensiveCareCapacitiesChartView, sliderElement, headingElement, populationElement, kreisText, kreisValue }) {
 
     headingElement.textContent = kreisText
     fetch(`data/intensivstationen/intensivstationen-${kreisValue}.json`)
         .then(response => response.json())
-        .then(json => {
-            populationElement.textContent = new Intl.NumberFormat().format(json.population);
-            intensiveCareCapacitiesChartView.displayChart({ data: json.data, title: kreisText });
+        .then(json => _displayIntensiveCareCapacitiesChart({ intensiveCareCapacitiesChartView, sliderElement, populationElement, kreisText, json }));
+}
+
+function _displayIntensiveCareCapacitiesChart({ intensiveCareCapacitiesChartView, sliderElement, populationElement, kreisText, json }) {
+    populationElement.textContent = new Intl.NumberFormat().format(json.population);
+    intensiveCareCapacitiesChartView.displayChart({ data: json.data, title: kreisText });
+    createSlider(
+        {
+            sliderElement: sliderElement,
+            range: {
+                min: 0,
+                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 =>
-            freeBedsChartView.displayChart(
-                {
-                    data: getDataDicts(json.data),
-                    title: kreisText
-                }));
+        .then(json => _displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, json }));
+}
+
+function _displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, json }) {
+    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) {
@@ -56,16 +82,22 @@ function _displayMedianOfFreeBedsByKreisChart(canvas, sliderElement, data) {
     const medianOfFreeBedsByKreisChartView = new MedianOfFreeBedsByKreisChartView(canvas);
     medianOfFreeBedsByKreisChartView.displayChart(data);
     createSlider(
-        sliderElement,
         {
-            min: 0,
-            max: data.length - 1
-        },
-        canvas.style.height,
-        ([start, end]) => medianOfFreeBedsByKreisChartView.setData(data.slice(start, end + 1)));
+            sliderElement: sliderElement,
+            range: {
+                min: 0,
+                max: data.length - 1
+            },
+            orientation: 'vertical',
+            height: canvas.style.height,
+            onUpdate: ({ start, end }) => medianOfFreeBedsByKreisChartView.setData(data.slice(start, end + 1))
+        });
 }
 
-function createSlider(sliderElement, range, height, onUpdate) {
+function createSlider({ sliderElement, range, orientation, height = null, onUpdate }) {
+    if ('noUiSlider' in sliderElement) {
+        sliderElement.noUiSlider.destroy();
+    }
     noUiSlider.create(
         sliderElement,
         {
@@ -73,8 +105,12 @@ function createSlider(sliderElement, range, height, onUpdate) {
             connect: true,
             range: range,
             step: 1,
-            orientation: 'vertical'
+            orientation: orientation
         });
-    sliderElement.noUiSlider.on('update', onUpdate);
-    sliderElement.style.height = height;
+    sliderElement.noUiSlider.on(
+        'update',
+        ([start, end]) => onUpdate({ start: parseInt(start, 10), end: parseInt(end, 10) }));
+    if (height != null) {
+        sliderElement.style.height = height;
+    }
 }