refactoring

docs/BatchCodeDetailsView.js

@@ -1,9 +1,14 @@
 class BatchCodeDetailsView {
 
     #uiContainer;
+    #adverseReactionReportsChartView;
+    #histogramChartView;
 
     constructor(uiContainer) {
         this.#uiContainer = uiContainer
+        this.#adverseReactionReportsChartView = new AdverseReactionReportsChartView(this.#uiContainer.querySelector('#adverseReactionReportsChartView'));
+        const chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
+        this.#histogramChartView = new HistogramChartView(chartWithSlider.querySelector("canvas"));
     }
 
     // FK-TODO: unbind all events here and in HistogramChartView
@@ -28,10 +33,9 @@ class BatchCodeDetailsView {
         this.#displayHeading(histoDescrs.batchcode);
         this.#displayData(histoDescrs);
         const chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
-        const histogramChartView = new HistogramChartView(chartWithSlider.querySelector("canvas"));
         this.#displayAdverseReactionReportsChart(histoDescrs);
-        this.#displaySelectBatchcodeCombination(histoDescrs.histograms, histogramChartView, chartWithSlider);
-        this.#displayHistogram(histoDescrs.histograms[0], histogramChartView, chartWithSlider);
+        this.#displaySelectBatchcodeCombination(histoDescrs.histograms, this.#histogramChartView, chartWithSlider);
+        this.#displayHistogram(histoDescrs.histograms[0], this.#histogramChartView, chartWithSlider);
     }
 
     #displayHeading(batchcode) {
@@ -41,10 +45,7 @@ class BatchCodeDetailsView {
     }
 
     #displayAdverseReactionReportsChart(histoDescrs) {
-        const canvas = UIUtils.instantiateTemplate('template-canvas');
-        this.#uiContainer.appendChild(canvas);
-        const adverseReactionReportsChartView = new AdverseReactionReportsChartView(canvas);
-        adverseReactionReportsChartView.displayChart(
+        this.#adverseReactionReportsChartView.displayChart(
             {
                 'Adverse Reaction Reports': histoDescrs['Adverse Reaction Reports'],
                 'Deaths': histoDescrs['Deaths'],
@@ -73,7 +74,6 @@ class BatchCodeDetailsView {
                 histograms: histograms,
                 onSelect: histoDescr => this.#displayHistogram(histoDescr, histogramChartView, chartWithSlider)
             });
-        this.#uiContainer.appendChild(selectBatchcodeCombinationElement);
     }
 
     #displayHistogram(histoDescr, histogramChartView, chartWithSlider) {

docs/BatchCodeSelectInitializer.js

@@ -1,12 +1,13 @@
 class BatchCodeSelectInitializer {
 
     static initialize({batchCodeSelectElement, batchCodeDetailsElement}) {
+        const batchCodeDetailsView = new BatchCodeDetailsView(batchCodeDetailsElement);
         batchCodeSelectElement.select2({ minimumInputLength: 4 });
         batchCodeSelectElement.on(
             'select2:select',
             function (event) {
                 const batchcode = event.params.data.id;
-                new BatchCodeDetailsView(batchCodeDetailsElement).displayBatchCodeDetails(batchcode);
+                batchCodeDetailsView.displayBatchCodeDetails(batchcode);
                 GoogleAnalytics.click_batchcode(batchcode);
             });
         batchCodeSelectElement.select2('open');

docs/batchCodeTable.html

@@ -49764,6 +49764,7 @@
   </p>
   <div id="batchCodeDetails" style="width: 50%">
     <div id="selectBatchcodeCombination">
+      <canvas id="adverseReactionReportsChartView"></canvas>
       <label>Select batchcode combination:
         <select id="batchcodesSelect" name="batchcodes">
         </select>
@@ -49785,9 +49786,6 @@
   <p>
     <span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span>
   </p>
-  <template id="template-canvas">
-    <canvas></canvas>
-  </template>
 </body>
 
 </html>