GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 06:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[Feat]: only clicked legend graph visible (#4226)

Browse Source 
* refactor: only clicked legend graph visible

* refactor: fix graph manage toggle issue
This commit is contained in:
Rajat Dabade 2023-12-13 16:26:25 +05:30 committed by GitHub
parent 221861230a
commit 55664872bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/lib/uPlotLib/getUplotChartOptions.ts
View File

@ -55,6 +55,7 @@ export const getUPlotChartOptions = ({
legend: { legend: {
show: true, show: true,
live: false, live: false,
isolate: true,
}, },
focus: { focus: {
alpha: 0.3, alpha: 0.3,
@ -158,16 +159,24 @@ export const getUPlotChartOptions = ({
(self): void => { (self): void => {
const legend = self.root.querySelector('.u-legend'); const legend = self.root.querySelector('.u-legend');
if (legend) { if (legend) {
const seriesEls = legend.querySelectorAll('.u-label'); const seriesEls = legend.querySelectorAll('.u-series');
const seriesArray = Array.from(seriesEls); const seriesArray = Array.from(seriesEls);
seriesArray.forEach((seriesEl, index) => { seriesArray.forEach((seriesEl, index) => {
seriesEl.addEventListener('click', () => { seriesEl.addEventListener('click', () => {
if (graphsVisibilityStates) { if (graphsVisibilityStates) {
setGraphsVisibilityStates?.((prev) => { setGraphsVisibilityStates?.((prev) => {
const newGraphVisibilityStates = [...prev]; const newGraphVisibilityStates = [...prev];
newGraphVisibilityStates[index + 1] = !newGraphVisibilityStates[ if (
index + 1 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; return newGraphVisibilityStates;
}); });
} }