From a7171ceef27f07395d92eca32c5e9c41ac7541ea Mon Sep 17 00:00:00 2001 From: frankknoll Date: Tue, 15 Mar 2022 02:41:06 +0100 Subject: [PATCH 1/9] starting FreeBedsChartView --- docs/FreeBedsChartView.js | 86 +++ docs/IntensiveCareCapacitiesChartView.js | 4 +- docs/intensivstationen.html | 889 ++++++++++++----------- 3 files changed, 562 insertions(+), 417 deletions(-) create mode 100644 docs/FreeBedsChartView.js diff --git a/docs/FreeBedsChartView.js b/docs/FreeBedsChartView.js new file mode 100644 index 00000000000..e6d2d05a6fc --- /dev/null +++ b/docs/FreeBedsChartView.js @@ -0,0 +1,86 @@ +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) + }); + } + + #getData(data) { + return { + datasets: [ + { + label: 'Anteil freier Betten', + data: data, + parsing: { + yAxisKey: 'free_beds_divided_by_all_beds' + }, + backgroundColor: 'rgba(0, 255, 0, 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/intensivstationen.html b/docs/intensivstationen.html index 23bbdf045a7..f066b15a089 100644 --- a/docs/intensivstationen.html +++ b/docs/intensivstationen.html @@ -1,21 +1,59 @@ + - - -DIVI-Intensivregister auf Landkreisebene - - - - - - - - + + + + + + + + + -Fork me on GitHub -

DIVI-Intensivregister auf Landkreisebene

- - -

+ Fork me on GitHub +

DIVI-Intensivregister auf Landkreisebene

+ + +

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:
-
12.03.2022, 12:38 Uhr
-
+
Datensatz:
+
Landkreis-Daten
+
Datenstand:
+
12.03.2022, 12:38 Uhr
+
+

+ +

+ \ No newline at end of file From 359a4f6080555c2fec79dc338fc9c40cb2acdbc5 Mon Sep 17 00:00:00 2001 From: frankknoll Date: Tue, 15 Mar 2022 02:44:29 +0100 Subject: [PATCH 2/9] refactoring --- docs/FreeBedsChartView.js | 2 +- docs/intensivstationen.html | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/FreeBedsChartView.js b/docs/FreeBedsChartView.js index e6d2d05a6fc..822e556596a 100644 --- a/docs/FreeBedsChartView.js +++ b/docs/FreeBedsChartView.js @@ -27,7 +27,7 @@ class FreeBedsChartView { label: 'Anteil freier Betten', data: data, parsing: { - yAxisKey: 'free_beds_divided_by_all_beds' + yAxisKey: 'free_beds_divided_by_all_beds_in_percent' }, backgroundColor: 'rgba(0, 255, 0, 1)' } diff --git a/docs/intensivstationen.html b/docs/intensivstationen.html index f066b15a089..474f5bfedd9 100644 --- a/docs/intensivstationen.html +++ b/docs/intensivstationen.html @@ -66,11 +66,12 @@ kreisText: selectedOption.text, kreisValue: selectedOption.value }); + // FK-TODO: extract method fetch(`data/intensivstationen/intensivstationen-${selectedOption.value}.json`) .then(response => response.json()) .then(json => { for (const dataElement of json.data) { - dataElement.free_beds_divided_by_all_beds = dataElement.betten_frei / (dataElement.betten_frei + dataElement.betten_belegt) * 100; + dataElement.free_beds_divided_by_all_beds_in_percent = dataElement.betten_frei / (dataElement.betten_frei + dataElement.betten_belegt) * 100; } freeBedsChartView.displayChart({ data: json.data, title: selectedOption.text }); }); @@ -87,7 +88,7 @@ .then(response => response.json()) .then(json => { for (const dataElement of json.data) { - dataElement.free_beds_divided_by_all_beds = dataElement.betten_frei / (dataElement.betten_frei + dataElement.betten_belegt) * 100; + dataElement.free_beds_divided_by_all_beds_in_percent = dataElement.betten_frei / (dataElement.betten_frei + dataElement.betten_belegt) * 100; } freeBedsChartView.displayChart({ data: json.data, title: 'Alle Landkreise' }); }); From 3d2fad8902aa68297693070529e0b0466a311e23 Mon Sep 17 00:00:00 2001 From: frankknoll Date: Tue, 15 Mar 2022 08:52:11 +0100 Subject: [PATCH 3/9] refactoring --- docs/intensivstationen.html | 97 ++++++++++--------------------------- 1 file changed, 25 insertions(+), 72 deletions(-) diff --git a/docs/intensivstationen.html b/docs/intensivstationen.html index 474f5bfedd9..1ae698f9318 100644 --- a/docs/intensivstationen.html +++ b/docs/intensivstationen.html @@ -13,87 +13,40 @@ - From 8757f15c0dbb5c88c65cd165ab9d29360e27079b Mon Sep 17 00:00:00 2001 From: frankknoll Date: Tue, 15 Mar 2022 09:27:49 +0100 Subject: [PATCH 6/9] refactoring --- docs/intensivstationen.html | 13 +++++-------- docs/intensivstationen.js | 21 +++++++++++++++++++++ 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/docs/intensivstationen.html b/docs/intensivstationen.html index def195e81df..4a12795eabb 100644 --- a/docs/intensivstationen.html +++ b/docs/intensivstationen.html @@ -36,14 +36,11 @@ kreisText: selectedOption.text, kreisValue: selectedOption.value }); - // FK-TODO: extract method - fetch(`data/intensivstationen/intensivstationen-${selectedOption.value}.json`) - .then(response => response.json()) - .then(json => { - for (const dataElement of json.data) { - dataElement.free_beds_divided_by_all_beds_in_percent = dataElement.betten_frei / (dataElement.betten_frei + dataElement.betten_belegt) * 100; - } - freeBedsChartView.displayChart({ data: json.data, title: selectedOption.text }); + displayFreeBedsChart( + { + freeBedsChartView: freeBedsChartView, + kreisText: selectedOption.text, + kreisValue: selectedOption.value }); } 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 + } + )); +} From f8ad038669b2e063c1a286a47cdb3a5888182521 Mon Sep 17 00:00:00 2001 From: frankknoll Date: Tue, 15 Mar 2022 10:50:34 +0100 Subject: [PATCH 7/9] drawing traffic lights in background --- docs/FreeBedsChartView.js | 42 +++++++++++++++++++++++++++++++++---- docs/intensivstationen.html | 23 +++++++++++++------- 2 files changed, 54 insertions(+), 11 deletions(-) diff --git a/docs/FreeBedsChartView.js b/docs/FreeBedsChartView.js index 822e556596a..a9c4df05bbe 100644 --- a/docs/FreeBedsChartView.js +++ b/docs/FreeBedsChartView.js @@ -16,10 +16,42 @@ class FreeBedsChartView { { type: 'line', data: this.#getData(data), - options: this.#getOptions(title) + options: this.#getOptions(title), + plugins: [this.#getPlugin()] }); } + #getPlugin() { + return { + beforeDraw: chart => { + if (chart.config.options.chartArea) { + const ctx = chart.ctx; + const chartArea = chart.chartArea; + const width = chartArea.right - chartArea.left; + const height = chartArea.bottom - chartArea.top + + const green = 'rgba(56, 168, 0, 0.75)'; + const yellow = 'rgba(254, 178, 76, 0.75)'; + const red = 'rgba(240, 59, 32, 0.75)'; + const redHeight = height * 10 / 100; + const yellowHeight = height * 15 / 100; + const greenHeight = height * 75 / 100; + + ctx.save(); + ctx.fillStyle = red; + ctx.fillRect(chartArea.left, chartArea.bottom - redHeight, width, redHeight); + + ctx.fillStyle = yellow; + ctx.fillRect(chartArea.left, chartArea.bottom - redHeight - yellowHeight, width, yellowHeight); + + ctx.fillStyle = green; + ctx.fillRect(chartArea.left, chartArea.bottom - redHeight - yellowHeight - greenHeight, width, greenHeight); + ctx.restore(); + } + } + }; + } + #getData(data) { return { datasets: [ @@ -29,7 +61,7 @@ class FreeBedsChartView { parsing: { yAxisKey: 'free_beds_divided_by_all_beds_in_percent' }, - backgroundColor: 'rgba(0, 255, 0, 1)' + backgroundColor: 'rgba(0, 0, 150, 1)' } ] }; @@ -37,6 +69,8 @@ class FreeBedsChartView { #getOptions(title) { return { + chartArea: { + }, plugins: { title: { display: true, @@ -67,8 +101,8 @@ class FreeBedsChartView { } }, y: { - // min: 0, - // max: 100, + min: 0, + max: 100, title: { display: true, text: "Anteil freier Betten" diff --git a/docs/intensivstationen.html b/docs/intensivstationen.html index 4a12795eabb..b8607e43c43 100644 --- a/docs/intensivstationen.html +++ b/docs/intensivstationen.html @@ -4,7 +4,7 @@ - DIVI-Intensivregister auf Landkreisebene + DIVI-Intensivregister auf Landkreisebene 2020 bis heute @@ -48,7 +48,7 @@ Fork me on GitHub -

DIVI-Intensivregister auf Landkreisebene

+

DIVI-Intensivregister auf Landkreisebene 2020 bis heute

-

+

Freie und belegte Intensivbetten

+

Einwohnerzahl:

@@ -449,14 +450,22 @@

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:
-
12.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 From dbafd3323bee32b481d8ea59d151d6c49817b763 Mon Sep 17 00:00:00 2001 From: frankknoll Date: Tue, 15 Mar 2022 11:48:24 +0100 Subject: [PATCH 8/9] refactoring --- docs/FreeBedsChartView.js | 49 ++++++++++++++++++++------------------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/docs/FreeBedsChartView.js b/docs/FreeBedsChartView.js index a9c4df05bbe..9cd585fecd3 100644 --- a/docs/FreeBedsChartView.js +++ b/docs/FreeBedsChartView.js @@ -17,36 +17,37 @@ class FreeBedsChartView { type: 'line', data: this.#getData(data), options: this.#getOptions(title), - plugins: [this.#getPlugin()] + plugins: [this.#getBackgroundTrafficLightsPlugin()] }); } - #getPlugin() { + #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: chart => { if (chart.config.options.chartArea) { - const ctx = chart.ctx; - const chartArea = chart.chartArea; - const width = chartArea.right - chartArea.left; - const height = chartArea.bottom - chartArea.top - - const green = 'rgba(56, 168, 0, 0.75)'; - const yellow = 'rgba(254, 178, 76, 0.75)'; - const red = 'rgba(240, 59, 32, 0.75)'; - const redHeight = height * 10 / 100; - const yellowHeight = height * 15 / 100; - const greenHeight = height * 75 / 100; - - ctx.save(); - ctx.fillStyle = red; - ctx.fillRect(chartArea.left, chartArea.bottom - redHeight, width, redHeight); - - ctx.fillStyle = yellow; - ctx.fillRect(chartArea.left, chartArea.bottom - redHeight - yellowHeight, width, yellowHeight); - - ctx.fillStyle = green; - ctx.fillRect(chartArea.left, chartArea.bottom - redHeight - yellowHeight - greenHeight, width, greenHeight); - ctx.restore(); + drawTrafficLights(chart); } } }; From 4eb3d7ccc2d8830d7a97f63081b4ecf7eae29d01 Mon Sep 17 00:00:00 2001 From: frankknoll Date: Tue, 15 Mar 2022 11:52:42 +0100 Subject: [PATCH 9/9] refactoring --- docs/FreeBedsChartView.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/FreeBedsChartView.js b/docs/FreeBedsChartView.js index 9cd585fecd3..c50f3d8069e 100644 --- a/docs/FreeBedsChartView.js +++ b/docs/FreeBedsChartView.js @@ -44,13 +44,7 @@ class FreeBedsChartView { chart.ctx.restore(); } - return { - beforeDraw: chart => { - if (chart.config.options.chartArea) { - drawTrafficLights(chart); - } - } - }; + return { beforeDraw: drawTrafficLights }; } #getData(data) { @@ -70,8 +64,6 @@ class FreeBedsChartView { #getOptions(title) { return { - chartArea: { - }, plugins: { title: { display: true,