removing batchCodesSelect

This commit is contained in:
frankknoll
2023-04-16 14:34:53 +02:00
parent fef2957d60
commit 8031277b31
6 changed files with 5 additions and 67 deletions

View File

@@ -2,7 +2,6 @@ class BatchCodeDetailsView {
#uiContainer; #uiContainer;
#headingElement; #headingElement;
#batchCodesSelectElement;
#adverseReactionReportsChartView; #adverseReactionReportsChartView;
#histogramChartView; #histogramChartView;
#chartWithSlider; #chartWithSlider;
@@ -10,7 +9,6 @@ class BatchCodeDetailsView {
constructor(uiContainer) { constructor(uiContainer) {
this.#uiContainer = uiContainer this.#uiContainer = uiContainer
this.#headingElement = this.#uiContainer.querySelector(".heading"); this.#headingElement = this.#uiContainer.querySelector(".heading");
this.#batchCodesSelectElement = new ElementWithSingleChangeEventListener(this.#uiContainer.querySelector("#batchCodesSelect"));
this.#adverseReactionReportsChartView = new AdverseReactionReportsChartView(this.#uiContainer.querySelector('#adverseReactionReportsChartView')); this.#adverseReactionReportsChartView = new AdverseReactionReportsChartView(this.#uiContainer.querySelector('#adverseReactionReportsChartView'));
this.#chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider'); this.#chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
this.#histogramChartView = new HistogramChartView(this.#chartWithSlider.querySelector("canvas")); this.#histogramChartView = new HistogramChartView(this.#chartWithSlider.querySelector("canvas"));
@@ -36,8 +34,7 @@ class BatchCodeDetailsView {
#displayHistogramViewForHistoDescrs(histoDescrs) { #displayHistogramViewForHistoDescrs(histoDescrs) {
this.#displayHeading(histoDescrs.batchcode, histoDescrs['Company']); this.#displayHeading(histoDescrs.batchcode, histoDescrs['Company']);
this.#displayAdverseReactionReportsChart(histoDescrs); this.#displayAdverseReactionReportsChart(histoDescrs);
this.#displaySelectBatchcodeCombination(histoDescrs.histograms); this.#displayHistogram(histoDescrs);
this.#displayHistogram(histoDescrs.histograms[0]);
} }
#displayHeading(batchcode, company) { #displayHeading(batchcode, company) {
@@ -54,15 +51,6 @@ class BatchCodeDetailsView {
}); });
} }
#displaySelectBatchcodeCombination(histograms) {
BatchcodeCombinationSelection.configureSelectBatchcodeCombinationElement(
{
batchCodesSelectElement: this.#batchCodesSelectElement,
histograms: histograms,
onSelect: histoDescr => this.#displayHistogram(histoDescr)
});
}
#displayHistogram(histoDescr) { #displayHistogram(histoDescr) {
this.#histogramChartView.displayChart(histoDescr); this.#histogramChartView.displayChart(histoDescr);
this.#createSlider( this.#createSlider(
@@ -80,7 +68,7 @@ class BatchCodeDetailsView {
#slice(histoDescr, { start, endInclusive }) { #slice(histoDescr, { start, endInclusive }) {
return { return {
batchcodes: histoDescr.batchcodes, batchcode: histoDescr.batchcode,
histogram: Utils.sliceDict(histoDescr.histogram, start, endInclusive + 1) histogram: Utils.sliceDict(histoDescr.histogram, start, endInclusive + 1)
}; };
} }

View File

@@ -1,28 +0,0 @@
class BatchcodeCombinationSelection {
static configureSelectBatchcodeCombinationElement({ batchCodesSelectElement, histograms, onSelect }) {
this.#setBatchcodeCombinationOptions(batchCodesSelectElement.element, histograms);
batchCodesSelectElement.setSingleChangeEventListener(
event => {
const histoDescr = histograms[event.target.value];
onSelect(histoDescr);
});
onSelect(histograms[0]);
}
static #setBatchcodeCombinationOptions(batchCodesSelectElement, histograms) {
UIUtils.clear(batchCodesSelectElement);
this.#getBatchcodeCombinationOptions(histograms).forEach(option => batchCodesSelectElement.add(option));
}
static #getBatchcodeCombinationOptions(histograms) {
return histograms.map(this.#getBatchcodeCombinationOption);
}
static #getBatchcodeCombinationOption(histoDescr, index) {
const option = document.createElement("option");
option.text = histoDescr.batchcodes.join(', ');
option.value = index;
return option;
}
}

View File

@@ -1,18 +0,0 @@
class ElementWithSingleChangeEventListener {
element;
#changeEventListenerOfElement;
constructor(element) {
this.element = element;
}
setSingleChangeEventListener(singleChangeEventListener) {
const eventType = 'change';
if (this.#changeEventListenerOfElement !== undefined) {
this.element.removeEventListener(eventType, this.#changeEventListenerOfElement);
}
this.element.addEventListener(eventType, singleChangeEventListener);
this.#changeEventListenerOfElement = singleChangeEventListener;
}
}

View File

@@ -5,6 +5,8 @@ class HistoDescrsProvider {
.then(response => response.json()) .then(response => response.json())
.then(histoDescrs => { .then(histoDescrs => {
histoDescrs.histograms.sort((histoDescr1, histoDescr2) => histoDescr1.batchcodes.length - histoDescr2.batchcodes.length); histoDescrs.histograms.sort((histoDescr1, histoDescr2) => histoDescr1.batchcodes.length - histoDescr2.batchcodes.length);
histoDescrs.histogram = histoDescrs.histograms[0].histogram;
delete histoDescrs.histograms;
return histoDescrs; return histoDescrs;
}); });
} }

View File

@@ -31,7 +31,7 @@ class HistogramChartView {
return { return {
labels: symptoms, labels: symptoms,
datasets: [{ datasets: [{
label: histoDescr.batchcodes.join(', '), label: histoDescr.batchcode,
data: frequencies data: frequencies
}] }]
}; };

View File

@@ -30,13 +30,11 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
<script src="./Utils.js"></script> <script src="./Utils.js"></script>
<script src="./UIUtils.js"></script> <script src="./UIUtils.js"></script>
<script src="./ElementWithSingleChangeEventListener.js"></script>
<script src="./GoogleAnalytics.js"></script> <script src="./GoogleAnalytics.js"></script>
<script src="./BatchCodeSelectInitializer.js"></script> <script src="./BatchCodeSelectInitializer.js"></script>
<script src="./HistoDescrsProvider.js"></script> <script src="./HistoDescrsProvider.js"></script>
<script src="./HistogramChartView.js"></script> <script src="./HistogramChartView.js"></script>
<script src="./AdverseReactionReportsChartView.js"></script> <script src="./AdverseReactionReportsChartView.js"></script>
<script src="./BatchcodeCombinationSelection.js"></script>
<script src="./BatchCodeDetailsView.js"></script> <script src="./BatchCodeDetailsView.js"></script>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
@@ -49767,10 +49765,6 @@
<h3 class="heading"></h3> <h3 class="heading"></h3>
<canvas id="adverseReactionReportsChartView"></canvas> <canvas id="adverseReactionReportsChartView"></canvas>
<div id="selectBatchcodeCombination"> <div id="selectBatchcodeCombination">
<label>Select batchcode combination:
<select id="batchCodesSelect" name="batchcodes">
</select>
</label>
<div class="chartWithSlider"> <div class="chartWithSlider">
<div class="chartContainer"> <div class="chartContainer">
<canvas class="canvas"></canvas> <canvas class="canvas"></canvas>