refactoring

This commit is contained in:
frankknoll
2023-04-15 21:31:36 +02:00
parent 4e034bd42f
commit 2cb9b4256b
3 changed files with 11 additions and 12 deletions

View File

@@ -1,9 +1,14 @@
class BatchCodeDetailsView { class BatchCodeDetailsView {
#uiContainer; #uiContainer;
#adverseReactionReportsChartView;
#histogramChartView;
constructor(uiContainer) { constructor(uiContainer) {
this.#uiContainer = uiContainer this.#uiContainer = uiContainer
this.#adverseReactionReportsChartView = new AdverseReactionReportsChartView(this.#uiContainer.querySelector('#adverseReactionReportsChartView'));
const chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
this.#histogramChartView = new HistogramChartView(chartWithSlider.querySelector("canvas"));
} }
// FK-TODO: unbind all events here and in HistogramChartView // FK-TODO: unbind all events here and in HistogramChartView
@@ -28,10 +33,9 @@ class BatchCodeDetailsView {
this.#displayHeading(histoDescrs.batchcode); this.#displayHeading(histoDescrs.batchcode);
this.#displayData(histoDescrs); this.#displayData(histoDescrs);
const chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider'); const chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
const histogramChartView = new HistogramChartView(chartWithSlider.querySelector("canvas"));
this.#displayAdverseReactionReportsChart(histoDescrs); this.#displayAdverseReactionReportsChart(histoDescrs);
this.#displaySelectBatchcodeCombination(histoDescrs.histograms, histogramChartView, chartWithSlider); this.#displaySelectBatchcodeCombination(histoDescrs.histograms, this.#histogramChartView, chartWithSlider);
this.#displayHistogram(histoDescrs.histograms[0], histogramChartView, chartWithSlider); this.#displayHistogram(histoDescrs.histograms[0], this.#histogramChartView, chartWithSlider);
} }
#displayHeading(batchcode) { #displayHeading(batchcode) {
@@ -41,10 +45,7 @@ class BatchCodeDetailsView {
} }
#displayAdverseReactionReportsChart(histoDescrs) { #displayAdverseReactionReportsChart(histoDescrs) {
const canvas = UIUtils.instantiateTemplate('template-canvas'); this.#adverseReactionReportsChartView.displayChart(
this.#uiContainer.appendChild(canvas);
const adverseReactionReportsChartView = new AdverseReactionReportsChartView(canvas);
adverseReactionReportsChartView.displayChart(
{ {
'Adverse Reaction Reports': histoDescrs['Adverse Reaction Reports'], 'Adverse Reaction Reports': histoDescrs['Adverse Reaction Reports'],
'Deaths': histoDescrs['Deaths'], 'Deaths': histoDescrs['Deaths'],
@@ -73,7 +74,6 @@ class BatchCodeDetailsView {
histograms: histograms, histograms: histograms,
onSelect: histoDescr => this.#displayHistogram(histoDescr, histogramChartView, chartWithSlider) onSelect: histoDescr => this.#displayHistogram(histoDescr, histogramChartView, chartWithSlider)
}); });
this.#uiContainer.appendChild(selectBatchcodeCombinationElement);
} }
#displayHistogram(histoDescr, histogramChartView, chartWithSlider) { #displayHistogram(histoDescr, histogramChartView, chartWithSlider) {

View File

@@ -1,12 +1,13 @@
class BatchCodeSelectInitializer { class BatchCodeSelectInitializer {
static initialize({batchCodeSelectElement, batchCodeDetailsElement}) { static initialize({batchCodeSelectElement, batchCodeDetailsElement}) {
const batchCodeDetailsView = new BatchCodeDetailsView(batchCodeDetailsElement);
batchCodeSelectElement.select2({ minimumInputLength: 4 }); batchCodeSelectElement.select2({ minimumInputLength: 4 });
batchCodeSelectElement.on( batchCodeSelectElement.on(
'select2:select', 'select2:select',
function (event) { function (event) {
const batchcode = event.params.data.id; const batchcode = event.params.data.id;
new BatchCodeDetailsView(batchCodeDetailsElement).displayBatchCodeDetails(batchcode); batchCodeDetailsView.displayBatchCodeDetails(batchcode);
GoogleAnalytics.click_batchcode(batchcode); GoogleAnalytics.click_batchcode(batchcode);
}); });
batchCodeSelectElement.select2('open'); batchCodeSelectElement.select2('open');

View File

@@ -49764,6 +49764,7 @@
</p> </p>
<div id="batchCodeDetails" style="width: 50%"> <div id="batchCodeDetails" style="width: 50%">
<div id="selectBatchcodeCombination"> <div id="selectBatchcodeCombination">
<canvas id="adverseReactionReportsChartView"></canvas>
<label>Select batchcode combination: <label>Select batchcode combination:
<select id="batchcodesSelect" name="batchcodes"> <select id="batchcodesSelect" name="batchcodes">
</select> </select>
@@ -49785,9 +49786,6 @@
<p> <p>
<span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span> <span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span>
</p> </p>
<template id="template-canvas">
<canvas></canvas>
</template>
</body> </body>
</html> </html>