Better interactive graph support.

static/js/datapoint_values.js

@@ -0,0 +1,73 @@
+function offsetTime(seconds) {
+	const el = document.getElementById('offset-time')
+	el.value = seconds
+	el.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(),
+		}]
+
+		this.layout = {
+			margin: {
+				t: 24,
+				r: 0,
+			},
+		}
+
+		Plotly.react(this.graphValues, values, this.layout);
+		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(),
+				}]
+				Plotly.react(this.graphValues, values, this.layout)
+			})
+	}
+}
+
+class Dataset {
+	constructor(id, initialData) {
+		this.datapointID = id
+		this.values = {}
+		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
+			})
+	}
+}