displayMedianOfFreeBedsByKreisChart()

docs/MedianOfFreeBedsByKreisChartView.js

@@ -0,0 +1,82 @@
+class MedianOfFreeBedsByKreisChartView {
+
+    #canvas;
+    #chart;
+
+    constructor(canvas) {
+        this.#canvas = canvas;
+    }
+
+    displayChart(data) {
+        if (this.#chart != null) {
+            this.#chart.destroy();
+        }
+        this.#chart = new Chart(
+            this.#canvas,
+            {
+                type: 'bar',
+                data: this.#getData(data),
+                options: this.#getOptions()
+            });
+    }
+
+    #getData(data) {
+        return {
+            datasets: [
+                {
+                    label: 'Kreis',
+                    data: data,
+                    parsing: {
+                        yAxisKey: 'median_free_beds_in_percent'
+                    },
+                    backgroundColor: 'rgba(0, 255, 0, 1)'
+                }
+            ]
+        };
+    }
+
+    #getOptions() {
+        return {
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'some Title'
+                },
+                tooltip: {
+                    // FK-TODO: DRY with FreeBedsChartView.js
+                    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;
+                        }
+                    }
+                }
+            },
+            responsive: true,
+            scales: {
+                y: {
+                    min: 0,
+                    max: 100,
+                    title: {
+                        display: true,
+                        text: "Median des Anteils freier Betten"
+                    },
+                    // FK-TODO: DRY with FreeBedsChartView.js
+                    ticks: {
+                        callback: value => value + "%"
+                    }
+                }
+            },
+            parsing: {
+                xAxisKey: 'Kreis'
+            }
+        };
+    }
+}

docs/intensivstationen.html

@@ -13,6 +13,7 @@
   <script src="./UIUtils.js"></script>
   <script src="./IntensiveCareCapacitiesChartView.js"></script>
   <script src="./FreeBedsChartView.js"></script>
+  <script src="./MedianOfFreeBedsByKreisChartView.js"></script>
   <script src="./intensivstationen.js"></script>
   <script>
     document.addEventListener(
@@ -25,6 +26,7 @@
         kreisSelect.addEventListener(
           'change',
           event => onKreisOptionSelected(kreisSelect, intensiveCareCapacitiesChartView, freeBedsChartView));
+        displayMedianOfFreeBedsByKreisChart(document.getElementById('medianOfFreeBedsByKreis'));
       });
 
     function onKreisOptionSelected(kreisSelect, intensiveCareCapacitiesChartView, freeBedsChartView) {
@@ -456,6 +458,9 @@
   <p>
     <canvas id="freeBeds"></canvas>
   </p>
+  <p>
+    <canvas id="medianOfFreeBedsByKreis"></canvas>
+  </p>
   <dl>
     <dt>Datensatz:</dt>
     <dd><a href="https://www.intensivregister.de/#/aktuelle-lage/downloads" target="_blank">Landkreis-Daten</a></dd>

docs/intensivstationen.js

@@ -44,4 +44,11 @@ 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) {
+    const medianOfFreeBedsByKreisChartView = new MedianOfFreeBedsByKreisChartView(canvas);
+    fetch(`data/intensivstationen/medianOfFreeBedsByKreisTable.json`)
+        .then(response => response.json())
+        .then(json => medianOfFreeBedsByKreisChartView.displayChart(json));
+}