francois/HowBadIsMyBatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
frankknoll
2023-01-30 20:38:35 +01:00
parent 1501958fbd
commit 2c163857ad
1 changed files with 12 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/HistogramView.js
View File

@@ -1,8 +1,6 @@
class HistogramView { class HistogramView {
#uiContainer; #uiContainer;
#chartWithSlider;
#histogramChartView;
constructor(uiContainer) { constructor(uiContainer) {
this.#uiContainer = uiContainer this.#uiContainer = uiContainer
@@ -25,18 +23,14 @@ class HistogramView {
} }
#displayHistogramViewForHistoDescrs(histoDescrs) { #displayHistogramViewForHistoDescrs(histoDescrs) {
this.#displaySelectBatchcodeCombination(histoDescrs.histograms); const chartWithSlider = UIUtils.instantiateTemplate('template-chartWithSlider');
this.#chartWithSlider = UIUtils.instantiateTemplate('template-chartWithSlider'); const histogramChartView = new HistogramChartView(chartWithSlider.querySelector("canvas"));
this.#uiContainer.appendChild(this.#chartWithSlider); this.#displaySelectBatchcodeCombination(histoDescrs.histograms, histogramChartView, chartWithSlider);
this.#histogramChartView = new HistogramChartView(this.#getCanvas()); this.#uiContainer.appendChild(chartWithSlider);
this.#displayHistogram(histoDescrs.histograms[0]); this.#displayHistogram(histoDescrs.histograms[0], histogramChartView, chartWithSlider);
} }
#getCanvas() { #displaySelectBatchcodeCombination(histograms, histogramChartView, chartWithSlider) {
return this.#chartWithSlider.querySelector("canvas");
}
#displaySelectBatchcodeCombination(histograms) {
const selectBatchcodeCombination = UIUtils.instantiateTemplate('template-selectBatchcodeCombination'); const selectBatchcodeCombination = UIUtils.instantiateTemplate('template-selectBatchcodeCombination');
const batchcodesSelect = selectBatchcodeCombination.querySelector('#batchcodesSelect'); const batchcodesSelect = selectBatchcodeCombination.querySelector('#batchcodesSelect');
this.#addBatchcodeCombinationOptions(batchcodesSelect, histograms); this.#addBatchcodeCombinationOptions(batchcodesSelect, histograms);
@@ -44,7 +38,7 @@ class HistogramView {
'change', 'change',
event => { event => {
const histoDescr = histograms[event.target.value]; const histoDescr = histograms[event.target.value];
this.#displayHistogram(histoDescr); this.#displayHistogram(histoDescr, histogramChartView, chartWithSlider);
}); });
this.#uiContainer.appendChild(selectBatchcodeCombination); this.#uiContainer.appendChild(selectBatchcodeCombination);
} }
@@ -65,18 +59,18 @@ class HistogramView {
return option; return option;
} }
#displayHistogram(histoDescr) { #displayHistogram(histoDescr, histogramChartView, chartWithSlider) {
this.#histogramChartView.displayChart(histoDescr); histogramChartView.displayChart(histoDescr);
this.#createSlider( this.#createSlider(
{ {
sliderElement: this.#chartWithSlider.querySelector(".slider"), sliderElement: chartWithSlider.querySelector(".slider"),
range: { range: {
min: 0, min: 0,
max: Object.keys(histoDescr.histogram).length max: Object.keys(histoDescr.histogram).length
}, },
orientation: 'vertical', orientation: 'vertical',
height: this.#getCanvas().style.height, height: chartWithSlider.querySelector("canvas").style.height,
onUpdate: range => this.#histogramChartView.setData(this.#slice(histoDescr, range)) onUpdate: range => histogramChartView.setData(this.#slice(histoDescr, range))
}); });
} }