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',
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"

23
docs/intensivstationen.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<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" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
@@ -48,7 +48,7 @@
<body>
<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>
<select id="kreisSelect" name="kreis">
<option selected="" value="de">Alle Landkreise</option>
@@ -437,7 +437,8 @@
<option value="Zweibrücken, kreisfreie Stadt">Zweibrücken, kreisfreie Stadt</option>
<option value="Zwickau">Zwickau</option>
</select>
<h2 class="heading"></h2>
<h2>Freie und belegte Intensivbetten</h2>
<h3 class="heading"></h3>
Einwohnerzahl: <span class="population"></span>
<p>
<canvas id="intensiveCareCapacities"></canvas>
@@ -449,14 +450,22 @@
<dt>Freie Betten:</dt>
<dd>Anzahl der freien, betreibbaren Intensivbetten (Low- und High-Care) für Erwachsene und Kinder zur
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>
<h2>Anteil der freien Betten an der Gesamtzahl der Intensivbetten</h2>
<p>
<canvas id="freeBeds"></canvas>
</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>
</html>