Basic graph for INT values

main.go

@@ -699,6 +699,7 @@ func pageDatapointValues(w http.ResponseWriter, r *http.Request, _ *session.T) {
 	page.Data = map[string]any{
 		"Datapoint": datapoint,
 		"Values":    values,
+		"Display":   r.URL.Query().Get("display"),
 	}
 	page.Render(w)
 	return

static/css/default_light/datapoints.css

@@ -67,3 +67,7 @@
   grid-template-columns: min-content min-content;
   grid-gap: 8px;
 }
+.graph {
+  height: 600px;
+  border: 1px solid #fff;
+}

static/css/gruvbox/datapoints.css

@@ -67,3 +67,7 @@
   grid-template-columns: min-content min-content;
   grid-gap: 8px;
 }
+.graph {
+  height: 600px;
+  border: 1px solid #fff;
+}

static/less/datapoints.less

@@ -81,3 +81,8 @@
 		grid-gap: 8px;
 	}
 }
+
+.graph {
+	height: 600px;
+	border: 1px solid #fff;
+}

views/pages/datapoint_values.gotmpl

@@ -1,13 +1,35 @@
 {{ define "page" }}
 	{{ $version := .VERSION }}
 	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/datapoints.css">
+	<script src="/js/{{ .VERSION }}/lib/plotly-2.32.0.min.js" charset="utf-8"></script>
 
 	{{ block "page_label" . }}{{end}}
 
+	{{ if eq .Data.Display "list" }}
 	<div id="values">
 		{{ range .Data.Values }}
 		<div class="value">{{ format_time .Ts }}</div>
 		<div class="value">{{ .Value }}</div>
 		{{ end }}
 	</div>
+	{{ else }}
+	<div class="graph" id="tester"></div>
+	<script type="text/javascript">
+		const tester = document.getElementById('tester');
+		let data = {{ .Data }}
+		let x = data.Values.map(d => d.Ts)
+		let y = data.Values.map(d => d.ValueInt.Int64)
+		Plotly.newPlot(
+			tester,
+			[
+				{
+					x,
+					y,
+				},
+			], {
+				margin: { t: 0 },
+			}
+		);
+	</script>
+	{{ end }}
 {{ end }}