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

starting FreeBedsChartView

Browse Source
This commit is contained in:
frankknoll
2022-03-15 02:41:06 +01:00
parent ea691f9083
commit a7171ceef2
3 changed files with 562 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
docs/FreeBedsChartView.js Normal file
View File

@@ -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'
}
};
}
}

4
docs/IntensiveCareCapacitiesChartView.js
View File

@@ -29,7 +29,7 @@ class IntensiveCareCapacitiesChartView {
parsing: { parsing: {
yAxisKey: 'betten_belegt' yAxisKey: 'betten_belegt'
}, },
backgroundColor: 'rgba(255, 0, 0, 1)', backgroundColor: 'rgba(255, 0, 0, 1)'
}, },
{ {
label: 'Freie Betten', label: 'Freie Betten',
@@ -37,7 +37,7 @@ class IntensiveCareCapacitiesChartView {
parsing: { parsing: {
yAxisKey: 'betten_frei' yAxisKey: 'betten_frei'
}, },
backgroundColor: 'rgba(0, 255, 0, 1)', backgroundColor: 'rgba(0, 255, 0, 1)'
} }
] ]
}; };

59
docs/intensivstationen.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<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" />
@@ -10,12 +11,49 @@
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
<script src="./UIUtils.js"></script> <script src="./UIUtils.js"></script>
<script src="./IntensiveCareCapacitiesChartView.js"></script> <script src="./IntensiveCareCapacitiesChartView.js"></script>
<script src="./FreeBedsChartView.js"></script>
<script src="./intensivstationen.js"></script> <script src="./intensivstationen.js"></script>
<script>
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'line',
data: data,
options: {}
};
document.addEventListener(
"DOMContentLoaded",
event => {
//const myChart = new Chart(
// document.getElementById('myChart'),
// config
//);
});
</script>
<script> <script>
document.addEventListener( document.addEventListener(
"DOMContentLoaded", "DOMContentLoaded",
event => { event => {
const intensiveCareCapacitiesChartView = new IntensiveCareCapacitiesChartView(document.querySelector(".canvas")); const intensiveCareCapacitiesChartView = new IntensiveCareCapacitiesChartView(document.querySelector(".canvas"));
const freeBedsChartView = new FreeBedsChartView(document.getElementById('myChart'));
document.querySelector('#kreisSelect').addEventListener( document.querySelector('#kreisSelect').addEventListener(
'change', 'change',
event => { event => {
@@ -28,6 +66,14 @@
kreisText: selectedOption.text, kreisText: selectedOption.text,
kreisValue: selectedOption.value kreisValue: selectedOption.value
}); });
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;
}
freeBedsChartView.displayChart({ data: json.data, title: selectedOption.text });
});
}); });
displayIntensiveCareCapacitiesChart( displayIntensiveCareCapacitiesChart(
{ {
@@ -37,6 +83,14 @@
kreisText: 'Alle Landkreise', kreisText: 'Alle Landkreise',
kreisValue: 'de' kreisValue: 'de'
}); });
fetch(`data/intensivstationen/intensivstationen-de.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;
}
freeBedsChartView.displayChart({ data: json.data, title: 'Alle Landkreise' });
});
}); });
function getSelectedOption(select) { function getSelectedOption(select) {
@@ -44,6 +98,7 @@
} }
</script> </script>
</head> </head>
<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</h1>
@@ -452,5 +507,9 @@
<dt>Datenstand:</dt> <dt>Datenstand:</dt>
<dd id="Datenstand">12.03.2022, 12:38 Uhr</dd> <dd id="Datenstand">12.03.2022, 12:38 Uhr</dd>
</dl> </dl>
<p>
<canvas id="myChart"></canvas>
</p>
</body> </body>
</html> </html>