adding AdverseReactionReportsChartView

docs/AdverseReactionReportsChartView.js

@@ -0,0 +1,65 @@
+class AdverseReactionReportsChartView {
+
+    #canvas;
+    #chart;
+
+    constructor(canvas) {
+        this.#canvas = canvas;
+    }
+
+    displayChart(ADRDescr) {
+        if (this.#chart != null) {
+            this.#chart.destroy();
+        }
+        this.#chart = new Chart(
+            this.#canvas,
+            {
+                type: 'doughnut',
+                data: this.#getData(ADRDescr),
+                options: this.#getOptions()
+            });
+    }
+
+    setData(histoDescr) {
+        const data = this.#getData(histoDescr);
+        this.#chart.config.data = data;
+        this.#chart.update();
+    }
+
+    #getData(ADRDescr) {
+        return {
+            labels: [
+                'Deaths',
+                'Disabilities',
+                'Life Threatening Illnesses',
+                'Other Adverse Reaction Reports'
+            ],
+            datasets: [{
+                // FK-TODO: refactor
+                data: [
+                    ADRDescr['Deaths'],
+                    ADRDescr['Disabilities'],
+                    ADRDescr['Life Threatening Illnesses'],
+                    ADRDescr['Adverse Reaction Reports'] - (ADRDescr['Deaths'] + ADRDescr['Disabilities'] + ADRDescr['Life Threatening Illnesses'])
+                ],
+                backgroundColor: [
+                    'rgb(255, 99, 132)',
+                    'rgb(54, 162, 235)',
+                    'rgb(255, 205, 86)',
+                    'grey'
+                ],
+                hoverOffset: 4
+            }]
+        };
+    }
+
+    #getOptions() {
+        return {
+            title: {
+                display: true,
+                text: 'Adverse Reaction Report for Batch FE6208',
+                position: 'top'
+            }
+        };
+    }
+}

docs/HistogramView.js

@@ -30,6 +30,7 @@ class HistogramView {
         this.#displayData(histoDescrs);
         const chartWithSlider = UIUtils.instantiateTemplate('template-chartWithSlider');
         const histogramChartView = new HistogramChartView(chartWithSlider.querySelector("canvas"));
+        this.#displayAdverseReactionReportsChart(histoDescrs);
         this.#displaySelectBatchcodeCombination(histoDescrs.histograms, histogramChartView, chartWithSlider);
         this.#uiContainer.appendChild(chartWithSlider);
         this.#displayHistogram(histoDescrs.histograms[0], histogramChartView, chartWithSlider);
@@ -41,6 +42,19 @@ class HistogramView {
         this.#uiContainer.appendChild(h1);
     }
 
+    #displayAdverseReactionReportsChart(histoDescrs) {
+        const canvas = UIUtils.instantiateTemplate('template-canvas');
+        this.#uiContainer.appendChild(canvas);
+        const adverseReactionReportsChartView = new AdverseReactionReportsChartView(canvas);
+        adverseReactionReportsChartView.displayChart(
+            {
+                'Adverse Reaction Reports': histoDescrs['Adverse Reaction Reports'],
+                'Deaths': histoDescrs['Deaths'],
+                'Disabilities': histoDescrs['Disabilities'],
+                'Life Threatening Illnesses': histoDescrs['Life Threatening Illnesses']
+            });
+    }
+
     #displayData(histoDescrs) {
         const p = document.createElement("p");
         p.appendChild(document.createTextNode(`ADRs: ${histoDescrs['Adverse Reaction Reports']}`));

docs/batchCodeTable.html

@@ -34,6 +34,7 @@
   <script src="./BatchCodeSelectInitializer.js"></script>
   <script src="./HistoDescrsProvider.js"></script>
   <script src="./HistogramChartView.js"></script>
+  <script src="./AdverseReactionReportsChartView.js"></script>
   <script src="./BatchcodeCombinationSelection.js"></script>
   <script src="./HistogramView.js"></script>
   <script>