diff --git a/ui/history.js b/ui/history.js index 2d51e98..fae5109 100644 --- a/ui/history.js +++ b/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"; + } } /** diff --git a/ui/home_socketctl.js b/ui/home_socketctl.js index 3035f34..2a1b082 100644 --- a/ui/home_socketctl.js +++ b/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; diff --git a/ui/widgets/chart.vue b/ui/widgets/chart.vue index 5be82fc..ca089f5 100644 --- a/ui/widgets/chart.vue +++ b/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; diff --git a/ui/widgets/status.css b/ui/widgets/status.css index b243ab0..3988cde 100644 --- a/ui/widgets/status.css +++ b/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;