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 @@ +