GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-18 03:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

[feat]: persistence of graph toggle on variable change (#4316)

Browse Source 
* feat: persistence of graph toggle on variable change

* fix: reverted the previous changes

* chore: full view global time selector to right
This commit is contained in:
Rajat Dabade 2024-01-18 23:22:30 +05:30 committed by GitHub
parent 0c1a500142
commit 46559014f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/container/FullViewHeader/FullViewHeader.styles.scss
View File

@ -1,6 +1,6 @@
.full-view-header-container {
display: flex;
justify-content: center;
justify-content: flex-end;
align-items: center;
padding: 24px 0;

5
frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
View File

@ -46,6 +46,7 @@ function WidgetGraphComponent({
data,
options,
onDragSelect,
graphVisibility,
}: WidgetGraphComponentProps): JSX.Element {
const [deleteModal, setDeleteModal] = useState(false);
const [hovered, setHovered] = useState(false);
@ -83,6 +84,10 @@ function WidgetGraphComponent({
setGraphsVisibilityStates(localStoredVisibilityStates);
}, [localStoredVisibilityStates]);
graphVisibility?.forEach((state, index) => {
lineChartRef.current?.toggleGraph(index, state);
});
const { setLayouts, selectedDashboard, setSelectedDashboard } = useDashboard();
const featureResponse = useSelector<AppState, AppReducer['featureResponse']>(

16
frontend/src/container/GridCardLayout/GridCard/index.tsx
View File

@ -163,6 +163,17 @@ function GridCardGraph({
? headerMenuList.filter((menu) => menu !== MenuItemKeys.CreateAlerts)
: headerMenuList;
const [graphVisibility, setGraphVisibility] = useState<boolean[]>(
Array(queryResponse.data?.payload?.data.result.length || 0).fill(true),
);
useEffect(() => {
setGraphVisibility([
true,
...Array(queryResponse.data?.payload?.data.result.length).fill(true),
]);
}, [queryResponse.data?.payload?.data.result.length]);
const options = useMemo(
() =>
getUPlotChartOptions({
@ -178,6 +189,8 @@ function GridCardGraph({
maxTimeScale,
softMax: widget.softMax === undefined ? null : widget.softMax,
softMin: widget.softMin === undefined ? null : widget.softMin,
graphsVisibilityStates: graphVisibility,
setGraphsVisibilityStates: setGraphVisibility,
}),
[
widget?.id,
@ -192,6 +205,8 @@ function GridCardGraph({
onClickHandler,
minTimeScale,
maxTimeScale,
graphVisibility,
setGraphVisibility,
],
);
@ -212,6 +227,7 @@ function GridCardGraph({
threshold={threshold}
headerMenuList={menuList}
onClickHandler={onClickHandler}
graphVisibility={graphVisibility}
/>
)}
</div>

1
frontend/src/container/GridCardLayout/GridCard/types.ts
View File

@ -28,6 +28,7 @@ export interface WidgetGraphComponentProps extends UplotProps {
threshold?: ReactNode;
headerMenuList: MenuItemKeys[];
isWarning: boolean;
graphVisibility?: boolean[];
}
export interface GridCardGraphProps {