From 55664872bd9d9e2b3fbcce747c55ca7dffa4a717 Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat@signoz.io>
Date: Wed, 13 Dec 2023 16:26:25 +0530
Subject: [PATCH] [Feat]: only clicked legend graph visible (#4226)

* refactor: only clicked legend graph visible

* refactor: fix graph manage toggle issue
---
 .../src/lib/uPlotLib/getUplotChartOptions.ts    | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
index 3a5ec4b2c6..354deb0b5a 100644
--- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
+++ b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
@@ -55,6 +55,7 @@ export const getUPlotChartOptions = ({
 		legend: {
 			show: true,
 			live: false,
+			isolate: true,
 		},
 		focus: {
 			alpha: 0.3,
@@ -158,16 +159,24 @@ export const getUPlotChartOptions = ({
 				(self): void => {
 					const legend = self.root.querySelector('.u-legend');
 					if (legend) {
-						const seriesEls = legend.querySelectorAll('.u-label');
+						const seriesEls = legend.querySelectorAll('.u-series');
 						const seriesArray = Array.from(seriesEls);
 						seriesArray.forEach((seriesEl, index) => {
 							seriesEl.addEventListener('click', () => {
 								if (graphsVisibilityStates) {
 									setGraphsVisibilityStates?.((prev) => {
 										const newGraphVisibilityStates = [...prev];
-										newGraphVisibilityStates[index + 1] = !newGraphVisibilityStates[
-											index + 1
-										];
+										if (
+											newGraphVisibilityStates[index + 1] &&
+											newGraphVisibilityStates.every((value, i) =>
+												i === index + 1 ? value : !value,
+											)
+										) {
+											newGraphVisibilityStates.fill(true);
+										} else {
+											newGraphVisibilityStates.fill(false);
+											newGraphVisibilityStates[index + 1] = true;
+										}
 										return newGraphVisibilityStates;
 									});
 								}