Connection status charts now use different color to distinguish statistics of current connection from past ones

ui/history.js

@@ -32,7 +32,16 @@ export class Records {
    */
   update(newData) {
     this.data.shift();
-    this.data.push(newData);
+    this.data.push({ data: newData, class: "" });
+  }
+
+  /**
+   * Set all existing data as expired
+   */
+  expire() {
+    for (let i = 0; i < this.data.length; i++) {
+      this.data[i].class = "expired";
+    }
   }
 
   /**

ui/home_socketctl.js

@@ -31,7 +31,7 @@ export function build(ctx) {
     let r = [];
 
     for (let i = 0; i < 32; i++) {
-      r.push(0);
+      r.push({ data: 0, class: "" });
     }
 
     return r;
@@ -165,6 +165,9 @@ export function build(ctx) {
     },
     close(e) {
       isClosed = true;
+      delayHistory.expire();
+      inboundHistory.expire();
+      outboundHistory.expire();
 
       ctx.connector.inputting = false;
 

ui/widgets/chart.vue

@@ -44,11 +44,11 @@ class Data {
     let max = 0;
 
     for (let i in data) {
-      if (data[i] <= max) {
+      if (data[i].data <= max) {
         continue;
       }
 
-      max = data[i];
+      max = data[i].data;
     }
 
     return max;
@@ -121,7 +121,7 @@ class BarDrawer extends BaseDrawer {
       cellHeight = rootDim.height - this.topBottomPadding;
 
     for (let i in data.data) {
-      let h = this.toCellHeight(cellHeight, data, data.data[i]);
+      let h = this.toCellHeight(cellHeight, data, data.data[i].data);
 
       this.createEl(parent, "path", {
         d:
@@ -133,7 +133,7 @@ class BarDrawer extends BaseDrawer {
           currentWidth +
           "," +
           cellHalfHeight,
-        class: h > 0 ? "" : "zero"
+        class: h === 0 ? "zero" : data.data[i].class
       });
 
       currentWidth += cellWidth;
@@ -149,7 +149,7 @@ class UpsideDownBarDrawer extends BarDrawer {
       cellHeight = rootDim.height - this.topBottomPadding;
 
     for (let i in data.data) {
-      let h = this.toCellHeight(cellHeight, data, data.data[i]);
+      let h = this.toCellHeight(cellHeight, data, data.data[i].data);
 
       this.createEl(parent, "path", {
         d:
@@ -161,7 +161,7 @@ class UpsideDownBarDrawer extends BarDrawer {
           currentWidth +
           "," +
           (Math.round(h) + padHalfHeight),
-        class: h > 0 ? "" : "zero"
+        class: h === 0 ? "zero" : data.data[i].class
       });
 
       currentWidth += cellWidth;

ui/widgets/status.css

@@ -167,6 +167,10 @@
   stroke-width: 3px;
 }
 
+.conn-status-chart > .chart .expired {
+  stroke: #3a3a3a;
+}
+
 #conn-status-delay {
   padding: 15px 0;
   background: #292929;