83 lines
2.7 KiB
JavaScript
83 lines
2.7 KiB
JavaScript
class HistogramView {
|
|
|
|
#uiContainer;
|
|
|
|
constructor(uiContainer) {
|
|
this.#uiContainer = uiContainer
|
|
}
|
|
|
|
displayHistogramsForBatchcode(batchcode) {
|
|
this
|
|
.#loadHistoDescrsForBatchcode(batchcode)
|
|
.then(histoDescrs => this.#displayHistograms(histoDescrs));
|
|
}
|
|
|
|
#loadHistoDescrsForBatchcode(batchcode) {
|
|
const loadingText = document.createTextNode('Loading...');
|
|
this.#uiContainer.appendChild(loadingText);
|
|
return fetch(`data/histograms/${batchcode}.json`)
|
|
.then(response => {
|
|
loadingText.remove();
|
|
return response.json();
|
|
})
|
|
}
|
|
|
|
#displayHistograms(histoDescrs) {
|
|
this.#uiContainer.appendChild(document.createTextNode(histoDescrs.batchcode));
|
|
for (const histoDescr of histoDescrs.histograms) {
|
|
this.#displayHistogram(histoDescr);
|
|
}
|
|
}
|
|
|
|
#displayHistogram(histoDescr) {
|
|
const chartWithSlider = UIUtils.instantiateTemplate('template-chartWithSlider');
|
|
this.#uiContainer.appendChild(chartWithSlider);
|
|
const canvas = chartWithSlider.querySelector("canvas");
|
|
const histogramChartView = new HistogramChartView(canvas);
|
|
histogramChartView.displayChart(histoDescr);
|
|
this.#createSlider(
|
|
{
|
|
sliderElement: chartWithSlider.querySelector(".slider"),
|
|
range: {
|
|
min: 0,
|
|
max: Object.keys(histoDescr.histogram).length
|
|
},
|
|
orientation: 'vertical',
|
|
height: canvas.style.height,
|
|
onUpdate: range => histogramChartView.setData(this.#slice(histoDescr, range))
|
|
});
|
|
}
|
|
|
|
#slice(histoDescr, { start, endInclusive }) {
|
|
return {
|
|
batchcodes: histoDescr.batchcodes,
|
|
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;
|
|
}
|
|
}
|
|
} |