refactoring

2022-02-28 19:14:03 +01:00
parent 689aa780ae
commit 57e9d1b62b
4 changed files with 226 additions and 87 deletions
--- a/docs/intensivstationen.html
+++ b/docs/intensivstationen.html
@@ -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>