Stop duplicating the ringbuffer code, and make the retransmits graph use the common core.

This commit is contained in:
Herbert Wolverson
2024-12-03 09:49:52 -06:00
parent 4f5f8aca17
commit 4ea45d139a
2 changed files with 35 additions and 115 deletions

View File

@@ -1,6 +1,6 @@
import {DashboardGraph} from "./dashboard_graph";
import {scaleNumber} from "../lq_js_common/helpers/scaling";
import {GraphOptionsBuilder} from "../lq_js_common/e_charts/chart_builder";
import {RingBuffer} from "../lq_js_common/helpers/ringbuffer";
const RING_SIZE = 60 * 5; // 5 Minutes
@@ -35,35 +35,4 @@ export class FlowCountGraph extends DashboardGraph {
this.chart.setOption(this.option);
}
}
class RingBuffer {
constructor(size) {
this.size = size;
let data = [];
for (let i=0; i<size; i++) {
data.push([0, 0]);
}
this.head = 0;
this.data = data;
}
push(recent, completed) {
this.data[this.head] = [recent, completed];
this.head += 1;
this.head %= this.size;
}
series() {
let result = [[], []];
for (let i=this.head; i<this.size; i++) {
result[0].push(this.data[i][0]);
result[1].push(this.data[i][1]);
}
for (let i=0; i<this.head; i++) {
result[0].push(this.data[i][0]);
result[1].push(this.data[i][1]);
}
return result;
}
}

View File

@@ -1,4 +1,6 @@
import {DashboardGraph} from "./dashboard_graph";
import {RingBuffer} from "../lq_js_common/helpers/ringbuffer";
import {GraphOptionsBuilder} from "../lq_js_common/e_charts/chart_builder";
const RING_SIZE = 60 * 5; // 5 Minutes
@@ -7,65 +9,45 @@ export class RetransmitsGraph extends DashboardGraph {
super(id);
this.ringbuffer = new RingBuffer(RING_SIZE);
let xaxis = [];
for (let i=0; i<RING_SIZE; i++) {
xaxis.push(i);
}
this.option = new GraphOptionsBuilder()
.withLeftGridSize("15%")
.withSequenceAxis(0, RING_SIZE)
.withScaledAbsYAxisPercent("Retransmits", 40)
.build();
this.option = {
grid: {
x: '25%',
},
legend: {
orient: "horizontal",
right: 10,
top: "bottom",
selectMode: false,
data: [
{
name: "Download",
icon: 'circle',
},
{
name: "Upload",
icon: 'circle',
},
],
textStyle: {
color: '#aaa'
},
},
xAxis: {
type: 'category',
data: xaxis,
},
yAxis: {
type: 'value',
axisLabel: {
formatter: (val) => {
return Math.abs(val) + "%";
},
}
},
series: [
this.option.legend = {
orient: "horizontal",
right: 10,
top: "bottom",
selectMode: false,
data: [
{
name: 'Download',
data: [],
type: 'line',
symbol: 'none',
name: "Download",
icon: 'circle',
},
{
name: 'Upload',
data: [],
type: 'line',
symbol: 'none',
name: "Upload",
icon: 'circle',
},
],
tooltip: {
trigger: 'item',
textStyle: {
color: '#aaa'
},
animation: false,
}
};
this.option.series = [
{
name: 'Download',
data: [],
type: 'line',
symbol: 'none',
},
{
name: 'Upload',
data: [],
type: 'line',
symbol: 'none',
},
];
this.option && this.chart.setOption(this.option);
}
@@ -87,35 +69,4 @@ export class RetransmitsGraph extends DashboardGraph {
this.chart.setOption(this.option);
}
}
class RingBuffer {
constructor(size) {
this.size = size;
let data = [];
for (let i=0; i<size; i++) {
data.push([0, 0]);
}
this.head = 0;
this.data = data;
}
push(recent, completed) {
this.data[this.head] = [recent, completed];
this.head += 1;
this.head %= this.size;
}
series() {
let result = [[], []];
for (let i=this.head; i<this.size; i++) {
result[0].push(this.data[i][0]);
result[1].push(this.data[i][1]);
}
for (let i=0; i<this.head; i++) {
result[0].push(this.data[i][0]);
result[1].push(this.data[i][1]);
}
return result;
}
}