Improved support for theme switching with graphs.

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();
 

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();
 

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();
 

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();
 

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();
 

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();
 

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);

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);

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
+    }
 }

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);

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);

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();
                 });
             }
         });