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 8f12b463..bf4e2ae2 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
@@ -1,8 +1,12 @@
+import {isDarkMode} from "../helpers/dark_mode";
+
export class DashboardGraph {
constructor(id) {
+ let theme = "macarons";
+ if (isDarkMode()) theme = "dark";
this.id = id;
this.dom = document.getElementById(id);
- this.chart = echarts.init(this.dom);
+ this.chart = echarts.init(this.dom, theme);
this.chart.showLoading();
this.option = {};
}
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
new file mode 100644
index 00000000..6f6bb65b
--- /dev/null
+++ b/src/rust/lqosd/src/node_manager/js_build/src/helpers/dark_mode.js
@@ -0,0 +1,39 @@
+export function initDayNightMode() {
+ const currentTheme = localStorage.getItem('theme');
+ if (currentTheme === 'dark') {
+ const darkModeSwitch = document.getElementById('darkModeSwitch');
+ darkModeSwitch.checked = true;
+ document.body.classList.add('dark-mode');
+ document.documentElement.setAttribute('data-bs-theme', "dark");
+ } else {
+ document.body.classList.remove('dark-mode');
+ document.documentElement.setAttribute('data-bs-theme', "light");
+ }
+
+ document.addEventListener('DOMContentLoaded', (event) => {
+ const darkModeSwitch = document.getElementById('darkModeSwitch');
+ const currentTheme = localStorage.getItem('theme');
+
+ if (currentTheme === 'dark') {
+ document.body.classList.add('dark-mode');
+ darkModeSwitch.checked = true;
+ }
+
+ darkModeSwitch.addEventListener('change', () => {
+ if (darkModeSwitch.checked) {
+ document.body.classList.add('dark-mode');
+ document.documentElement.setAttribute('data-bs-theme', "dark");
+ localStorage.setItem('theme', 'dark');
+ } else {
+ document.body.classList.remove('dark-mode');
+ document.documentElement.setAttribute('data-bs-theme', "light");
+ localStorage.setItem('theme', 'light');
+ }
+ });
+ });
+}
+
+export function isDarkMode() {
+ const currentTheme = localStorage.getItem('theme');
+ return currentTheme === 'dark';
+}
\ No newline at end of file
diff --git a/src/rust/lqosd/src/node_manager/js_build/src/template.js b/src/rust/lqosd/src/node_manager/js_build/src/template.js
index e5f04feb..18a1eeef 100644
--- a/src/rust/lqosd/src/node_manager/js_build/src/template.js
+++ b/src/rust/lqosd/src/node_manager/js_build/src/template.js
@@ -1,44 +1,6 @@
import {clearDiv} from "./helpers/builders";
import {initRedact} from "./helpers/redact";
-
-function initDayNightMode() {
- const currentTheme = localStorage.getItem('theme');
- if (currentTheme === 'dark') {
- const darkModeSwitch = document.getElementById('darkModeSwitch');
- darkModeSwitch.checked = true;
- document.body.classList.add('dark-mode');
- document.documentElement.setAttribute('data-bs-theme', "dark");
- } else {
- document.body.classList.remove('dark-mode');
- document.documentElement.setAttribute('data-bs-theme', "light");
- }
-
- document.addEventListener('DOMContentLoaded', (event) => {
- const darkModeSwitch = document.getElementById('darkModeSwitch');
- const currentTheme = localStorage.getItem('theme');
-
- if (currentTheme === 'dark') {
- document.body.classList.add('dark-mode');
- darkModeSwitch.checked = true;
- }
-
- darkModeSwitch.addEventListener('change', () => {
- if (darkModeSwitch.checked) {
- document.body.classList.add('dark-mode');
- document.documentElement.setAttribute('data-bs-theme', "dark");
- localStorage.setItem('theme', 'dark');
- } else {
- document.body.classList.remove('dark-mode');
- document.documentElement.setAttribute('data-bs-theme', "light");
- localStorage.setItem('theme', 'light');
- }
-
- if (window.router) {
- window.router.onThemeSwitch();
- }
- });
- });
-}
+import {initDayNightMode} from "./helpers/dark_mode";
function getDeviceCounts() {
$.get("/local-api/deviceCount", (data) => {
diff --git a/src/rust/lqosd/src/node_manager/static2/template.html b/src/rust/lqosd/src/node_manager/static2/template.html
index 53ae5cb0..48de5b2b 100644
--- a/src/rust/lqosd/src/node_manager/static2/template.html
+++ b/src/rust/lqosd/src/node_manager/static2/template.html
@@ -10,6 +10,8 @@
+
+
diff --git a/src/rust/lqosd/src/node_manager/static2/vendor/echarts_dark.js b/src/rust/lqosd/src/node_manager/static2/vendor/echarts_dark.js
new file mode 100644
index 00000000..0c6b4435
--- /dev/null
+++ b/src/rust/lqosd/src/node_manager/static2/vendor/echarts_dark.js
@@ -0,0 +1,225 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+(function(root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ // AMD. Register as an anonymous module.
+ define(['exports', 'echarts'], factory);
+ } else if (
+ typeof exports === 'object' &&
+ typeof exports.nodeName !== 'string'
+ ) {
+ // CommonJS
+ factory(exports, require('echarts/lib/echarts'));
+ } else {
+ // Browser globals
+ factory({}, root.echarts);
+ }
+})(this, function(exports, echarts) {
+ var log = function(msg) {
+ if (typeof console !== 'undefined') {
+ console && console.error && console.error(msg);
+ }
+ };
+ if (!echarts) {
+ log('ECharts is not Loaded');
+ return;
+ }
+ var contrastColor = '#B9B8CE';
+ //var backgroundColor = '#100C2A';
+ var backgroundColor = '#000';
+ var axisCommon = function () {
+ return {
+ axisLine: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#484753'
+ }
+ },
+ splitArea: {
+ areaStyle: {
+ color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)']
+ }
+ },
+ minorSplitLine: {
+ lineStyle: {
+ color: '#20203B'
+ }
+ }
+ };
+ };
+
+ var colorPalette = [
+ '#4992ff',
+ '#7cffb2',
+ '#fddd60',
+ '#ff6e76',
+ '#58d9f9',
+ '#05c091',
+ '#ff8a45',
+ '#8d48e3',
+ '#dd79ff'
+ ];
+ var theme = {
+ darkMode: true,
+
+ color: colorPalette,
+ backgroundColor: backgroundColor,
+ axisPointer: {
+ lineStyle: {
+ color: '#817f91'
+ },
+ crossStyle: {
+ color: '#817f91'
+ },
+ label: {
+ // TODO Contrast of label backgorundColor
+ color: '#fff'
+ }
+ },
+ legend: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ textStyle: {
+ color: contrastColor
+ },
+ title: {
+ textStyle: {
+ color: '#EEF1FA'
+ },
+ subtextStyle: {
+ color: '#B9B8CE'
+ }
+ },
+ toolbox: {
+ iconStyle: {
+ borderColor: contrastColor
+ }
+ },
+ dataZoom: {
+ borderColor: '#71708A',
+ textStyle: {
+ color: contrastColor
+ },
+ brushStyle: {
+ color: 'rgba(135,163,206,0.3)'
+ },
+ handleStyle: {
+ color: '#353450',
+ borderColor: '#C5CBE3'
+ },
+ moveHandleStyle: {
+ color: '#B0B6C3',
+ opacity: 0.3
+ },
+ fillerColor: 'rgba(135,163,206,0.2)',
+ emphasis: {
+ handleStyle: {
+ borderColor: '#91B7F2',
+ color: '#4D587D'
+ },
+ moveHandleStyle: {
+ color: '#636D9A',
+ opacity: 0.7
+ }
+ },
+ dataBackground: {
+ lineStyle: {
+ color: '#71708A',
+ width: 1
+ },
+ areaStyle: {
+ color: '#71708A'
+ }
+ },
+ selectedDataBackground: {
+ lineStyle: {
+ color: '#87A3CE'
+ },
+ areaStyle: {
+ color: '#87A3CE'
+ }
+ }
+ },
+ visualMap: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ timeline: {
+ lineStyle: {
+ color: contrastColor
+ },
+ label: {
+ color: contrastColor
+ },
+ controlStyle: {
+ color: contrastColor,
+ borderColor: contrastColor
+ }
+ },
+ calendar: {
+ itemStyle: {
+ color: backgroundColor
+ },
+ dayLabel: {
+ color: contrastColor
+ },
+ monthLabel: {
+ color: contrastColor
+ },
+ yearLabel: {
+ color: contrastColor
+ }
+ },
+ timeAxis: axisCommon(),
+ logAxis: axisCommon(),
+ valueAxis: axisCommon(),
+ categoryAxis: axisCommon(),
+
+ line: {
+ symbol: 'circle'
+ },
+ graph: {
+ color: colorPalette
+ },
+ gauge: {
+ title: {
+ color: contrastColor
+ }
+ },
+ candlestick: {
+ itemStyle: {
+ color: '#FD1050',
+ color0: '#0CF49B',
+ borderColor: '#FD1050',
+ borderColor0: '#0CF49B'
+ }
+ }
+ };
+
+ theme.categoryAxis.splitLine.show = false;
+ echarts.registerTheme('dark', theme);
+});
diff --git a/src/rust/lqosd/src/node_manager/static2/vendor/echarts_macarons.js b/src/rust/lqosd/src/node_manager/static2/vendor/echarts_macarons.js
new file mode 100644
index 00000000..27c9f9a3
--- /dev/null
+++ b/src/rust/lqosd/src/node_manager/static2/vendor/echarts_macarons.js
@@ -0,0 +1,242 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+(function(root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ // AMD. Register as an anonymous module.
+ define(['exports', 'echarts'], factory);
+ } else if (
+ typeof exports === 'object' &&
+ typeof exports.nodeName !== 'string'
+ ) {
+ // CommonJS
+ factory(exports, require('echarts/lib/echarts'));
+ } else {
+ // Browser globals
+ factory({}, root.echarts);
+ }
+})(this, function(exports, echarts) {
+ var log = function(msg) {
+ if (typeof console !== 'undefined') {
+ console && console.error && console.error(msg);
+ }
+ };
+ if (!echarts) {
+ log('ECharts is not Loaded');
+ return;
+ }
+
+ var colorPalette = [
+ '#2ec7c9',
+ '#b6a2de',
+ '#5ab1ef',
+ '#ffb980',
+ '#d87a80',
+ '#8d98b3',
+ '#e5cf0d',
+ '#97b552',
+ '#95706d',
+ '#dc69aa',
+ '#07a2a4',
+ '#9a7fd1',
+ '#588dd5',
+ '#f5994e',
+ '#c05050',
+ '#59678c',
+ '#c9ab00',
+ '#7eb00a',
+ '#6f5553',
+ '#c14089'
+ ];
+
+ var theme = {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#008acd'
+ }
+ },
+
+ visualMap: {
+ itemWidth: 15,
+ color: ['#5ab1ef', '#e0ffff']
+ },
+
+ toolbox: {
+ iconStyle: {
+ borderColor: colorPalette[0]
+ }
+ },
+
+ tooltip: {
+ borderWidth: 0,
+ backgroundColor: 'rgba(50,50,50,0.5)',
+ textStyle: {
+ color: '#FFF'
+ },
+ axisPointer: {
+ type: 'line',
+ lineStyle: {
+ color: '#008acd'
+ },
+ crossStyle: {
+ color: '#008acd'
+ },
+ shadowStyle: {
+ color: 'rgba(200,200,200,0.2)'
+ }
+ }
+ },
+
+ dataZoom: {
+ dataBackgroundColor: '#efefff',
+ fillerColor: 'rgba(182,162,222,0.2)',
+ handleColor: '#008acd'
+ },
+
+ grid: {
+ borderColor: '#eee'
+ },
+
+ categoryAxis: {
+ axisLine: {
+ lineStyle: {
+ color: '#008acd'
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: ['#eee']
+ }
+ }
+ },
+
+ valueAxis: {
+ axisLine: {
+ lineStyle: {
+ color: '#008acd'
+ }
+ },
+ splitArea: {
+ show: true,
+ areaStyle: {
+ color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: ['#eee']
+ }
+ }
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#008acd'
+ },
+ controlStyle: {
+ color: '#008acd',
+ borderColor: '#008acd'
+ },
+ symbol: 'emptyCircle',
+ symbolSize: 3
+ },
+
+ line: {
+ smooth: true,
+ symbol: 'emptyCircle',
+ symbolSize: 3
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#d87a80',
+ color0: '#2ec7c9'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#d87a80',
+ color0: '#2ec7c9'
+ },
+ areaStyle: {
+ color: '#2ec7c9',
+ color0: '#b6a2de'
+ }
+ },
+
+ scatter: {
+ symbol: 'circle',
+ symbolSize: 4
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ddd'
+ },
+ areaStyle: {
+ color: '#fe994e'
+ },
+ label: {
+ color: '#d87a80'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#d87a80'
+ },
+ linkStyle: {
+ color: '#2ec7c9'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#2ec7c9'],
+ [0.8, '#5ab1ef'],
+ [1, '#d87a80']
+ ],
+ width: 10
+ }
+ },
+ axisTick: {
+ splitNumber: 10,
+ length: 15,
+ lineStyle: {
+ color: 'auto'
+ }
+ },
+ splitLine: {
+ length: 22,
+ lineStyle: {
+ color: 'auto'
+ }
+ },
+ pointer: {
+ width: 5
+ }
+ }
+ };
+
+ echarts.registerTheme('macarons', theme);
+});