refactoring

docs/HistogramChartView.js

@@ -0,0 +1,62 @@
+class HistogramChartView {
+
+    #canvas;
+    #chart;
+
+    constructor(canvas) {
+        this.#canvas = canvas;
+    }
+
+    displayChart(histoDescr) {
+        if (this.#chart != null) {
+            this.#chart.destroy();
+        }
+        this.#chart = new Chart(
+            this.#canvas,
+            {
+                type: 'bar',
+                data: this.#getData(histoDescr),
+                options: this.#getOptions()
+            });
+    }
+
+    // setData(data) {
+    //     this.#chart.config.data.datasets[0].data = data;
+    //     this.#chart.update();
+    // }
+
+    #getData(histoDescr) {
+        const { 'keys': symptoms, 'values': frequencies } = Utils.getKeysAlignedWithValues(histoDescr.histogram);
+        return {
+            labels: symptoms,
+            datasets: [{
+                label: histoDescr.batchcodes.join(', '),
+                data: frequencies
+            }]
+        };
+    }
+
+    #getOptions() {
+        return {
+            indexAxis: 'y',
+            responsive: true,
+            scales: {
+                y: {
+                    title: {
+                        display: true,
+                        text: 'Symptom'
+                    }
+                },
+                x: {
+                    ticks: {
+                        precision: 0
+                    },
+                    title: {
+                        display: true,
+                        text: 'Frequency'
+                    }
+                }
+            }
+        };
+    }
+}

docs/HistogramView.js

@@ -31,42 +31,11 @@ class HistogramView {
 
     #displayHistogram(histoDescr) {
         // FK-TODO: brauchen Slider wie bei intensivstationen
-        const canvas = UIUtils.createCanvas();
+        // FK-TODO: extract class for template-chartWithSlider
-        this.#uiContainer.appendChild(canvas);
+        const element = UIUtils.instantiateTemplate('template-chartWithSlider');
-        const { 'keys': symptoms, 'values': frequencies } = Utils.getKeysAlignedWithValues(histoDescr.histogram);
+        const canvas = element.querySelector("canvas");
-        new Chart(
+        this.#uiContainer.appendChild(element);
-            canvas,
+        const histogramChartView = new HistogramChartView(canvas);
-            {
+        histogramChartView.displayChart(histoDescr);
-                type: 'bar',
-                data: {
-                    labels: symptoms,
-                    datasets: [{
-                        label: histoDescr.batchcodes.join(', '),
-                        data: frequencies
-                    }]
-                },
-                options: {
-                    indexAxis: 'y',
-                    responsive: true,
-                    scales: {
-                        y: {
-                            title: {
-                                display: true,
-                                text: 'Symptom'
-                            }
-                        },
-                        x: {
-                            ticks: {
-                                precision: 0
-                            },
-                            title: {
-                                display: true,
-                                text: 'Frequency'
-                            }
-                        }
-                    },
-                }
-            }
-        );
     }
 }

docs/batchCodeTable.html

@@ -8,6 +8,13 @@
   <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
   <link href="batchCodeTable.css" rel="stylesheet" type="text/css" />
   <link href="forkMeOnGitHub.css" rel="stylesheet" type="text/css" />
+  <script crossorigin="anonymous"
+    integrity="sha512-T5Bneq9hePRO8JR0S/0lQ7gdW+ceLThvC80UjwkMRz+8q+4DARVZ4dqKoyENC7FcYresjfJ6ubaOgIE35irf4w=="
+    referrerpolicy="no-referrer"
+    src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.min.js"></script>
+  <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.css"
+    integrity="sha512-MKxcSu/LDtbIYHBNAWUQwfB3iVoG9xeMCm32QV5hZ/9lFaQZJVaXfz9aFa0IZExWzCpm7OWvp9zq9gVip/nLMg=="
+    referrerpolicy="no-referrer" rel="stylesheet" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"
     type="text/javascript"></script>
@@ -15,6 +22,7 @@
   <script src="./Utils.js"></script>
   <script src="./UIUtils.js"></script>
   <script src="./batchCodeTable.js"></script>
+  <script src="./HistogramChartView.js"></script>
   <script src="./HistogramView.js"></script>
   <script>
     $(document).ready(function () {
@@ -177,6 +185,17 @@
   <template id="template-canvas">
     <canvas></canvas>
   </template>
+
+  <template id="template-chartWithSlider">
+    <div class="chartWithSlider">
+      <div class="chart">
+        <canvas class="canvas"></canvas>
+      </div>
+      <div class="slider">
+        <div id="slider"></div>
+      </div>
+    </div>
+  </template>
 </body>
 
 </html>