Merge branch 'main' into pages

docs/FreeBedsChartView.js

@@ -11,12 +11,13 @@ class FreeBedsChartView {
         if (this.#chart != null) {
             this.#chart.destroy();
         }
+        const label = 'Anteil freier Betten';
         this.#chart = new Chart(
             this.#canvas,
             {
                 type: 'line',
-                data: this.#getData(data),
-                options: this.#getOptions(title),
+                data: this.#getData(data, label),
+                options: this.#getOptions(title, label),
                 plugins: [this.#getBackgroundTrafficLightsPlugin()]
             });
     }
@@ -47,11 +48,11 @@ class FreeBedsChartView {
         return { beforeDraw: drawTrafficLights };
     }
 
-    #getData(data) {
+    #getData(data, label) {
         return {
             datasets: [
                 {
-                    label: 'Anteil freier Betten',
+                    label: label,
                     data: data,
                     parsing: {
                         yAxisKey: 'free_beds_divided_by_all_beds_in_percent'
@@ -59,7 +60,7 @@ class FreeBedsChartView {
                     backgroundColor: 'rgba(0, 0, 150, 1)'
                 },
                 {
-                    label: 'Median des Anteils freier Betten',
+                    label: 'Median der Anteile freier Betten',
                     data: data,
                     parsing: {
                         yAxisKey: 'median_free_beds_in_percent'
@@ -70,7 +71,7 @@ class FreeBedsChartView {
         };
     }
 
-    #getOptions(title) {
+    #getOptions(title, label) {
         return {
             plugins: {
                 title: {
@@ -79,17 +80,7 @@ class FreeBedsChartView {
                 },
                 tooltip: {
                     callbacks: {
-                        label: function (context) {
-                            let label = context.dataset.label || '';
-
-                            if (label) {
-                                label += ': ';
-                            }
-                            if (context.parsed.y !== null) {
-                                label += context.parsed.y.toFixed(1) + "%";
-                            }
-                            return label;
-                        }
+                        label: UIUtils.getLabelWithPercent
                     }
                 }
             },
@@ -105,17 +96,7 @@ class FreeBedsChartView {
                         }
                     }
                 },
-                y: {
-                    min: 0,
-                    max: 100,
-                    title: {
-                        display: true,
-                        text: "Anteil freier Betten"
-                    },
-                    ticks: {
-                        callback: value => value + "%"
-                    }
-                }
+                y: UIUtils.getPercentageScale(label)
             },
             parsing: {
                 xAxisKey: 'date'

docs/MedianOfFreeBedsByKreisChartView.js

@@ -0,0 +1,66 @@
+class MedianOfFreeBedsByKreisChartView {
+
+    #canvas;
+    #chart;
+
+    constructor(canvas) {
+        this.#canvas = canvas;
+    }
+
+    displayChart(data) {
+        if (this.#chart != null) {
+            this.#chart.destroy();
+        }
+        const label = 'Median der Anteile freier Betten';
+        this.#chart = new Chart(
+            this.#canvas,
+            {
+                type: 'bar',
+                data: this.#getData(data, label),
+                options: this.#getOptions(label)
+            });
+    }
+
+    setData(data) {
+        this.#chart.config.data.datasets[0].data = data;
+        this.#chart.update();
+    }
+
+    #getData(data, label) {
+        return {
+            datasets: [
+                {
+                    label: label,
+                    data: data,
+                    parsing: {
+                        yAxisKey: 'median_free_beds_in_percent'
+                    },
+                    backgroundColor: 'rgba(0, 255, 0, 1)'
+                }
+            ]
+        };
+    }
+
+    #getOptions(label) {
+        return {
+            plugins: {
+                title: {
+                    display: true,
+                    text: label
+                },
+                tooltip: {
+                    callbacks: {
+                        label: UIUtils.getLabelWithPercent
+                    }
+                }
+            },
+            responsive: true,
+            scales: {
+                y: UIUtils.getPercentageScale(label)
+            },
+            parsing: {
+                xAxisKey: 'Kreis'
+            }
+        };
+    }
+}

docs/UIUtils.js

@@ -16,4 +16,30 @@ class UIUtils {
     static getSelectedOption(selectElement) {
         return selectElement.options[selectElement.selectedIndex];
     }
+
+    static getLabelWithPercent(context) {
+        let label = context.dataset.label || '';
+
+        if (label) {
+            label += ': ';
+        }
+        if (context.parsed.y !== null) {
+            label += context.parsed.y.toFixed(1) + "%";
+        }
+        return label;
+    }
+
+    static getPercentageScale(label) {
+        return {
+            min: 0,
+            max: 100,
+            title: {
+                display: true,
+                text: label
+            },
+            ticks: {
+                callback: value => value + "%"
+            }
+        }
+    }
 }

docs/intensivstationen.html

@@ -24,6 +24,9 @@
         kreisSelect.addEventListener(
           'change',
           event => onKreisOptionSelected(kreisSelect, intensiveCareCapacitiesChartView, freeBedsChartView));
+        displayMedianOfFreeBedsByKreisChart(
+          document.getElementById('medianOfFreeBedsByKreis'),
+          document.getElementById('slider'));
       });
 
     function onKreisOptionSelected(kreisSelect, intensiveCareCapacitiesChartView, freeBedsChartView) {

docs/intensivstationen.js

@@ -44,4 +44,34 @@ function add_median_free_beds_in_percent(dataDicts) {
     for (const dataDict of dataDicts) {
         dataDict["median_free_beds_in_percent"] = median_free_beds_in_percent;
     }
-}
+}
+
+function displayMedianOfFreeBedsByKreisChart(canvas, slider) {
+    fetch(`data/intensivstationen/medianOfFreeBedsByKreisTable.json`)
+        .then(response => response.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);
+}