starting to add sliders to charts

docs/HistogramView.js

@@ -25,15 +25,16 @@ class HistogramView {
     #displayHistograms(histoDescrs) {
         this.#uiContainer.appendChild(document.createTextNode(histoDescrs.batchcode));
         for (const histoDescr of histoDescrs.histograms) {
-            this.#uiContainer.appendChild(this.#createHistogram(histoDescr).canvas);
+            this.#displayHistogram(histoDescr);
         }
     }
 
-    #createHistogram(histoDescr) {
+    #displayHistogram(histoDescr) {
         // FK-TODO: brauchen Slider wie bei intensivstationen
-        const canvas = document.createElement("canvas");
+        const canvas = UIUtils.createCanvas();
+        this.#uiContainer.appendChild(canvas);
         const { 'keys': symptoms, 'values': frequencies } = Utils.getKeysAlignedWithValues(histoDescr.histogram);
-        return new Chart(
+        new Chart(
             canvas,
             {
                 type: 'bar',

docs/UIUtils.js

@@ -4,6 +4,10 @@ class UIUtils {
         return document.getElementById(templateId).content.firstElementChild.cloneNode(true);
     }
 
+    static createCanvas() {
+        return UIUtils.instantiateTemplate('template-canvas');
+    }
+
     static createChartViewElementWithHeading(heading) {
         const chartViewElement = UIUtils.instantiateTemplate('template-ChartView');
         chartViewElement.querySelector(".heading").textContent = heading;

docs/batchCodeTable.html

@@ -13,6 +13,7 @@
     type="text/javascript"></script>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
   <script src="./Utils.js"></script>
+  <script src="./UIUtils.js"></script>
   <script src="./batchCodeTable.js"></script>
   <script src="./HistogramView.js"></script>
   <script>
@@ -172,6 +173,10 @@
     <a href="https://vaers.hhs.gov/data/datasets.html" target="_blank">Vaccine Adverse Event Reporting System
       (VAERS)</a>
   </p>
+
+  <template id="template-canvas">
+    <canvas></canvas>
+  </template>
 </body>
 
 </html>