From 5fed418fe665c6e8c03ddea96f53d2b6f112d9db Mon Sep 17 00:00:00 2001 From: Herbert Wolverson Date: Tue, 23 Jul 2024 15:47:14 -0500 Subject: [PATCH] Improved support for theme switching with graphs. --- .../js_build/src/graphs/cake_backlog.js | 18 ++++++++++++++++++ .../js_build/src/graphs/cake_delays.js | 17 +++++++++++++++++ .../js_build/src/graphs/cake_drops.js | 17 +++++++++++++++++ .../js_build/src/graphs/cake_marks.js | 17 +++++++++++++++++ .../js_build/src/graphs/cake_queue_length.js | 10 ++++++++++ .../js_build/src/graphs/cake_traffic.js | 17 +++++++++++++++++ .../src/graphs/circuit_retransmit_graph.js | 9 +++++++++ .../src/graphs/circuit_throughput_graph.js | 9 +++++++++ .../js_build/src/graphs/dashboard_graph.js | 4 ++++ .../src/graphs/queue_stats_total_graph.js | 10 ++++++++++ .../src/graphs/throughput_ring_graph.js | 14 ++++++++++++++ .../js_build/src/helpers/dark_mode.js | 1 + 12 files changed, 143 insertions(+) diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_backlog.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_backlog.js index c3b21fcf..2a57b46a 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_backlog.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_backlog.js @@ -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(); diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_delays.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_delays.js index 8c6693a3..fff0bea0 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_delays.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_delays.js @@ -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(); diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_drops.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_drops.js index 77c59d5b..d2c9ea37 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_drops.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_drops.js @@ -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(); diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_marks.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_marks.js index a87230ca..50338b2a 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_marks.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_marks.js @@ -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(); diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_queue_length.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_queue_length.js index 082906b3..be455a0f 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_queue_length.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_queue_length.js @@ -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(); diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_traffic.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_traffic.js index 58ab47d0..8f59cf7a 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_traffic.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_traffic.js @@ -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(); diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/circuit_retransmit_graph.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/circuit_retransmit_graph.js index ff357886..2f63e832 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/circuit_retransmit_graph.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/circuit_retransmit_graph.js @@ -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); diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/circuit_throughput_graph.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/circuit_throughput_graph.js index 5a979fb8..ab723e97 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/circuit_throughput_graph.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/circuit_throughput_graph.js @@ -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); diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/dashboard_graph.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/dashboard_graph.js index da6c0734..ec74c5ca 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/dashboard_graph.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/dashboard_graph.js @@ -43,4 +43,8 @@ export class DashboardGraph { window.graphList.push(this); } } + + onThemeChange() { + // Override this if you have to + } } \ No newline at end of file diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/queue_stats_total_graph.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/queue_stats_total_graph.js index 6b7e7f43..f6e23c50 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/queue_stats_total_graph.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/queue_stats_total_graph.js @@ -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); diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/throughput_ring_graph.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/throughput_ring_graph.js index af1e88cc..052bf474 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/throughput_ring_graph.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/throughput_ring_graph.js @@ -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); diff --git a/src/rust/lqosd/src/node_manager/js_build/src/helpers/dark_mode.js b/src/rust/lqosd/src/node_manager/js_build/src/helpers/dark_mode.js index 3ed9e450..adecaa3d 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/helpers/dark_mode.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/helpers/dark_mode.js @@ -60,6 +60,7 @@ export function initDayNightMode() { graph.chart = echarts.init(graph.dom, 'vintage'); } graph.chart.setOption(graph.option); + graph.onThemeChange(); }); } });