Nicer looking value selector

main.go

@@ -724,6 +724,13 @@ func pageDatapointValues(w http.ResponseWriter, r *http.Request, _ *session.T) {
 		return
 	}
 
+	// Apply an optionally set offset (in seconds).
+	var offsetTime int
+	offsetTimeStr := r.URL.Query().Get("offset-time")
+	offsetTime, err = strconv.Atoi(offsetTimeStr)
+	timeFrom = timeFrom.Add(time.Second * time.Duration(offsetTime))
+	timeTo = timeTo.Add(time.Second * time.Duration(offsetTime))
+
 	// Fetch data point values according to the times.
 	var values []DatapointValue
 	values, err = DatapointValues(id, timeFrom, timeTo)

static/css/default_light/datapoints.css

@@ -41,8 +41,15 @@
   grid-template-columns: repeat(2, min-content);
   gap: 16px;
   white-space: nowrap;
+  background-color: #2979b8;
+  padding: 16px 24px;
+  width: min-content;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  margin-top: 32px;
 }
 #values .header {
+  color: #000;
   font-weight: bold;
 }
 .widgets {
@@ -70,10 +77,30 @@
   grid-template-columns: min-content min-content;
   grid-gap: 8px;
 }
+.value-selector {
+  display: grid;
+  grid-template-columns: repeat(2, min-content);
+  grid-gap: 4px 16px;
+  margin-top: 16px;
+}
+.value-selector button {
+  width: 100px;
+  align-self: end;
+  justify-self: end;
+}
 .graph {
   width: 99%;
   border: 1px solid #aaa;
+  margin-top: 16px;
 }
 .graph #graph-values {
-  height: 600px;
+  height: calc(100vh - 308px);
+}
+.time-offset {
+  display: grid;
+  grid-template-columns: repeat(3, min-content);
+  gap: 6px 12px;
+  align-items: center;
+  justify-items: center;
+  margin-top: 8px;
 }

static/css/default_light/default_light.css

@@ -42,7 +42,8 @@ button:focus {
 }
 #datapoints,
 #problems-list,
-#acknowledged-list {
+#acknowledged-list,
+#values {
   background-color: #fff !important;
   border: 1px solid #ddd;
   box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);

static/css/gruvbox/datapoints.css

@@ -41,8 +41,15 @@
   grid-template-columns: repeat(2, min-content);
   gap: 16px;
   white-space: nowrap;
+  background-color: #333;
+  padding: 16px 24px;
+  width: min-content;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  margin-top: 32px;
 }
 #values .header {
+  color: #f7edd7;
   font-weight: bold;
 }
 .widgets {
@@ -70,10 +77,30 @@
   grid-template-columns: min-content min-content;
   grid-gap: 8px;
 }
+.value-selector {
+  display: grid;
+  grid-template-columns: repeat(2, min-content);
+  grid-gap: 4px 16px;
+  margin-top: 16px;
+}
+.value-selector button {
+  width: 100px;
+  align-self: end;
+  justify-self: end;
+}
 .graph {
   width: 99%;
   border: 1px solid #aaa;
+  margin-top: 16px;
 }
 .graph #graph-values {
-  height: 600px;
+  height: calc(100vh - 308px);
+}
+.time-offset {
+  display: grid;
+  grid-template-columns: repeat(3, min-content);
+  gap: 6px 12px;
+  align-items: center;
+  justify-items: center;
+  margin-top: 8px;
 }

static/css/gruvbox/default_light.css

@@ -42,7 +42,8 @@ button:focus {
 }
 #datapoints,
 #problems-list,
-#acknowledged-list {
+#acknowledged-list,
+#values {
   background-color: #fff !important;
   border: 1px solid #ddd;
   box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);

static/less/datapoints.less

@@ -51,8 +51,15 @@
 	grid-template-columns: repeat(2, min-content);
 	gap: 16px;
 	white-space: nowrap;
+	background-color: @bg3;
+	padding: 16px 24px;
+	width: min-content;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
+	margin-top: 32px;
 
 	.header {
+		color: @text2;
 		font-weight: bold;
 	}
 }
@@ -86,11 +93,35 @@
 	}
 }
 
+.value-selector {
+	display: grid;
+	grid-template-columns: repeat(2, min-content);
+	grid-gap: 4px 16px;
+
+	margin-top: 16px;
+
+	button {
+		width: 100px;
+		align-self: end;
+		justify-self: end;
+	}
+}
+
 .graph {
 	width: 99%;
 	border: 1px solid #aaa;
+	margin-top: 16px;
 
 	#graph-values {
-		height: 600px;
+		height: calc(100vh - 308px);
 	}
 }
+
+.time-offset {
+	display: grid;
+	grid-template-columns: repeat(3, min-content);
+	gap: 6px 12px;
+	align-items: center;
+	justify-items: center;
+	margin-top: 8px;
+}

static/less/default_light.less

@@ -58,7 +58,7 @@ button {
 	}
 }
 
-#datapoints, #problems-list, #acknowledged-list {
+#datapoints, #problems-list, #acknowledged-list, #values {
 	background-color: #fff !important;
 	border: 1px solid #ddd;
 	box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.25);

views/pages/datapoint_values.gotmpl

@@ -2,11 +2,13 @@
 	{{ $version := .VERSION }}
 	{{ $graph := and (eq .Data.Display "graph") (eq .Data.Datapoint.Datatype "INT") }}
 	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/datapoints.css">
+	<script src="/js/{{ .VERSION }}/datapoint_values.js"></script>
 	<script src="/js/{{ .VERSION }}/lib/plotly-2.32.0.min.js" charset="utf-8"></script>
 
 	{{ block "page_label" . }}{{end}}
 
-	<form action="/datapoint/values/{{ .Data.Datapoint.ID }}" method="get">
+	<form action="/datapoint/values/{{ .Data.Datapoint.ID }}" method="get" style="margin-top: -16px">
+		<input type="hidden" name="offset-time" id="offset-time" value=0>
 
 		{{ if eq .Data.Datapoint.Datatype "INT" }}
 		<div>
@@ -15,12 +17,30 @@
 		</div>
 		{{ end }}
 
+		<div class="value-selector">
+			<div>Values from</div>
+			<div>Values to</div>
+
 			<input name="f" type="datetime-local" step="1" value="{{ .Data.TimeFrom }}">
 			<input name="t" type="datetime-local" step="1" value="{{ .Data.TimeTo }}">
+
+			<div class="time-offset">
+				<div><a href="#" onclick="offsetTime(-3600)">◀</a></div>
+				<div>Hour</div>
+				<div><a href="#" onclick="offsetTime(3600)">▶</a></div>
+
+				<div><a href="#" onclick="offsetTime(-86400)">◀</a></div>
+				<div>Day</div>
+				<div><a href="#" onclick="offsetTime(86400)">▶</a></div>
+
+				<div><a href="#" onclick="offsetTime(-604800)">◀</a></div>
+				<div>Week</div>
+				<div><a href="#" onclick="offsetTime(604800)">▶</a></div>
+			</div>
 			<button>OK</button>
+		</div>
 
 	</form>
-	<br><br>
 
 	{{ if $graph }}
 	<div class="graph">