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

* 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

View File

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