denozord/telemt-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance chart components with improved hover effects and color consistency
Publish telemt-api gateway Docker image / test (push) Successful in 28s
Details
Publish telemt-api gateway Docker image / build-and-push (push) Successful in 2m16s
Details

Browse Source 
- Updated background and hover colors for doughnut and bar charts in both fleet and mihomo components to use defined color variables for better maintainability.
- Added hover background and border colors for data points in line charts to enhance user interaction.
- Improved overall visual consistency across chart components by standardizing color usage.
This commit is contained in:
Denozordec
2026-03-31 21:11:39 +07:00
parent edd0d7c25e
commit 81331dd406
2 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/fleet/fleet-overview-charts.svelte
+9 -6
View File
@@ -34,6 +34,8 @@
const legend = chartLegendColor();
chartDonut?.destroy();
const hole = readCssVar('--card') || readCssVar('--background') || '#18181b';
const okColor = chartColorWithAlpha(colors[1] ?? '#22c55e', 0.88);
const degradedColor = chartColorWithAlpha(colors[4] ?? '#ef4444', 0.88);
chartDonut = new Chart(elDonut, {
type: 'doughnut',
data: {
@@ -41,14 +43,13 @@
datasets: [
{
data: [Math.max(nodesOk, 0), Math.max(nodesDegraded, 0)],
backgroundColor: [
chartColorWithAlpha(colors[1] ?? '#22c55e', 0.88),
chartColorWithAlpha(colors[4] ?? '#ef4444', 0.88)
],
backgroundColor: [okColor, degradedColor],
hoverBackgroundColor: [okColor, degradedColor],
borderWidth: 2,
borderColor: hole,
hoverBorderWidth: 2,
hoverBorderColor: hole
hoverBorderColor: hole,
hoverOffset: 4
}
]
},
@@ -68,6 +69,7 @@
const tickC = chartTickColor();
const grid = chartGridColor();
const slice = topUsers.slice(0, 8);
const barColor = chartColorWithAlpha(colors[0] ?? '#6366f1', 0.52);
chartBar?.destroy();
chartBar = new Chart(elBar, {
type: 'bar',
@@ -77,7 +79,8 @@
{
label: 'MiB',
data: slice.map((x) => x.total_megabytes),
backgroundColor: chartColorWithAlpha(colors[0] ?? '#6366f1', 0.52),
backgroundColor: barColor,
hoverBackgroundColor: barColor,
borderRadius: 4,
borderSkipped: false
}
web/src/lib/components/mihomo/mihomo-overview-charts.svelte
+23 -11
View File
@@ -94,6 +94,8 @@
borderWidth: 1.5,
pointRadius: 0,
pointHoverRadius: 3,
pointHoverBackgroundColor: c0,
pointHoverBorderColor: c0,
tension: 0.2,
fill: true
},
@@ -105,6 +107,8 @@
borderWidth: 1.5,
pointRadius: 0,
pointHoverRadius: 3,
pointHoverBackgroundColor: c4,
pointHoverBorderColor: c4,
tension: 0.2,
fill: true
}
@@ -117,6 +121,8 @@
if (elFlow) {
chartFlow?.destroy();
const hole = readCssVar('--card') || readCssVar('--background') || '#18181b';
const downColor = chartColorWithAlpha(colors[0] ?? '#38bdf8', 0.88);
const upColor = chartColorWithAlpha(colors[4] ?? '#f472b6', 0.88);
chartFlow = new Chart(elFlow, {
type: 'doughnut',
data: {
@@ -124,14 +130,13 @@
datasets: [
{
data: [Math.max(totalDown, 0), Math.max(totalUp, 0)],
backgroundColor: [
chartColorWithAlpha(colors[0] ?? '#38bdf8', 0.88),
chartColorWithAlpha(colors[4] ?? '#f472b6', 0.88)
],
backgroundColor: [downColor, upColor],
hoverBackgroundColor: [downColor, upColor],
borderWidth: 2,
borderColor: hole,
hoverBorderWidth: 2,
hoverBorderColor: hole
hoverBorderColor: hole,
hoverOffset: 4
}
]
},
@@ -161,6 +166,8 @@
borderWidth: 1.5,
pointRadius: 0,
pointHoverRadius: 3,
pointHoverBackgroundColor: c2,
pointHoverBorderColor: c2,
tension: 0.2,
fill: true
}
@@ -186,6 +193,8 @@
borderWidth: 1.5,
pointRadius: 0,
pointHoverRadius: 3,
pointHoverBackgroundColor: c1,
pointHoverBorderColor: c1,
tension: 0.2,
fill: true
}
@@ -198,6 +207,8 @@
if (elNet) {
chartNet?.destroy();
const holeNet = readCssVar('--card') || readCssVar('--background') || '#18181b';
const tcpColor = chartColorWithAlpha(colors[1] ?? '#22c55e', 0.88);
const udpColor = chartColorWithAlpha(colors[3] ?? '#eab308', 0.88);
chartNet = new Chart(elNet, {
type: 'doughnut',
data: {
@@ -205,14 +216,13 @@
datasets: [
{
data: [tcpN, udpN],
backgroundColor: [
chartColorWithAlpha(colors[1] ?? '#22c55e', 0.88),
chartColorWithAlpha(colors[3] ?? '#eab308', 0.88)
],
backgroundColor: [tcpColor, udpColor],
hoverBackgroundColor: [tcpColor, udpColor],
borderWidth: 2,
borderColor: holeNet,
hoverBorderWidth: 2,
hoverBorderColor: holeNet
hoverBorderColor: holeNet,
hoverOffset: 4
}
]
},
@@ -228,6 +238,7 @@
if (elTop) {
chartTop?.destroy();
const topBarColor = chartColorWithAlpha(colors[0] ?? '#818cf8', 0.52);
chartTop = new Chart(elTop, {
type: 'bar',
data: {
@@ -236,7 +247,8 @@
{
label: 'Сессии',
data: topList.map((x) => x.n),
backgroundColor: chartColorWithAlpha(colors[0] ?? '#818cf8', 0.52),
backgroundColor: topBarColor,
hoverBackgroundColor: topBarColor,
borderRadius: 4,
borderSkipped: false
}