Better interactive graph support.

views/pages/datapoint_values.gotmpl

@@ -7,6 +7,7 @@
 	{{ block "page_label" . }}{{end}}
 
 	<form action="/datapoint/values/{{ .Data.Datapoint.ID }}" method="get">
+
 		{{ if eq .Data.Datapoint.Datatype "INT" }}
 		<div>
 			<input name="display" value="graph" type="radio" id="display-graph" {{ if $graph }} checked {{ end}}> <label for="display-graph">Graph</label>
@@ -17,6 +18,7 @@
 		<input name="f" type="datetime-local" step="1" value="{{ .Data.TimeFrom }}">
 		<input name="t" type="datetime-local" step="1" value="{{ .Data.TimeTo }}">
 		<button>OK</button>
+
 	</form>
 	<br><br>
 
@@ -24,22 +26,17 @@
 	<div class="graph">
 		<div id="graph-values"></div>
 	</div>
+
+	<div style="margin-top: 8px;">
+		<b>Number of values:</b>
+		<span id="num-values">{{ len .Data.Values }}</span>
+	</div>
 	<script type="text/javascript">
-		const graphValues = document.getElementById('graph-values');
-		let data = {{ .Data }}
-		let x = data.Values.map(d => d.Ts)
-		let y = data.Values.map(d => d.ValueInt.Int64)
-		Plotly.newPlot(
-			graphValues,
-			[
-				{
-					x,
-					y,
-				},
-			], {
-				margin: { t: 0 },
-			}
-		);
+		new Graph(
+			{{ .Data.Datapoint.ID }},
+			{{ .Data.Values }},
+		)
+
 	</script>
 	{{ else }}
 	<div id="values">
@@ -48,7 +45,7 @@
 		<div class="line"></div>
 		{{ range .Data.Values }}
 		<div class="value">{{ format_time .Ts }}</div>
-		<div class="value">{{ format_time .Value }}</div>
+		<div class="value">{{ .Value }}</div>
 		{{ end }}
 	</div>
 	{{ end }}