External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-28 15:48:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: added graph visibilty in panel edit mode also

Browse Source
This commit is contained in:
SagarRajput-7 2025-05-26 06:14:50 +05:30
parent 89c77676ee
commit 717c7e77a5
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
View File

@ -1,4 +1,5 @@
import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
import { ToggleGraphProps } from 'components/Graph/types';
import { QueryParams } from 'constants/query';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { handleGraphClick } from 'container/GridCardLayout/GridCard/utils';
@ -19,6 +20,7 @@ import {
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { UseQueryResult } from 'react-query';
import { useDispatch } from 'react-redux';
@ -36,11 +38,35 @@ function WidgetGraph({
selectedGraph,
}: WidgetGraphProps): JSX.Element {
const graphRef = useRef<HTMLDivElement>(null);
const lineChartRef = useRef<ToggleGraphProps>();
const dispatch = useDispatch();
const urlQuery = useUrlQuery();
const location = useLocation();
const { safeNavigate } = useSafeNavigate();
// Add legend state management similar to dashboard components
const [graphVisibility, setGraphVisibility] = useState<boolean[]>(
Array(queryResponse.data?.payload?.data?.result?.length || 0).fill(true),
);
// Initialize graph visibility when data changes
useEffect(() => {
if (queryResponse.data?.payload?.data?.result) {
setGraphVisibility(
Array(queryResponse.data.payload.data.result.length).fill(true),
);
}
}, [queryResponse.data?.payload?.data?.result]);
// Apply graph visibility when lineChartRef is available
useEffect(() => {
if (!lineChartRef.current) return;
graphVisibility.forEach((state, index) => {
lineChartRef.current?.toggleGraph(index, state);
});
}, [graphVisibility]);
const handleBackNavigation = (): void => {
const searchParams = new URLSearchParams(window.location.search);
const startTime = searchParams.get(QueryParams.startTime);
@ -154,6 +180,8 @@ function WidgetGraph({
onDragSelect={onDragSelect}
selectedGraph={selectedGraph}
onClickHandler={graphClickHandler}
graphVisibility={graphVisibility}
setGraphVisibility={setGraphVisibility}
/>
</div>
);