diff --git a/docs/BatchCodeDetailsView.js b/docs/BatchCodeDetailsView.js
index 4cebe9260f5..220378c4209 100644
--- a/docs/BatchCodeDetailsView.js
+++ b/docs/BatchCodeDetailsView.js
@@ -2,14 +2,13 @@ class BatchCodeDetailsView {
#uiContainer;
#adverseReactionReportsChartView;
- #histogramChartView;
- #chartWithSlider;
+ #histogramTable;
constructor(uiContainer) {
this.#uiContainer = uiContainer
this.#adverseReactionReportsChartView = new AdverseReactionReportsChartView(this.#uiContainer.querySelector('#adverseReactionReportsChartView'));
- this.#chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
- this.#histogramChartView = new HistogramChartView(this.#chartWithSlider.querySelector("canvas"));
+ this.#histogramTable = new HistogramTable($('#histogramTable'));
+ this.#histogramTable.initialize();
}
displayBatchCodeDetails(batchcode) {
@@ -30,59 +29,7 @@ class BatchCodeDetailsView {
}
#displayHistogramViewForHistoDescrs(histoDescrs) {
- this.#displayAdverseReactionReportsChart(histoDescrs);
- this.#displayHistogram(histoDescrs);
- }
-
- #displayAdverseReactionReportsChart(histoDescrs) {
this.#adverseReactionReportsChartView.displayChart(histoDescrs);
- }
-
- #displayHistogram(histoDescr) {
- this.#histogramChartView.displayChart(histoDescr);
- this.#createSlider(
- {
- sliderElement: this.#chartWithSlider.querySelector(".slider"),
- range: {
- min: 0,
- max: Object.keys(histoDescr.histogram).length
- },
- orientation: 'vertical',
- height: this.#chartWithSlider.querySelector("canvas").style.height,
- onUpdate: range => this.#histogramChartView.setData(this.#slice(histoDescr, range))
- });
- }
-
- #slice(histoDescr, { start, endInclusive }) {
- return {
- batchcode: histoDescr.batchcode,
- histogram: Utils.sliceDict(histoDescr.histogram, start, endInclusive + 1)
- };
- }
-
- #createSlider({ sliderElement, range, orientation, height = null, onUpdate }) {
- if ('noUiSlider' in sliderElement) {
- sliderElement.noUiSlider.destroy();
- }
- noUiSlider.create(
- sliderElement,
- {
- start: [range.min, range.max],
- connect: true,
- range: range,
- step: 1,
- orientation: orientation
- });
- sliderElement.noUiSlider.on(
- 'update',
- ([start, endInclusive]) =>
- onUpdate(
- {
- start: parseInt(start, 10),
- endInclusive: parseInt(endInclusive, 10)
- }));
- if (height != null) {
- sliderElement.style.height = height;
- }
+ this.#histogramTable.display(histoDescrs.histogram);
}
}
diff --git a/docs/HistogramChartView.js b/docs/HistogramChartView.js
deleted file mode 100644
index f60d634ab1d..00000000000
--- a/docs/HistogramChartView.js
+++ /dev/null
@@ -1,64 +0,0 @@
-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(histoDescr) {
- const data = this.#getData(histoDescr);
- this.#chart.config.data = data;
- this.#chart.update();
- }
-
- #getData(histoDescr) {
- const { 'keys': symptoms, 'values': frequencies } = Utils.getKeysAlignedWithValues(histoDescr.histogram);
- return {
- labels: symptoms,
- datasets: [{
- label: 'Batch ' + histoDescr.batchcode,
- data: frequencies,
- backgroundColor: '#1a73e8'
- }]
- };
- }
-
- #getOptions() {
- return {
- indexAxis: 'y',
- responsive: true,
- scales: {
- y: {
- title: {
- display: true,
- text: 'Symptom'
- }
- },
- x: {
- ticks: {
- precision: 0
- },
- title: {
- display: true,
- text: 'Frequency'
- }
- }
- }
- };
- }
-}
\ No newline at end of file
diff --git a/docs/HistogramTable.js b/docs/HistogramTable.js
new file mode 100644
index 00000000000..391b9ddd174
--- /dev/null
+++ b/docs/HistogramTable.js
@@ -0,0 +1,60 @@
+class HistogramTable {
+
+ #tableElement;
+ #table;
+
+ constructor(tableElement) {
+ this.#tableElement = tableElement;
+ }
+
+ initialize() {
+ this.#table = this.#createEmptyTable();
+ }
+
+ display(frequencyBySymptom) {
+ const symptom_frequency_arrays = Object.entries(frequencyBySymptom);
+ this.#setTableRows(symptom_frequency_arrays);
+ }
+
+ #createEmptyTable() {
+ return this.#tableElement.DataTable(
+ {
+ language:
+ {
+ searchPlaceholder: "Enter Symptom"
+ },
+ search:
+ {
+ return: false
+ },
+ processing: true,
+ deferRender: true,
+ order: [[this.#getColumnIndex('Frequency'), "desc"]],
+ columnDefs:
+ [
+ {
+ searchable: true,
+ targets: [
+ this.#getColumnIndex('Symptom')
+ ]
+ },
+ ]
+ });
+ }
+
+ #getColumnIndex(columnName) {
+ switch (columnName) {
+ case 'Symptom':
+ return 0;
+ case 'Frequency':
+ return 1;
+ }
+ }
+
+ #setTableRows(rows) {
+ this.#table
+ .clear()
+ .rows.add(rows)
+ .draw();
+ }
+}
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index cefdb0a9f50..a87b8b9eb58 100644
--- a/docs/batchCodeTable.html
+++ b/docs/batchCodeTable.html
@@ -20,24 +20,18 @@
-->
+
-
-
-
+
+
+
+