From aed3ec8298d89c402265f692b3da0dc0eaecdd8b Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Sun, 29 Jan 2023 21:30:27 +0100
Subject: [PATCH] starting to add sliders to charts

---
 docs/HistogramView.js    | 9 +++++----
 docs/UIUtils.js          | 4 ++++
 docs/batchCodeTable.html | 5 +++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/HistogramView.js b/docs/HistogramView.js
index ae4c3938c39..d4f554f1050 100644
--- a/docs/HistogramView.js
+++ b/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',
diff --git a/docs/UIUtils.js b/docs/UIUtils.js
index dde6f8514a2..106e4cd7cd0 100644
--- a/docs/UIUtils.js
+++ b/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;
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index ca88481b00a..940f41b6655 100644
--- a/docs/batchCodeTable.html
+++ b/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>
\ No newline at end of file