diff --git a/docs/FreeBedsChartView.js b/docs/FreeBedsChartView.js new file mode 100644 index 00000000000..c50f3d8069e --- /dev/null +++ b/docs/FreeBedsChartView.js @@ -0,0 +1,113 @@ +class FreeBedsChartView { + + #canvas; + #chart; + + constructor(canvas) { + this.#canvas = canvas; + } + + displayChart({ data, title }) { + if (this.#chart != null) { + this.#chart.destroy(); + } + this.#chart = new Chart( + this.#canvas, + { + type: 'line', + data: this.#getData(data), + options: this.#getOptions(title), + plugins: [this.#getBackgroundTrafficLightsPlugin()] + }); + } + + #getBackgroundTrafficLightsPlugin() { + function fillRect({ chart, startInPercent, endInPercent, color }) { + const ctx = chart.ctx; + const chartArea = chart.chartArea; + const chartWidth = chartArea.right - chartArea.left; + const chartHeight = chartArea.bottom - chartArea.top + const y = chartArea.bottom - chartHeight * endInPercent / 100; + const height = chartHeight * (endInPercent - startInPercent) / 100; + ctx.fillStyle = color; + ctx.fillRect(chartArea.left, y, chartWidth, height); + } + + function drawTrafficLights(chart) { + const RED = 'rgba(240, 59, 32, 0.75)'; + const YELLOW = 'rgba(254, 178, 76, 0.75)'; + const GREEN = 'rgba(56, 168, 0, 0.75)'; + chart.ctx.save(); + fillRect({ chart: chart, startInPercent: 0, endInPercent: 10, color: RED }); + fillRect({ chart: chart, startInPercent: 10, endInPercent: 25, color: YELLOW }); + fillRect({ chart: chart, startInPercent: 25, endInPercent: 100, color: GREEN }); + chart.ctx.restore(); + } + + return { beforeDraw: drawTrafficLights }; + } + + #getData(data) { + return { + datasets: [ + { + label: 'Anteil freier Betten', + data: data, + parsing: { + yAxisKey: 'free_beds_divided_by_all_beds_in_percent' + }, + backgroundColor: 'rgba(0, 0, 150, 1)' + } + ] + }; + } + + #getOptions(title) { + return { + plugins: { + title: { + display: true, + text: title + }, + 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; + } + } + } + }, + responsive: true, + scales: { + x: { + type: 'time', + time: { + unit: 'month' + } + }, + y: { + min: 0, + max: 100, + title: { + display: true, + text: "Anteil freier Betten" + }, + ticks: { + callback: value => value + "%" + } + } + }, + parsing: { + xAxisKey: 'date' + } + }; + } +} \ No newline at end of file diff --git a/docs/IntensiveCareCapacitiesChartView.js b/docs/IntensiveCareCapacitiesChartView.js index e6b1effad2f..4b815e41822 100644 --- a/docs/IntensiveCareCapacitiesChartView.js +++ b/docs/IntensiveCareCapacitiesChartView.js @@ -29,7 +29,7 @@ class IntensiveCareCapacitiesChartView { parsing: { yAxisKey: 'betten_belegt' }, - backgroundColor: 'rgba(255, 0, 0, 1)', + backgroundColor: 'rgba(255, 0, 0, 1)' }, { label: 'Freie Betten', @@ -37,7 +37,7 @@ class IntensiveCareCapacitiesChartView { parsing: { yAxisKey: 'betten_frei' }, - backgroundColor: 'rgba(0, 255, 0, 1)', + backgroundColor: 'rgba(0, 255, 0, 1)' } ] }; diff --git a/docs/UIUtils.js b/docs/UIUtils.js index a3e80645278..ca1bb40abf8 100644 --- a/docs/UIUtils.js +++ b/docs/UIUtils.js @@ -11,5 +11,9 @@ class UIUtils { chartViewElement: chartViewElement, canvas: chartViewElement.querySelector(".canvas") }; - } + } + + static getSelectedOption(selectElement) { + return selectElement.options[selectElement.selectedIndex]; + } } diff --git a/docs/intensivstationen.html b/docs/intensivstationen.html index 87f1174f2b3..b8607e43c43 100644 --- a/docs/intensivstationen.html +++ b/docs/intensivstationen.html @@ -1,456 +1,471 @@ + - - -DIVI-Intensivregister auf Landkreisebene - - - - - - - - + + + + + + + + -Fork me on GitHub -

DIVI-Intensivregister auf Landkreisebene

- - -

+ Fork me on GitHub +

DIVI-Intensivregister auf Landkreisebene 2020 bis heute

+ + +

Freie und belegte Intensivbetten

+

Einwohnerzahl: -

- -

-
-
Belegte Betten:
-
Anzahl der belegten Intensivbetten (Low- und High-Care), unabhängig von der Behandlungsursache, +

+ +

+
+
Belegte Betten:
+
Anzahl der belegten Intensivbetten (Low- und High-Care), unabhängig von der Behandlungsursache, für Erwachsene und Kinder.
-
Freie Betten:
-
Anzahl der freien, betreibbaren Intensivbetten (Low- und High-Care) für Erwachsene und Kinder zur +
Freie Betten:
+
Anzahl der freien, betreibbaren Intensivbetten (Low- und High-Care) für Erwachsene und Kinder zur Behandlung von allen intensivpflichtigen Erkrankungen.
-
Datensatz:
-
Landkreis-Daten
-
Datenstand:
-
14.03.2022, 12:38 Uhr
-
+
+

Anteil der freien Betten an der Gesamtzahl der Intensivbetten

+

+ +

+
+
Datensatz:
+
Landkreis-Daten
+
siehe auch:
+
Dashboard + DIVI-Intensivregister auf Landkreisebene
+
Kartenansichten +
+
Datenstand:
+
12.03.2022, 12:38 Uhr
+
+ \ No newline at end of file diff --git a/docs/intensivstationen.js b/docs/intensivstationen.js index 4f50b3cc2d7..1cc0aece53a 100644 --- a/docs/intensivstationen.js +++ b/docs/intensivstationen.js @@ -9,3 +9,24 @@ function displayIntensiveCareCapacitiesChart( intensiveCareCapacitiesChartView.displayChart({ data: json.data, title: kreisText }); }); } + +function displayFreeBedsChart({ freeBedsChartView, kreisText, kreisValue }) { + fetch(`data/intensivstationen/intensivstationen-${kreisValue}.json`) + .then(response => response.json()) + .then(json => + freeBedsChartView.displayChart( + { + data: get_free_beds_divided_by_all_beds_in_percent(json.data), + title: kreisText + })); +} + +function get_free_beds_divided_by_all_beds_in_percent(data) { + return data.map(({ date, betten_frei, betten_belegt }) => + ( + { + "date": date, + "free_beds_divided_by_all_beds_in_percent": betten_frei / (betten_frei + betten_belegt) * 100 + } + )); +}