From 81331dd40685c4a309adeba973787d6fad6659c7 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 31 Mar 2026 21:11:39 +0700
Subject: [PATCH] Enhance chart components with improved hover effects and
 color consistency

- 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.
---
 .../fleet/fleet-overview-charts.svelte        | 15 ++++----
 .../mihomo/mihomo-overview-charts.svelte      | 34 +++++++++++++------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/components/fleet/fleet-overview-charts.svelte b/web/src/lib/components/fleet/fleet-overview-charts.svelte
index 3101902..7becf5e 100644
--- a/web/src/lib/components/fleet/fleet-overview-charts.svelte
+++ b/web/src/lib/components/fleet/fleet-overview-charts.svelte
@@ -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
 					}
diff --git a/web/src/lib/components/mihomo/mihomo-overview-charts.svelte b/web/src/lib/components/mihomo/mihomo-overview-charts.svelte
index d650eda..ed8c4e3 100644
--- a/web/src/lib/components/mihomo/mihomo-overview-charts.svelte
+++ b/web/src/lib/components/mihomo/mihomo-overview-charts.svelte
@@ -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
 						}