smon/static/js/datapoint_values.js

function selectDisplay(display) {
	const inputDisplay = document.getElementById('input-display')
	inputDisplay.value = display
	inputDisplay.form.submit()
}

class Graph {
	constructor(datapointID, initialData) {
		this.dataset = new Dataset(datapointID, initialData)

		this.createGraph()
	}

	async createGraph() {
		this.graphValues = document.getElementById('graph-values');

		const values = [{
			x: this.dataset.xValues(),
			y: this.dataset.yValues(),
			mode: 'scatter',
		}]

		this.layout = {
			margin: {
				t: 24,
				r: 0,
			},
		}

		this.config = {
			displayModeBar: true,
		}

		Plotly.react(this.graphValues, values, this.layout, this.config);
		this.graphValues.on('plotly_relayout', attr => this.relayoutHandler(attr))
	}

	async relayoutHandler(attr) {
		if (!attr.hasOwnProperty('xaxis.range[0]') || !attr.hasOwnProperty('xaxis.range[1]'))
			return

		this.dataset.extend(attr['xaxis.range[0]'], attr['xaxis.range[1]'])
			.then(() => {
				const values = [{
					x: this.dataset.xValues(),
					y: this.dataset.yValues(),
					mode: 'scatter',
				}]
				Plotly.react(this.graphValues, values, this.layout)
			})
	}
}

class Dataset {
	constructor(id, initialData) {
		this.datapointID = id
		this.values = {}
		if (initialData === null)
			return
		initialData.forEach(v => this.values[v.ID] = v)
	}

	xValues() {
		return Object.keys(this.values).map(dpID => this.values[dpID].Ts)
	}

	yValues() {
		return Object.keys(this.values).map(dpID => this.values[dpID].ValueInt.Int64)
	}

	async extend(from, to) {
		return fetch(`/datapoint/json/${this.datapointID}?f=${from}&t=${to}`)
			.then(data => data.json())
			.then(datapointValues => {
				datapointValues.forEach(dp => {
					this.values[dp.ID] = dp
				})
				document.getElementById('num-values').innerText = Object.keys(this.values).length
			})
	}
}