IntenseWebs/LibreQoS
3
0
Fork 0
mirror of https://github.com/LibreQoE/LibreQoS.git synced 2024-11-21 15:57:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

More muted colours

Browse Source
This commit is contained in:
Herbert Wolverson 2024-07-22 16:31:42 -05:00
parent 6bf7c7843b
commit 35b54dd121
6 changed files with 66 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/rust/lqosd/src/node_manager/js_build/src/graphs/dashboard_graph.js
View File

@ -7,8 +7,31 @@ export class DashboardGraph {
this.dom.classList.add("muted");
if (isDarkMode()) {
this.chart = echarts.init(this.dom, 'dark');
window.graphPalette = [
'#4992ff',
'#7cffb2',
'#fddd60',
'#ff6e76',
'#58d9f9',
'#05c091',
'#ff8a45',
'#8d48e3',
'#dd79ff'
];
} else {
this.chart = echarts.init(this.dom, 'vintage');
window.graphPalette = [
'#d87c7c',
'#919e8b',
'#d7ab82',
'#6e7074',
'#61a0a8',
'#efa18d',
'#787464',
'#cc7e63',
'#724e58',
'#4b565b'
];
}
this.chart.showLoading();
this.option = {};

12
src/rust/lqosd/src/node_manager/js_build/src/graphs/queue_stats_total_graph.js
View File

@ -24,13 +24,13 @@ export class QueueStatsTotalGraph extends DashboardGraph {
name: "ECN Marks",
icon: 'circle',
itemStyle: {
color: "green"
color: window.graphPalette[0]
}
}, {
name: "Cake Drops",
icon: 'circle',
itemStyle: {
color: "orange"
color: window.graphPalette[1]
}
}
],
@ -55,28 +55,28 @@ export class QueueStatsTotalGraph extends DashboardGraph {
name: 'ECN Marks',
data: [],
type: 'line',
lineStyle: { color: "green" },
lineStyle: { color: window.graphPalette[0] },
symbol: 'none',
},
{
name: 'ECN Marks Up',
data: [],
type: 'line',
lineStyle: { color: "green" },
lineStyle: { color: window.graphPalette[0] },
symbol: 'none',
},
{
name: 'Cake Drops',
data: [],
type: 'line',
lineStyle: { color: "orange" },
lineStyle: { color: window.graphPalette[1] },
symbol: 'none',
},
{
name: 'Cake Drops Up',
data: [],
type: 'line',
lineStyle: { color: "orange" },
lineStyle: { color: window.graphPalette[1] },
symbol: 'none',
},
],

3
src/rust/lqosd/src/node_manager/js_build/src/graphs/ram_pie.js
View File

@ -13,9 +13,6 @@ export class RamPie extends DashboardGraph {
{ name: 'Free', value: 0 },
{ name: 'Used', value: 0 }
],
color: [
'green', 'orange'
],
label: {
color: '#aaa'
}

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

@ -24,13 +24,13 @@ export class ThroughputRingBufferGraph extends DashboardGraph {
name: "Shaped Traffic",
icon: 'circle',
itemStyle: {
color: "green"
color: window.graphPalette[0]
}
}, {
name: "Unshaped Traffic",
icon: 'circle',
itemStyle: {
color: "orange"
color: window.graphPalette[1]
}
}
],
@ -58,11 +58,11 @@ export class ThroughputRingBufferGraph extends DashboardGraph {
stack: 'shaped',
lineStyle: {
opacity: 0,
color: 'green',
color: window.graphPalette[0],
},
symbol: 'none',
areaStyle: {
color: 'green'
color: window.graphPalette[0]
},
},
{
@ -72,11 +72,11 @@ export class ThroughputRingBufferGraph extends DashboardGraph {
stack: 'shaped',
lineStyle: {
opacity: 0,
color: 'green',
color: window.graphPalette[0],
},
symbol: 'none',
areaStyle: {
color: 'green'
color: window.graphPalette[0]
}
},
@ -85,7 +85,7 @@ export class ThroughputRingBufferGraph extends DashboardGraph {
data: [],
type: 'line',
lineStyle: {
color: 'orange',
color: window.graphPalette[1],
},
symbol: 'none',
},
@ -94,7 +94,7 @@ export class ThroughputRingBufferGraph extends DashboardGraph {
data: [],
type: 'line',
lineStyle: {
color: 'orange',
color: window.graphPalette[1],
},
symbol: 'none',
},

23
src/rust/lqosd/src/node_manager/js_build/src/helpers/dark_mode.js
View File

@ -23,10 +23,33 @@ export function initDayNightMode() {
document.body.classList.add('dark-mode');
document.documentElement.setAttribute('data-bs-theme', "dark");
localStorage.setItem('theme', 'dark');
window.graphPalette = [
'#4992ff',
'#7cffb2',
'#fddd60',
'#ff6e76',
'#58d9f9',
'#05c091',
'#ff8a45',
'#8d48e3',
'#dd79ff'
];
} else {
document.body.classList.remove('dark-mode');
document.documentElement.setAttribute('data-bs-theme', "light");
localStorage.setItem('theme', 'light');
window.graphPalette = [
'#d87c7c',
'#919e8b',
'#d7ab82',
'#6e7074',
'#61a0a8',
'#efa18d',
'#787464',
'#cc7e63',
'#724e58',
'#4b565b'
];
}
if (window.graphList !== undefined) {
window.graphList.forEach((graph) => {

12
src/rust/lqosd/src/node_manager/js_build/src/helpers/scaling.js
View File

@ -63,7 +63,7 @@ export function formatThroughput(throughput, limitInMbps) {
percent = (throughput / limitBits) * 100;
}
let color = lerpGreenToRedViaOrange(100-percent, 100);
let blob = "<span style='color: " + color + "'>■</span>";
let blob = "<span class='muted' style='color: " + color + "'>■</span>";
blob += "<span>" + scaleNumber(throughput, 1) + "bps</span>";
return blob;
}
@ -78,7 +78,7 @@ export function formatRtt(rtt) {
percent = (rtt / limit) * 100;
}
let color = lerpGreenToRedViaOrange(100-percent, 100);
let blob = "<span style='color: " + color + "'>■</span>";
let blob = "<span class='muted' style='color: " + color + "'>■</span>";
blob += "<span>" + parseFloat(rtt).toFixed(0) + "ms</span>";
return blob;
}
@ -86,13 +86,13 @@ export function formatRtt(rtt) {
export function formatRetransmit(retransmits) {
let percent = Math.min(100, retransmits) / 100;
let color = lerpColor([0, 255, 0], [255, 0, 0], percent);
return "<span style='color: " + color + "'>■</span>" + retransmits + "</span>";
return "<span class='muted' style='color: " + color + "'>■</span>" + retransmits + "</span>";
}
export function formatCakeStat(n) {
let percent = Math.min(100, n) / 100;
let color = lerpColor([128, 128, 0], [255, 255, 255], percent);
let html = "<span class='retransmits' style='color: " + color + "'>";
let html = "<span class='muted' class='retransmits' style='color: " + color + "'>";
html += n;
html += "</span>";
return html;
@ -107,12 +107,12 @@ export function lerpColor(color1, color2, weight) {
export function formatPercent(percent, digits=0) {
let color = lerpGreenToRedViaOrange(100-Math.min(100,percent), 100);
return "<span style='color: " + color + "'>" + percent.toFixed(digits) + "%</span>";
return "<span class='muted' style='color: " + color + "'>" + percent.toFixed(digits) + "%</span>";
}
export function rttNanosAsSpan(rttNanos, precision=0) {
let rttInMs = Math.min(200, rttNanos / 1000000);
let color = lerpGreenToRedViaOrange(200 - rttInMs, 200);
let html = "<span style='color: " + color + "'>■</span> " + scaleNanos(rttNanos, precision);
let html = "<span class='muted' style='color: " + color + "'>■</span> " + scaleNanos(rttNanos, precision);
return html;
}