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

WIP: Starting to use theme colours for graphs

Browse Source
This commit is contained in:
Herbert Wolverson 2024-07-22 15:40:11 -05:00
parent 59b352bf64
commit 6ff345de65
7 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,8 +4,19 @@ export class DashboardGraph {
constructor(id) {
this.id = id;
this.dom = document.getElementById(id);
this.chart = echarts.init(this.dom);
if (isDarkMode()) {
this.chart = echarts.init(this.dom, 'dark');
} else {
this.chart = echarts.init(this.dom, 'vintage');
}
this.chart.showLoading();
this.option = {};
// Apply to the global list of graphs
if (window.graphList === undefined) {
window.graphList = [ this ];
} else {
window.graphList.push(this);
}
}
}

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

@ -26,15 +26,9 @@ export class FlowCountGraph extends DashboardGraph {
{
name: "Active/Tracked",
icon: 'circle',
itemStyle: {
color: "green"
}
}, {
name: "Recently Completed",
icon: 'circle',
itemStyle: {
color: "orange"
}
}
],
textStyle: {
@ -58,18 +52,12 @@ export class FlowCountGraph extends DashboardGraph {
name: 'Active/Tracked',
data: [],
type: 'line',
lineStyle: {
color: 'green',
},
symbol: 'none',
},
{
name: 'Recently Completed',
data: [],
type: 'line',
lineStyle: {
color: 'orange',
},
symbol: 'none',
},
],

4
src/rust/lqosd/src/node_manager/js_build/src/graphs/packets_bar.js
View File

@ -31,8 +31,8 @@ export class PacketsPerSecondBar extends DashboardGraph {
update(down, up) {
this.chart.hideLoading();
this.option.series[0].data = [
{ value: up, itemStyle: { color: 'orange' } },
{ value: down, itemStyle: { color: 'green' } }
{ value: up, },
{ value: down, }
];
this.chart.setOption(this.option);
}

6
src/rust/lqosd/src/node_manager/js_build/src/graphs/shaped_unshaped_pie.js
View File

@ -13,12 +13,6 @@ export class ShapedUnshapedPie extends DashboardGraph {
{ name: 'Shaped', value: 0 },
{ name: 'Unshaped', value: 0 }
],
color: [
'green', 'orange'
],
label: {
color: '#aaa'
}
}
],
tooltip: {

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

@ -28,6 +28,17 @@ export function initDayNightMode() {
document.documentElement.setAttribute('data-bs-theme', "light");
localStorage.setItem('theme', 'light');
}
if (window.graphList !== undefined) {
window.graphList.forEach((graph) => {
graph.chart.dispose();
if (darkModeSwitch.checked) {
graph.chart = echarts.init(graph.dom, 'dark');
} else {
graph.chart = echarts.init(graph.dom, 'vintage');
}
graph.chart.setOption(graph.option);
});
}
});
});
}

2
src/rust/lqosd/src/node_manager/static2/template.html
View File

@ -11,7 +11,7 @@
<script src="vendor/echarts-gl.min.js"></script>
<script src="vendor/4c979e6ebb.js"></script>
<script src="vendor/echarts_dark.js"></script>
<script src="vendor/echarts_macarons.js"></script>
<script src="vendor/echart_vintage.js"></script>
<link href="./node_manager.css" rel="stylesheet">
</head>
<body>

6
src/rust/lqosd/src/node_manager/static2/vendor/echarts_dark.js vendored
View File

@ -42,8 +42,8 @@
return;
}
var contrastColor = '#B9B8CE';
//var backgroundColor = '#100C2A';
var backgroundColor = '#000';
var backgroundColor = 'rgba(0,0,0,0)';
//var backgroundColor = '#000';
var axisCommon = function () {
return {
axisLine: {
@ -84,7 +84,7 @@
darkMode: true,
color: colorPalette,
backgroundColor: backgroundColor,
//backgroundColor: backgroundColor,
axisPointer: {
lineStyle: {
color: '#817f91'