diff --git a/docs/AdverseReactionReportsChartView.js b/docs/AdverseReactionReportsChartView.js
new file mode 100644
index 00000000000..740731a1ca8
--- /dev/null
+++ b/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'
+ }
+ };
+ }
+}
\ No newline at end of file
diff --git a/docs/HistogramView.js b/docs/HistogramView.js
index 49c18dcb531..fc4813ef92e 100644
--- a/docs/HistogramView.js
+++ b/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']}`));
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index 29c9ebf1e33..0be3cf7e65b 100644
--- a/docs/batchCodeTable.html
+++ b/docs/batchCodeTable.html
@@ -34,6 +34,7 @@
+