IntenseWebs/LibreQoS
3
0
Fork 0
mirror of https://github.com/LibreQoE/LibreQoS.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Throughput ring graph uses the common graph core.

Browse Source
This commit is contained in:
Herbert Wolverson
2024-12-03 09:53:36 -06:00
parent 4ea45d139a
commit eb05a96f25
1 changed files with 74 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/rust/lqosd/src/node_manager/js_build/src/graphs/throughput_ring_graph.js
View File

@@ -1,5 +1,5 @@
import {DashboardGraph} from "./dashboard_graph";
import {scaleNumber} from "../lq_js_common/helpers/scaling";
import {GraphOptionsBuilder} from "../lq_js_common/e_charts/chart_builder";
const RING_SIZE = 60 * 5; // 5 Minutes
@@ -8,101 +8,84 @@ export class ThroughputRingBufferGraph 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()
.withSequenceAxis(0, RING_SIZE)
.withScaledAbsYAxis("Throughput (bps)", 40)
.build();
this.option = {
legend: {
orient: "horizontal",
right: 10,
top: "bottom",
selectMode: false,
data: [
{
name: "Shaped Traffic",
icon: 'circle',
itemStyle: {
color: window.graphPalette[0]
}
}, {
name: "Unshaped Traffic",
icon: 'circle',
itemStyle: {
color: window.graphPalette[1]
}
this.option.legend = {
orient: "horizontal",
right: 10,
top: "bottom",
selectMode: false,
data: [
{
name: "Shaped Traffic",
icon: 'circle',
itemStyle: {
color: window.graphPalette[0]
}
}, {
name: "Unshaped Traffic",
icon: 'circle',
itemStyle: {
color: window.graphPalette[1]
}
],
textStyle: {
color: '#aaa'
},
},
xAxis: {
type: 'category',
data: xaxis,
},
yAxis: {
type: 'value',
axisLabel: {
formatter: (val) => {
return scaleNumber(Math.abs(val), 1);
},
}
},
series: [
{
name: 'shaped0',
data: [],
type: 'line',
stack: 'shaped',
lineStyle: {
opacity: 0,
color: window.graphPalette[0],
},
symbol: 'none',
areaStyle: {
color: window.graphPalette[0]
},
},
{
name: 'Shaped Traffic',
data: [],
type: 'line',
stack: 'shaped',
lineStyle: {
opacity: 0,
color: window.graphPalette[0],
},
symbol: 'none',
areaStyle: {
color: window.graphPalette[0]
}
},
{
name: 'unshaped0',
data: [],
type: 'line',
lineStyle: {
color: window.graphPalette[1],
},
symbol: 'none',
},
{
name: 'Unshaped Traffic',
data: [],
type: 'line',
lineStyle: {
color: window.graphPalette[1],
},
symbol: 'none',
},
],
tooltip: {
trigger: 'item',
textStyle: {
color: '#aaa'
},
}
};
this.option.series = [
{
name: 'shaped0',
data: [],
type: 'line',
stack: 'shaped',
lineStyle: {
opacity: 0,
color: window.graphPalette[0],
},
symbol: 'none',
areaStyle: {
color: window.graphPalette[0]
},
},
{
name: 'Shaped Traffic',
data: [],
type: 'line',
stack: 'shaped',
lineStyle: {
opacity: 0,
color: window.graphPalette[0],
},
symbol: 'none',
areaStyle: {
color: window.graphPalette[0]
}
},
{
name: 'unshaped0',
data: [],
type: 'line',
lineStyle: {
color: window.graphPalette[1],
},
symbol: 'none',
},
{
name: 'Unshaped Traffic',
data: [],
type: 'line',
lineStyle: {
color: window.graphPalette[1],
},
symbol: 'none',
},
];
this.option && this.chart.setOption(this.option);
}