From 8eb6f8ff9bd3d102f22194dd0507188c074bc235 Mon Sep 17 00:00:00 2001 From: frankknoll Date: Tue, 18 Apr 2023 11:14:11 +0200 Subject: [PATCH] displaying "Frequencies of Reported Symptoms" as a table --- docs/BatchCodeDetailsView.js | 61 +++------------------------------- docs/HistogramChartView.js | 64 ------------------------------------ docs/HistogramTable.js | 60 +++++++++++++++++++++++++++++++++ docs/batchCodeTable.html | 30 ++++++++--------- 4 files changed, 78 insertions(+), 137 deletions(-) delete mode 100644 docs/HistogramChartView.js create mode 100644 docs/HistogramTable.js 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 @@ --> + - - - + + + +