Better Sparklines (#72)

* Cleaner renders
* Add timestamps to Sparklines
* Keep track of chart history up to 1h in the past

packages/backend/src/MeanList.ts

@@ -0,0 +1,62 @@
+import { Maybe, Types, timestamp } from '@dotstats/common';
+
+export class MeanList<T extends number> {
+  private periodIndex = 0;
+  private period = Array<T>(32).fill(0 as T);
+  private meanIndex = 0;
+  private means = Array<T>(20).fill(0 as T);
+  private ticksPerMean = 1;
+
+  public push(val: T) {
+    this.period[this.periodIndex++] = val;
+
+    if (this.periodIndex === this.ticksPerMean) {
+      this.pushMean();
+    }
+  }
+
+  public get(): Array<T> {
+    if (this.meanIndex === 20) {
+      return this.means;
+    } else {
+      return this.means.slice(0, this.meanIndex);
+    }
+  }
+
+  private pushMean() {
+    let sum = 0;
+
+    for (let i = 0; i < this.periodIndex; i++) {
+      sum += this.period[i] as number;
+    }
+
+    const mean = (sum / this.periodIndex) as T;
+
+    if (this.meanIndex === 20) {
+      if (this.ticksPerMean === 32) {
+        this.means.copyWithin(0, 1);
+        this.means[20] = mean;
+      } else {
+        this.squashMeans();
+        this.means[this.meanIndex++] = mean;
+      }
+    } else {
+      this.means[this.meanIndex++] = mean;
+    }
+
+    this.periodIndex = 0;
+  }
+
+  private squashMeans() {
+    this.ticksPerMean *= 2;
+
+    const means = this.means;
+
+    for (let i = 0; i < 10; i++) {
+      let i2 = i * 2;
+      means[i] = (((means[i2] as number) + (means[i2 + 1] as number)) / 2) as T;
+    }
+
+    this.meanIndex = 10;
+  }
+}

packages/backend/src/Node.ts

@@ -5,6 +5,7 @@ import { noop, timestamp, Maybe, Types, NumStats } from '@dotstats/common';
 import { parseMessage, getBestBlock, Message, BestBlock, SystemInterval } from './message';
 import { locate, Location } from './location';
 import { getId, refreshId } from './nodeId';
+import { MeanList } from './MeanList';
 
 const BLOCK_TIME_HISTORY = 10;
 const MEMORY_RECORDS = 20;
@@ -39,8 +40,9 @@ export default class Node {
 
   private peers = 0 as Types.PeerCount;
   private txcount = 0 as Types.TransactionCount;
-  private memory = Array<Types.MemoryUse>();
-  private cpu = Array<Types.CPUUse>();
+  private memory = new MeanList<Types.MemoryUse>();
+  private cpu = new MeanList<Types.CPUUse>();
+  private chartstamps = new MeanList<Types.Timestamp>();
 
   private readonly ip: string;
   private readonly socket: WebSocket;
@@ -177,7 +179,7 @@ export default class Node {
   }
 
   public nodeStats(): Types.NodeStats {
-    return [this.peers, this.txcount, this.memory, this.cpu];
+    return [this.peers, this.txcount, this.memory.get(), this.cpu.get(), this.chartstamps.get()];
   }
 
   public blockDetails(): Types.BlockDetails {
@@ -232,22 +234,10 @@ export default class Node {
     this.peers = peers;
     this.txcount = txcount;
 
-    if (cpu) {
-      if (this.cpu.length === CPU_RECORDS) {
-        this.cpu.copyWithin(0, 1);
-        this.cpu[CPU_RECORDS-1] = cpu;
-      } else {
-        this.cpu.push(cpu);
-      }
-    }
-
-    if (memory) {
-      if (this.memory.length === MEMORY_RECORDS) {
-        this.memory.copyWithin(0, 1);
-        this.memory[MEMORY_RECORDS-1] = memory;
-      } else {
-        this.memory.push(memory);
-      }
+    if (cpu != null && memory != null) {
+      this.cpu.push(cpu);
+      this.memory.push(memory);
+      this.chartstamps.push(timestamp());
     }
 
     this.events.emit('stats');