Add showtime state to errors history graphs

Periods where the line was not in showtime state are marked with a red background. Invalid periods are still determined based on the actual data instead of using the Valid flag of the showtime state. This way the graph is still marked gray if no data is available despite showtime state (for example for retransmission counters when G.INP is not in use).
janh · Sep 22, 2023 · 2cbf152 · 2cbf152
1 parent 12645a7
commit 2cbf152
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 28 deletions.
diff --git a/graphs/errors.go b/graphs/errors.go
@@ -149,42 +149,60 @@ func buildErrorsPath(p *path, data []models.IntValue, scaleY, maxY, postScaleY f
 	}
 }
 
-func buildErrorsStatePath(p *path, items []errorsGraphItem) {
+func buildErrorsStatePath(pathInvalid, pathNoShowtime *path, showtimeData []models.BoolValue, items []errorsGraphItem) {
 	var lastValid bool = true
+	var lastNoShowtime bool = false
 
-	count := -1
+	count := len(showtimeData)
 	for _, item := range items {
-		if count < 0 || len(item.data) < count {
+		if len(item.data) < count {
 			count = len(item.data)
 		}
 	}
 
 	for i := 0; i < count; i++ {
+		noShowtime := showtimeData[i].Valid && !showtimeData[i].Bool
+
 		valid := false
 		for _, item := range items {
 			if item.data[i].Valid {
 				valid = true
 			}
 		}
+		valid = valid || noShowtime
 
 		posX := float64(i)
 
+		if !lastNoShowtime && noShowtime {
+			pathNoShowtime.MoveTo(posX, 0)
+			pathNoShowtime.LineTo(posX, 1)
+		} else if lastNoShowtime && !noShowtime {
+			pathNoShowtime.LineTo(posX, 1)
+			pathNoShowtime.LineTo(posX, 0)
+			pathNoShowtime.Close()
+		}
+
 		if lastValid && !valid {
-			p.MoveTo(posX, 0)
-			p.LineTo(posX, 1)
+			pathInvalid.MoveTo(posX, 0)
+			pathInvalid.LineTo(posX, 1)
 		} else if !lastValid && valid {
-			p.LineTo(posX, 1)
-			p.LineTo(posX, 0)
-			p.Close()
+			pathInvalid.LineTo(posX, 1)
+			pathInvalid.LineTo(posX, 0)
+			pathInvalid.Close()
 		}
 
 		lastValid = valid
+		lastNoShowtime = noShowtime
 	}
 
-	if !lastValid {
-		p.LineTo(float64(count), 1)
-		p.LineTo(float64(count), 0)
-		p.Close()
+	if lastNoShowtime {
+		pathNoShowtime.LineTo(float64(count), 1)
+		pathNoShowtime.LineTo(float64(count), 0)
+		pathNoShowtime.Close()
+	} else if !lastValid {
+		pathInvalid.LineTo(float64(count), 1)
+		pathInvalid.LineTo(float64(count), 0)
+		pathInvalid.Close()
 	}
 }
 
@@ -248,9 +266,13 @@ func drawErrorsGraph(out io.Writer, data models.ErrorsHistory, params GraphParam
 	pathStateInvalid.Color = m.ColorNeutralFill
 	pathStateInvalid.Color.A = 0.15
 
-	buildErrorsStatePath(&pathStateInvalid.Path, items)
+	pathStateNoShowtime := coloredPath{}
+	pathStateNoShowtime.Color = colorRed
+	pathStateNoShowtime.Color.A = 0.3
+
+	buildErrorsStatePath(&pathStateInvalid.Path, &pathStateNoShowtime.Path, data.Showtime, items)
 
-	m.PathsState = []coloredPath{pathStateInvalid}
+	m.PathsState = []coloredPath{pathStateInvalid, pathStateNoShowtime}
 
 	// scaling of y by scaleX in order to simulate vector-effect="non-scaling-stroke" for non-supporting renderers
 	m.Transform.Translate(x, y+h)

diff --git a/graphs/javascript/graphs.js b/graphs/javascript/graphs.js
@@ -1854,42 +1854,60 @@ var DSLGraphs = DSLGraphs || (function () {
 	}
 
 
-	function buildErrorsStatePath(path, items) {
+	function buildErrorsStatePath(pathInvalid, pathNoShowtime, showtimeData, items) {
 		var lastValid = true;
+		var lastNoShowtime = false;
 
-		var count = -1;
+		var count = showtimeData.length;
 		for (var item of items) {
-			if (count < 0 || item.data.length < count) {
+			if (item.data.length < count) {
 				count = item.data.length;
 			}
 		}
 
 		for (var i = 0; i < count; i++) {
+			var noShowtime = (showtimeData[i] === false);
+
 			var valid = false;
 			for (var item of items) {
 				if (item.data[i] != null) {
 					valid = true;
 				}
 			}
+			valid = valid || noShowtime;
 
 			var posX = i;
 
+			if (!lastNoShowtime && noShowtime) {
+				pathNoShowtime.moveTo(posX, 0);
+				pathNoShowtime.lineTo(posX, 1);
+			} else if (lastNoShowtime && !noShowtime) {
+				pathNoShowtime.lineTo(posX, 1);
+				pathNoShowtime.lineTo(posX, 0);
+				pathNoShowtime.closePath();
+			}
+
 			if (lastValid && !valid) {
-				path.moveTo(posX, 0);
-				path.lineTo(posX, 1);
+				pathInvalid.moveTo(posX, 0);
+				pathInvalid.lineTo(posX, 1);
 			} else if (!lastValid && valid) {
-				path.lineTo(posX, 1);
-				path.lineTo(posX, 0);
-				path.closePath();
+				pathInvalid.lineTo(posX, 1);
+				pathInvalid.lineTo(posX, 0);
+				pathInvalid.closePath();
 			}
 
 			lastValid = valid;
+			lastNoShowtime = noShowtime;
 		}
 
-		if (!lastValid) {
-			path.lineTo(count, 1);
-			path.lineTo(count, 0);
-			path.closePath();
+		if (lastNoShowtime) {
+			pathNoShowtime.lineTo(count, 1);
+			pathNoShowtime.lineTo(count, 0);
+			pathNoShowtime.closePath();
+		} else if (!lastValid) {
+			pathInvalid.lineTo(count, 1);
+			pathInvalid.lineTo(count, 0);
+			pathInvalid.closePath();
 		}
 	}
 
@@ -1969,9 +1987,14 @@ var DSLGraphs = DSLGraphs || (function () {
 			pathStateInvalid.color.a = 0.15;
 			pathStateInvalid.path = new Path2D();
 
-			buildErrorsStatePath(pathStateInvalid.path, items);
+			var pathStateNoShowtime = {};
+			pathStateNoShowtime.color = COLOR_RED.copy();
+			pathStateNoShowtime.color.a = 0.3
+			pathStateNoShowtime.path = new Path2D();
+
+			buildErrorsStatePath(pathStateInvalid.path, pathStateNoShowtime.path, this._data.Showtime, items);
 
-			var pathsState = [pathStateInvalid];
+			var pathsState = [pathStateInvalid, pathStateNoShowtime];
 
 			ctx.translate(x, y+h+s);
 			ctx.scale(scaleX, -h-s);