refactoring
This commit is contained in:
frankknoll
62
docs/IntensiveCareCapacitiesChartView.js
Normal file
62
docs/IntensiveCareCapacitiesChartView.js
Normal file
@@ -0,0 +1,62 @@
|
||||
class IntensiveCareCapacitiesChartView {
|
||||
|
||||
displayChart({ data, canvas, title }) {
|
||||
new Chart(
|
||||
canvas,
|
||||
{
|
||||
type: 'bar',
|
||||
data: this.#getData(data),
|
||||
options: this.#getOptions(title)
|
||||
});
|
||||
}
|
||||
|
||||
#getData(data) {
|
||||
return {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Belegte Betten',
|
||||
data: data,
|
||||
parsing: {
|
||||
yAxisKey: 'betten_belegt'
|
||||
},
|
||||
backgroundColor: 'rgba(255, 0, 0, 1)',
|
||||
},
|
||||
{
|
||||
label: 'Freie Betten',
|
||||
data: data,
|
||||
parsing: {
|
||||
yAxisKey: 'betten_frei'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 255, 0, 1)',
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
#getOptions(title) {
|
||||
return {
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: title
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'month'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true
|
||||
}
|
||||
},
|
||||
parsing: {
|
||||
xAxisKey: 'date'
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
15
docs/UIUtils.js
Normal file
15
docs/UIUtils.js
Normal file
@@ -0,0 +1,15 @@
|
||||
class UIUtils {
|
||||
|
||||
static instantiateTemplate(templateId) {
|
||||
return document.getElementById(templateId).content.firstElementChild.cloneNode(true);
|
||||
}
|
||||
|
||||
static createChartViewElementWithHeading(heading) {
|
||||
const chartViewElement = UIUtils.instantiateTemplate('template-ChartView');
|
||||
chartViewElement.querySelector(".heading").textContent = heading;
|
||||
return {
|
||||
chartViewElement: chartViewElement,
|
||||
canvas: chartViewElement.querySelector(".canvas")
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -11,99 +11,28 @@
|
||||
<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/chartjs-adapter-moment@^1"></script>
|
||||
<script src="./UIUtils.js"></script>
|
||||
<script src="./IntensiveCareCapacitiesChartView.js"></script>
|
||||
<script src="./intensivstationen.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
displayChart("data/intensivstationen/intensivstationen-de.csv", document.getElementById('deChart'), 'Deutschland, Erwachsenen-Intensivstationen');
|
||||
displayChart("data/intensivstationen/intensivstationen-Tübingen, Landkreis.csv", document.getElementById('tueChart'), 'Tübingen, Erwachsenen-Intensivstationen');
|
||||
displayChart("data/intensivstationen/intensivstationen-Reutlingen, Landkreis.csv", document.getElementById('rtChart'), 'Reutlingen, Erwachsenen-Intensivstationen');
|
||||
});
|
||||
|
||||
function displayChart(file, canvas, title) {
|
||||
Papa.parse(file, {
|
||||
header: true,
|
||||
dynamicTyping: true,
|
||||
download: true,
|
||||
complete: function (results) {
|
||||
// console.log(results);
|
||||
const myChart =
|
||||
new Chart(
|
||||
canvas,
|
||||
{
|
||||
type: 'bar',
|
||||
data: getData(results.data),
|
||||
options: getOptions(title)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getData(data) {
|
||||
return {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Belegte Betten',
|
||||
data: data,
|
||||
parsing: {
|
||||
yAxisKey: 'betten_belegt'
|
||||
},
|
||||
backgroundColor: 'rgba(255, 0, 0, 1)',
|
||||
},
|
||||
{
|
||||
label: 'Freie Betten',
|
||||
data: data,
|
||||
parsing: {
|
||||
yAxisKey: 'betten_frei'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 255, 0, 1)',
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function getOptions(title) {
|
||||
return {
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: title
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'month'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true
|
||||
}
|
||||
},
|
||||
parsing: {
|
||||
xAxisKey: 'date'
|
||||
}
|
||||
};
|
||||
}
|
||||
document.addEventListener(
|
||||
"DOMContentLoaded",
|
||||
event => displayIntensiveCareCapacitiesCharts(document.getElementById('content')));
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<h1>Deutschland</h1>
|
||||
<p>
|
||||
<canvas id="deChart"></canvas>
|
||||
</p>
|
||||
<h1>Tübingen</h1>
|
||||
<p>
|
||||
<canvas id="tueChart"></canvas>
|
||||
</p>
|
||||
<h1>Reutlingen</h1>
|
||||
<p>
|
||||
<canvas id="rtChart"></canvas>
|
||||
</p>
|
||||
<div id="content">
|
||||
</div>
|
||||
|
||||
<template id="template-ChartView">
|
||||
<div>
|
||||
<h1 class="heading"></h1>
|
||||
<p>
|
||||
<canvas class="canvas"></canvas>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
133
docs/intensivstationen.js
Normal file
133
docs/intensivstationen.js
Normal file
@@ -0,0 +1,133 @@
|
||||
const kreisValues =
|
||||
['Flensburg', 'Bamberg', 'Hof', 'Coburg', 'Bayreuth', 'Schwandorf',
|
||||
'Regensburg', 'Neumarkt i.d.OPf.', 'Cham', 'Amberg-Sulzbach',
|
||||
'Amberg', 'Dingolfing-Landau', 'Straubing-Bogen', 'Rottal-Inn',
|
||||
'Regen', 'Passau', 'Landshut', 'Kelheim', 'Weiden i.d.OPf.',
|
||||
'Forchheim', 'Kronach', 'Kitzingen', 'Haßberge', 'Rhön-Grabfeld',
|
||||
'Bad Kissingen', 'Aschaffenburg', 'Würzburg', 'Schweinfurt',
|
||||
'Weißenburg-Gunzenhausen', 'Roth',
|
||||
'Neustadt a.d.Aisch-Bad Windsheim', 'Nürnberger Land',
|
||||
'Erlangen-Höchstadt', 'Ansbach', 'Nürnberg', 'Fürth', 'Erlangen',
|
||||
'Wunsiedel i.Fichtelgebirge', 'Lichtenfels', 'Kulmbach',
|
||||
'Freyung-Grafenau', 'Miltenberg', 'Deggendorf', 'Bodenseekreis',
|
||||
'Biberach', 'Alb-Donau-Kreis', 'Ulm', 'Zollernalbkreis',
|
||||
'Tübingen', 'Reutlingen', 'Waldshut', 'Lörrach', 'Ravensburg',
|
||||
'Konstanz', 'Schwarzwald-Baar-Kreis', 'Rottweil', 'Ortenaukreis',
|
||||
'Emmendingen', 'Breisgau-Hochschwarzwald', 'Freiburg im Breisgau',
|
||||
'Freudenstadt', 'Enzkreis', 'Calw', 'Tuttlingen', 'Sigmaringen',
|
||||
'Ingolstadt', 'München', 'Weilheim-Schongau', 'Traunstein',
|
||||
'Starnberg', 'Rosenheim', 'Pfaffenhofen a.d.Ilm',
|
||||
'Neuburg-Schrobenhausen', 'Mühldorf a.Inn', 'Miesbach',
|
||||
'Landsberg am Lech', 'Garmisch-Partenkirchen', 'Fürstenfeldbruck',
|
||||
'Freising', 'Erding', 'Eichstätt', 'Dachau',
|
||||
'Bad Tölz-Wolfratshausen', 'Berchtesgadener Land', 'Altötting',
|
||||
'Straubing', 'Augsburg', 'Saalekreis', 'Mansfeld-Südharz',
|
||||
'Jerichower Land', 'Harz', 'Burgenlandkreis', 'Börde',
|
||||
'Anhalt-Bitterfeld', 'Altmarkkreis Salzwedel', 'Magdeburg',
|
||||
'Salzlandkreis', 'Halle (Saale)', 'Nordsachsen', 'Leipzig',
|
||||
'Sächsische Schweiz-Osterzgebirge', 'Meißen', 'Görlitz', 'Bautzen',
|
||||
'Dresden', 'Zwickau', 'Dessau-Roßlau', 'Stendal', 'Wittenberg',
|
||||
'Erfurt', 'Altenburger Land', 'Greiz', 'Saale-Orla-Kreis',
|
||||
'Saale-Holzland-Kreis', 'Saalfeld-Rudolstadt', 'Sonneberg',
|
||||
'Weimarer Land', 'Ilm-Kreis', 'Hildburghausen', 'Sömmerda',
|
||||
'Gotha', 'Schmalkalden-Meiningen', 'Kyffhäuserkreis',
|
||||
'Unstrut-Hainich-Kreis', 'Wartburgkreis', 'Nordhausen',
|
||||
'Eichsfeld', 'Weimar', 'Suhl', 'Jena', 'Gera', 'Vogtlandkreis',
|
||||
'Mittelsachsen', 'Erzgebirgskreis', 'Chemnitz',
|
||||
'Brandenburg an der Havel', 'Berlin', 'St. Wendel',
|
||||
'Saarpfalz-Kreis', 'Saarlouis', 'Neunkirchen', 'Merzig-Wadern',
|
||||
'Saarbrücken, Regionalverband', 'Oberallgäu', 'Donau-Ries',
|
||||
'Unterallgäu', 'Ostallgäu', 'Lindau (Bodensee)', 'Neu-Ulm',
|
||||
'Günzburg', 'Dillingen a.d.Donau', 'Aichach-Friedberg',
|
||||
'Memmingen', 'Kempten (Allgäu)', 'Kaufbeuren', 'Cottbus',
|
||||
'Pforzheim', 'Frankfurt (Oder)', 'Barnim',
|
||||
'Landkreis Ludwigslust-Parchim', 'Vorpommern-Greifswald',
|
||||
'Landkreis Nordwestmecklenburg', 'Vorpommern-Rügen',
|
||||
'Landkreis Rostock', 'Mecklenburgische Seenplatte', 'Schwerink',
|
||||
'Rostock, Hanse- und Universitätsstadt', 'Uckermark',
|
||||
'Teltow-Fläming', 'Spree-Neiße', 'Prignitz', 'Potsdam-Mittelmark',
|
||||
'Ostprignitz-Ruppin', 'Oder-Spree', 'Oberspreewald-Lausitz',
|
||||
'Oberhavel', 'Märkisch-Oderland', 'Havelland', 'Elbe-Elster',
|
||||
'Dahme-Spreewald', 'Potsdam', 'Rhein-Neckar-Kreis',
|
||||
'Main-Spessart', 'Mannheim', 'Remscheid', 'Oberhausen',
|
||||
'Mülheim an der Ruhr', 'Mönchengladbach', 'Krefeld', 'Essen',
|
||||
'Duisburg', 'Düsseldorf', 'Bremerhaven', 'Solingen', 'Bremen',
|
||||
'Wesermarsch', 'Vechta', 'Osnabrück', 'Oldenburg', 'Leer',
|
||||
'Grafschaft Bentheim', 'Friesland', 'Emsland', 'Cloppenburg',
|
||||
'Wittmund', 'Wuppertal', 'Kleve', 'Mettmann', 'Steinfurt',
|
||||
'Recklinghausen', 'Coesfeld', 'Borken', 'Münster', 'Gelsenkirchen',
|
||||
'Bottrop', 'Rhein-Sieg-Kreis', 'Rheinisch-Bergischer Kreis',
|
||||
'Oberbergischer Kreis', 'Heinsberg', 'Euskirchen',
|
||||
'Rhein-Erft-Kreis', 'Düren',
|
||||
'Städteregion Aachen (einschl. Stadt Aachen)', 'Leverkusen',
|
||||
'Köln', 'Bonn', 'Wesel', 'Viersen', 'Rhein-Kreis Neuss', 'Aurich',
|
||||
'Ammerland', 'Wilhelmshaven', 'Helmstedt', 'Goslar', 'Gifhorn',
|
||||
'Wolfsburg', 'Salzgitter', 'Braunschweig', 'Hamburg', 'Stormarn',
|
||||
'Steinburg', 'Segeberg', 'Schleswig-Flensburg',
|
||||
'Rendsburg-Eckernförde', 'Plön', 'Pinneberg', 'Ostholstein',
|
||||
'Nordfriesland', 'Herzogtum Lauenburg', 'Dithmarschen',
|
||||
'Neumünster', 'Lübeck', 'Neckar-Odenwald-Kreis', 'Northeim',
|
||||
'Warendorf', 'Peine', 'Göttingen', 'Oldenburg (Oldenburg)',
|
||||
'Emden', 'Delmenhorst', 'Verden', 'Uelzen', 'Stade', 'Heidekreis',
|
||||
'Rotenburg (Wümme)', 'Osterholz', 'Lüneburg', 'Lüchow-Dannenberg',
|
||||
'Harburg', 'Cuxhaven', 'Celle', 'Schaumburg', 'Nienburg (Weser)',
|
||||
'Holzminden', 'Hildesheim', 'Hameln-Pyrmont', 'Diepholz',
|
||||
'Region Hannover', 'Wolfenbüttel', 'Bielefeld', 'Kiel',
|
||||
'Heidelberg', 'Alzey-Worms', 'Zweibrücken', 'Worms', 'Speyer',
|
||||
'Pirmasens', 'Neustadt an der Weinstraße', 'Mainz',
|
||||
'Ludwigshafen am Rhein', 'Landau in der Pfalz', 'Donnersbergkreis',
|
||||
'Kaiserslautern', 'Trier-Saarburg', 'Vulkaneifel',
|
||||
'Eifelkreis Bitburg-Prüm', 'Bernkastel-Wittlich', 'Trier',
|
||||
'Westerwaldkreis', 'Rhein-Lahn-Kreis', 'Rhein-Hunsrück-Kreis',
|
||||
'Neuwied', 'Frankenthal (Pfalz)', 'Germersheim', 'Kusel',
|
||||
'Gütersloh', 'Rastatt', 'Karlsruhe', 'Baden-Baden', 'Ostalbkreis',
|
||||
'Heidenheim', 'Main-Tauber-Kreis', 'Schwäbisch Hall',
|
||||
'Hohenlohekreis', 'Heilbronn', 'Heilbronn, Universitätsstadt',
|
||||
'Rems-Murr-Kreis', 'Ludwigsburg', 'Göppingen', 'Esslingen',
|
||||
'Böblingen', 'Stuttgart', 'Südwestpfalz', 'Mainz-Bingen',
|
||||
'Südliche Weinstraße', 'Mayen-Koblenz', 'Cochem-Zell',
|
||||
'Bad Dürkheim', 'Bad Kreuznach', 'Bergstraße', 'Wiesbaden',
|
||||
'Offenbach am Main', 'Frankfurt am Main', 'Darmstadt', 'Unna',
|
||||
'Soest', 'Siegen-Wittgenstein', 'Märkischer Kreis',
|
||||
'Hochsauerlandkreis', 'Ennepe-Ruhr-Kreis', 'Herne', 'Hamm',
|
||||
'Hagen', 'Dortmund', 'Bochum', 'Paderborn', 'Minden-Lübbecke',
|
||||
'Lippe', 'Höxter', 'Birkenfeld', 'Darmstadt-Dieburg', 'Groß-Gerau',
|
||||
'Olpe', 'Herford', 'Hochtaunuskreis', 'Ahrweiler', 'Koblenz',
|
||||
'Werra-Meißner-Kreis', 'Waldeck-Frankenberg', 'Schwalm-Eder-Kreis',
|
||||
'Kassel', 'Hersfeld-Rotenburg', 'Fulda', 'Vogelsbergkreis',
|
||||
'Altenkirchen (Westerwald)', 'Limburg-Weilburg',
|
||||
'Marburg-Biedenkopf', 'Main-Taunus-Kreis', 'Odenwaldkreis',
|
||||
'Offenbach', 'Main-Kinzig-Kreis', 'Wetteraukreis', 'Gießen',
|
||||
'Lahn-Dill-Kreis', 'Rheingau-Taunus-Kreis', 'Ebersberg',
|
||||
'Schwabach', 'Tirschenreuth'];
|
||||
|
||||
function displayIntensiveCareCapacitiesCharts(content) {
|
||||
for (i = 0; i < 5 /*kreisValues.length*/; i++) {
|
||||
displayIntensiveCareCapacitiesChart(content, kreisValues[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function displayIntensiveCareCapacitiesChart(content, kreis) {
|
||||
const { chartViewElement, canvas } = UIUtils.createChartViewElementWithHeading(kreis);
|
||||
content.appendChild(chartViewElement);
|
||||
withCsvDo(
|
||||
`data/intensivstationen/intensivstationen-${kreis}.csv`,
|
||||
csv =>
|
||||
new IntensiveCareCapacitiesChartView().displayChart(
|
||||
{
|
||||
data: csv,
|
||||
canvas: canvas,
|
||||
title: kreis
|
||||
}));
|
||||
}
|
||||
|
||||
function withCsvDo(file, csvConsumer) {
|
||||
Papa.parse(
|
||||
file,
|
||||
{
|
||||
header: true,
|
||||
dynamicTyping: true,
|
||||
download: true,
|
||||
complete: results => csvConsumer(results.data)
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user