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

Improved support for theme switching with graphs.

Browse Source
This commit is contained in:
Herbert Wolverson 2024-07-23 15:47:14 -05:00
parent 04129c02c5
commit 5fed418fe6
12 changed files with 143 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_backlog.js
View File

@ -136,6 +136,24 @@ export class CakeBacklog extends DashboardGraph {
this.option && this.chart.setOption(this.option);
}
onThemeChange() {
super.onThemeChange();
this.option.legend.data[0].itemStyle.color = window.graphPalette[0];
this.option.legend.data[1].itemStyle.color = window.graphPalette[1];
this.option.legend.data[2].itemStyle.color = window.graphPalette[2];
this.option.legend.data[3].itemStyle.color = window.graphPalette[3];
this.option.series[0].itemStyle.color = window.graphPalette[0];
this.option.series[1].itemStyle.color = window.graphPalette[1];
this.option.series[2].itemStyle.color = window.graphPalette[2];
this.option.series[3].itemStyle.color = window.graphPalette[3];
this.option.series[4].itemStyle.color = window.graphPalette[0];
this.option.series[5].itemStyle.color = window.graphPalette[1];
this.option.series[6].itemStyle.color = window.graphPalette[2];
this.option.series[7].itemStyle.color = window.graphPalette[3];
this.chart.setOption(this.option);
}
update(msg) {
this.chart.hideLoading();

17
src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_delays.js
View File

@ -131,6 +131,23 @@ export class CakeDelays extends DashboardGraph {
this.option && this.chart.setOption(this.option);
}
onThemeChange() {
super.onThemeChange();
this.option.legend.data[0].itemStyle.color = window.graphPalette[0];
this.option.legend.data[1].itemStyle.color = window.graphPalette[1];
this.option.legend.data[2].itemStyle.color = window.graphPalette[2];
this.option.legend.data[3].itemStyle.color = window.graphPalette[3];
this.option.series[0].itemStyle.color = window.graphPalette[0];
this.option.series[1].itemStyle.color = window.graphPalette[1];
this.option.series[2].itemStyle.color = window.graphPalette[2];
this.option.series[3].itemStyle.color = window.graphPalette[3];
this.option.series[4].itemStyle.color = window.graphPalette[0];
this.option.series[5].itemStyle.color = window.graphPalette[1];
this.option.series[6].itemStyle.color = window.graphPalette[2];
this.option.series[7].itemStyle.color = window.graphPalette[3];
this.chart.setOption(this.option);
}
update(msg) {
this.chart.hideLoading();

17
src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_drops.js
View File

@ -136,6 +136,23 @@ export class CakeDrops extends DashboardGraph {
this.option && this.chart.setOption(this.option);
}
onThemeChange() {
super.onThemeChange();
this.option.legend.data[0].itemStyle.color = window.graphPalette[0];
this.option.legend.data[1].itemStyle.color = window.graphPalette[1];
this.option.legend.data[2].itemStyle.color = window.graphPalette[2];
this.option.legend.data[3].itemStyle.color = window.graphPalette[3];
this.option.series[0].itemStyle.color = window.graphPalette[0];
this.option.series[1].itemStyle.color = window.graphPalette[1];
this.option.series[2].itemStyle.color = window.graphPalette[2];
this.option.series[3].itemStyle.color = window.graphPalette[3];
this.option.series[4].itemStyle.color = window.graphPalette[0];
this.option.series[5].itemStyle.color = window.graphPalette[1];
this.option.series[6].itemStyle.color = window.graphPalette[2];
this.option.series[7].itemStyle.color = window.graphPalette[3];
this.chart.setOption(this.option);
}
update(msg) {
this.chart.hideLoading();

17
src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_marks.js
View File

@ -136,6 +136,23 @@ export class CakeMarks extends DashboardGraph {
this.option && this.chart.setOption(this.option);
}
onThemeChange() {
super.onThemeChange();
this.option.legend.data[0].itemStyle.color = window.graphPalette[0];
this.option.legend.data[1].itemStyle.color = window.graphPalette[1];
this.option.legend.data[2].itemStyle.color = window.graphPalette[2];
this.option.legend.data[3].itemStyle.color = window.graphPalette[3];
this.option.series[0].itemStyle.color = window.graphPalette[0];
this.option.series[1].itemStyle.color = window.graphPalette[1];
this.option.series[2].itemStyle.color = window.graphPalette[2];
this.option.series[3].itemStyle.color = window.graphPalette[3];
this.option.series[4].itemStyle.color = window.graphPalette[0];
this.option.series[5].itemStyle.color = window.graphPalette[1];
this.option.series[6].itemStyle.color = window.graphPalette[2];
this.option.series[7].itemStyle.color = window.graphPalette[3];
this.chart.setOption(this.option);
}
update(msg) {
this.chart.hideLoading();

10
src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_queue_length.js
View File

@ -71,6 +71,16 @@ export class CakeQueueLength extends DashboardGraph {
this.option && this.chart.setOption(this.option);
}
onThemeChange() {
super.onThemeChange();
this.option.legend.data[0].itemStyle.color = window.graphPalette[0];
this.option.series[0].lineStyle.color = window.graphPalette[0];
this.option.series[0].itemStyle = window.graphPalette[0];
this.option.series[1].lineStyle.color = window.graphPalette[0];
this.option.series[1].itemStyle = window.graphPalette
this.chart.setOption(this.option);
}
update(msg) {
this.chart.hideLoading();

17
src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_traffic.js
View File

@ -160,6 +160,23 @@ export class CakeTraffic extends DashboardGraph {
this.option && this.chart.setOption(this.option);
}
onThemeChange() {
super.onThemeChange();
this.option.legend.data[0].itemStyle.color = window.graphPalette[0];
this.option.legend.data[1].itemStyle.color = window.graphPalette[1];
this.option.legend.data[2].itemStyle.color = window.graphPalette[2];
this.option.legend.data[3].itemStyle.color = window.graphPalette[3];
this.option.series[0].itemStyle.color = window.graphPalette[0];
this.option.series[1].itemStyle.color = window.graphPalette[1];
this.option.series[2].itemStyle.color = window.graphPalette[2];
this.option.series[3].itemStyle.color = window.graphPalette[3];
this.option.series[4].itemStyle.color = window.graphPalette[0];
this.option.series[5].itemStyle.color = window.graphPalette[1];
this.option.series[6].itemStyle.color = window.graphPalette[2];
this.option.series[7].itemStyle.color = window.graphPalette[3];
this.chart.setOption(this.option);
}
update(msg) {
this.chart.hideLoading();

9
src/rust/lqosd/src/node_manager/js_build/src/graphs/circuit_retransmit_graph.js
View File

@ -82,6 +82,15 @@ export class CircuitRetransmitGraph extends DashboardGraph {
this.option && this.chart.setOption(this.option);
}
onThemeChange() {
super.onThemeChange();
this.option.legend.data[0].itemStyle.color = window.graphPalette[0];
this.option.legend.data[1].itemStyle.color = window.graphPalette[1];
this.option.series[0].lineStyle.color = window.graphPalette[0];
this.option.series[1].lineStyle.color = window.graphPalette[1];
this.chart.setOption(this.option);
}
update(download, upload) {
this.chart.hideLoading();
this.ringbuffer.push(download, upload);

9
src/rust/lqosd/src/node_manager/js_build/src/graphs/circuit_throughput_graph.js
View File

@ -82,6 +82,15 @@ export class CircuitTotalGraph extends DashboardGraph {
this.option && this.chart.setOption(this.option);
}
onThemeChange() {
super.onThemeChange();
this.option.legend.data[0].itemStyle.color = window.graphPalette[0];
this.option.legend.data[1].itemStyle.color = window.graphPalette[1];
this.option.series[0].lineStyle.color = window.graphPalette[0];
this.option.series[1].lineStyle.color = window.graphPalette[1];
this.chart.setOption(this.option);
}
update(download, upload) {
this.chart.hideLoading();
this.ringbuffer.push(download, upload);

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

@ -43,4 +43,8 @@ export class DashboardGraph {
window.graphList.push(this);
}
}
onThemeChange() {
// Override this if you have to
}
}

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

@ -88,6 +88,16 @@ export class QueueStatsTotalGraph extends DashboardGraph {
this.option && this.chart.setOption(this.option);
}
onThemeChange() {
super.onThemeChange();
this.option.legend.data[0].itemStyle.color = window.graphPalette[0];
this.option.legend.data[1].itemStyle.color = window.graphPalette[1];
this.option.series[0].lineStyle.color = window.graphPalette[0];
this.option.series[1].lineStyle.color = window.graphPalette[0];
this.option.series[2].lineStyle.color = window.graphPalette[1];
this.option.series[3].lineStyle.color = window.graphPalette[1];
}
update(marks, drops) {
this.chart.hideLoading();
this.ringbuffer.push(marks, drops);

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

@ -106,6 +106,20 @@ export class ThroughputRingBufferGraph extends DashboardGraph {
this.option && this.chart.setOption(this.option);
}
onThemeChange() {
super.onThemeChange();
this.option.legend.data[0].itemStyle.color = window.graphPalette[0];
this.option.legend.data[1].itemStyle.color = window.graphPalette[1];
this.option.series[0].lineStyle.color = window.graphPalette[0];
this.option.series[0].areaStyle.color = window.graphPalette[0];
this.option.series[1].lineStyle.color = window.graphPalette[0];
this.option.series[1].areaStyle.color = window.graphPalette[0];
this.option.series[2].lineStyle.color = window.graphPalette[1];
this.option.series[3].lineStyle.color = window.graphPalette[1];
this.chart.setOption(this.option);
}
update(shaped, unshaped) {
this.chart.hideLoading();
this.ringbuffer.push(shaped, unshaped);

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

@ -60,6 +60,7 @@ export function initDayNightMode() {
graph.chart = echarts.init(graph.dom, 'vintage');
}
graph.chart.setOption(graph.option);
graph.onThemeChange();
});
}
});