diff --git a/frontend/src/container/FullViewHeader/FullViewHeader.styles.scss b/frontend/src/container/FullViewHeader/FullViewHeader.styles.scss index b894ea4f12..98f2897902 100644 --- a/frontend/src/container/FullViewHeader/FullViewHeader.styles.scss +++ b/frontend/src/container/FullViewHeader/FullViewHeader.styles.scss @@ -1,6 +1,6 @@ .full-view-header-container { display: flex; - justify-content: center; + justify-content: flex-end; align-items: center; padding: 24px 0; diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx index 4fdbc05be7..34288a0b19 100644 --- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx +++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx @@ -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( diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx index cf8d106224..c1c1f99c93 100644 --- a/frontend/src/container/GridCardLayout/GridCard/index.tsx +++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx @@ -163,6 +163,17 @@ function GridCardGraph({ ? headerMenuList.filter((menu) => menu !== MenuItemKeys.CreateAlerts) : headerMenuList; + const [graphVisibility, setGraphVisibility] = useState( + 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} /> )} diff --git a/frontend/src/container/GridCardLayout/GridCard/types.ts b/frontend/src/container/GridCardLayout/GridCard/types.ts index 3674817291..2298b2b070 100644 --- a/frontend/src/container/GridCardLayout/GridCard/types.ts +++ b/frontend/src/container/GridCardLayout/GridCard/types.ts @@ -28,6 +28,7 @@ export interface WidgetGraphComponentProps extends UplotProps { threshold?: ReactNode; headerMenuList: MenuItemKeys[]; isWarning: boolean; + graphVisibility?: boolean[]; } export interface GridCardGraphProps {