francois/HowBadIsMyBatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drawing traffic lights in background

Browse Source
This commit is contained in:
frankknoll
2022-03-15 10:50:34 +01:00
parent 8757f15c0d
commit f8ad038669
2 changed files with 54 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/FreeBedsChartView.js
View File

@@ -16,10 +16,42 @@ class FreeBedsChartView {
{ {
type: 'line', type: 'line',
data: this.#getData(data), 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) { #getData(data) {
return { return {
datasets: [ datasets: [
@@ -29,7 +61,7 @@ class FreeBedsChartView {
parsing: { parsing: {
yAxisKey: 'free_beds_divided_by_all_beds_in_percent' 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) { #getOptions(title) {
return { return {
chartArea: {
},
plugins: { plugins: {
title: { title: {
display: true, display: true,
@@ -67,8 +101,8 @@ class FreeBedsChartView {
} }
}, },
y: { y: {
// min: 0, min: 0,
// max: 100, max: 100,
title: { title: {
display: true, display: true,
text: "Anteil freier Betten" text: "Anteil freier Betten"

23
docs/intensivstationen.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>DIVI-Intensivregister auf Landkreisebene</title> <title>DIVI-Intensivregister auf Landkreisebene 2020 bis heute</title>
<link href="forkMeOnGitHub.css" rel="stylesheet" type="text/css" /> <link href="forkMeOnGitHub.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script> <script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
@@ -48,7 +48,7 @@
<body> <body>
<span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span> <span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span>
<h1>DIVI-Intensivregister auf Landkreisebene</h1> <h1>DIVI-Intensivregister auf Landkreisebene 2020 bis heute</h1>
<label>Landkreis:</label> <label>Landkreis:</label>
<select id="kreisSelect" name="kreis"> <select id="kreisSelect" name="kreis">
<option selected="" value="de">Alle Landkreise</option> <option selected="" value="de">Alle Landkreise</option>
@@ -437,7 +437,8 @@
<option value="Zweibrücken, kreisfreie Stadt">Zweibrücken, kreisfreie Stadt</option> <option value="Zweibrücken, kreisfreie Stadt">Zweibrücken, kreisfreie Stadt</option>
<option value="Zwickau">Zwickau</option> <option value="Zwickau">Zwickau</option>
</select> </select>
<h2 class="heading"></h2> <h2>Freie und belegte Intensivbetten</h2>
<h3 class="heading"></h3>
Einwohnerzahl: <span class="population"></span> Einwohnerzahl: <span class="population"></span>
<p> <p>
<canvas id="intensiveCareCapacities"></canvas> <canvas id="intensiveCareCapacities"></canvas>
@@ -449,14 +450,22 @@
<dt>Freie Betten:</dt> <dt>Freie Betten:</dt>
<dd>Anzahl der freien, betreibbaren Intensivbetten (Low- und High-Care) für Erwachsene und Kinder zur <dd>Anzahl der freien, betreibbaren Intensivbetten (Low- und High-Care) für Erwachsene und Kinder zur
Behandlung von allen intensivpflichtigen Erkrankungen.</dd> Behandlung von allen intensivpflichtigen Erkrankungen.</dd>
<dt>Datensatz:</dt>
<dd><a href="https://www.intensivregister.de/#/aktuelle-lage/downloads" target="_blank">Landkreis-Daten</a></dd>
<dt>Datenstand:</dt>
<dd id="Datenstand">12.03.2022, 12:38 Uhr</dd>
</dl> </dl>
<h2>Anteil der freien Betten an der Gesamtzahl der Intensivbetten</h2>
<p> <p>
<canvas id="freeBeds"></canvas> <canvas id="freeBeds"></canvas>
</p> </p>
<dl>
<dt>Datensatz:</dt>
<dd><a href="https://www.intensivregister.de/#/aktuelle-lage/downloads" target="_blank">Landkreis-Daten</a></dd>
<dt>siehe auch:</dt>
<dd><a href="https://experience.arcgis.com/experience/3a132983ad3c4ab8a28704e9addefaba" target="_blank">Dashboard
DIVI-Intensivregister auf Landkreisebene</a></dd>
<dd><a href="https://www.intensivregister.de/#/aktuelle-lage/kartenansichten" target="_blank">Kartenansichten</a>
</dd>
<dt>Datenstand:</dt>
<dd id="Datenstand">12.03.2022, 12:38 Uhr</dd>
</dl>
</body> </body>
</html> </html>