IntenseWebs/LibreQoS
3
0
Fork 0
mirror of https://github.com/LibreQoE/LibreQoS.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Support echarts themes.

Browse Source
This commit is contained in:
Herbert Wolverson
2024-07-18 09:02:55 -05:00
parent 21a1c48dca
commit da8a06bcb0
6 changed files with 514 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,12 @@
import {isDarkMode} from "../helpers/dark_mode";
export class DashboardGraph { export class DashboardGraph {
constructor(id) { constructor(id) {
let theme = "macarons";
if (isDarkMode()) theme = "dark";
this.id = id; this.id = id;
this.dom = document.getElementById(id); this.dom = document.getElementById(id);
this.chart = echarts.init(this.dom); this.chart = echarts.init(this.dom, theme);
this.chart.showLoading(); this.chart.showLoading();
this.option = {}; this.option = {};
} }

39
src/rust/lqosd/src/node_manager/js_build/src/helpers/dark_mode.js Normal file
View File

@@ -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';
}

40
src/rust/lqosd/src/node_manager/js_build/src/template.js
View File

@@ -1,44 +1,6 @@
import {clearDiv} from "./helpers/builders"; import {clearDiv} from "./helpers/builders";
import {initRedact} from "./helpers/redact"; import {initRedact} from "./helpers/redact";
import {initDayNightMode} from "./helpers/dark_mode";
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();
}
});
});
}
function getDeviceCounts() { function getDeviceCounts() {
$.get("/local-api/deviceCount", (data) => { $.get("/local-api/deviceCount", (data) => {

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

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

225
src/rust/lqosd/src/node_manager/static2/vendor/echarts_dark.js vendored Normal file
View File

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

242
src/rust/lqosd/src/node_manager/static2/vendor/echarts_macarons.js vendored Normal file
View File

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