(
+ (state) => state.dashboards,
+ );
+ const [selectedDashboards] = dashboards;
+ const { search } = useLocation();
+ const widgets = selectedDashboards.data.widgets;
+
+ const urlQuery = useMemo(() => {
+ return new URLSearchParams(search);
+ }, [search]);
+
+ const getWidget = useCallback(() => {
+ const widgetId = urlQuery.get('widgetId');
+ return widgets?.find((e) => e.id === widgetId);
+ }, [widgets, urlQuery]);
+
+ const selectedWidget = getWidget() as Widgets;
+
+ const { query = [] } = selectedWidget || {};
+
+ const queryOnClickHandler = useCallback(() => {
+ const widgetId = urlQuery.get('widgetId');
+
+ createQuery({
+ widgetId: String(widgetId),
+ });
+ }, [createQuery, urlQuery]);
+
+ if (query.length === 0) {
+ return ;
+ }
+
+ return (
+
+ {query.map((e, index) => (
+
+ ))}
+
+ }>
+ Query
+
+
+ );
+};
+
+interface DispatchProps {
+ createQuery: ({
+ widgetId,
+ }: CreateQueryProps) => (dispatch: Dispatch) => void;
+}
+
+const mapDispatchToProps = (
+ dispatch: ThunkDispatch,
+): DispatchProps => ({
+ createQuery: bindActionCreators(CreateQuery, dispatch),
+});
+
+interface QueryProps extends DispatchProps {
+ selectedTime: timePreferance;
+}
+
+export default connect(null, mapDispatchToProps)(QuerySection);
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/styles.ts b/frontend/src/container/NewWidget/LeftContainer/QuerySection/styles.ts
new file mode 100644
index 0000000000..6e63558615
--- /dev/null
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/styles.ts
@@ -0,0 +1,17 @@
+import { Button } from 'antd';
+import styled from 'styled-components';
+
+export const InputContainer = styled.div`
+ width: 50%;
+`;
+
+export const Container = styled.div`
+ margin-top: 1rem;
+`;
+
+export const QueryButton = styled(Button)`
+ &&& {
+ display: flex;
+ align-items: center;
+ }
+`;
diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.tsx
new file mode 100644
index 0000000000..dad79914b3
--- /dev/null
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.tsx
@@ -0,0 +1,59 @@
+import { Card, Typography } from 'antd';
+import GridGraphComponent from 'container/GridGraphComponent';
+import { NewWidgetProps } from 'container/NewWidget';
+import getChartData from 'lib/getChartData';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router';
+import { AppState } from 'store/reducers';
+import DashboardReducer from 'types/reducer/dashboards';
+
+import { NotFoundContainer } from './styles';
+
+const WidgetGraph = ({ selectedGraph }: WidgetGraphProps): JSX.Element => {
+ const { dashboards } = useSelector(
+ (state) => state.dashboards,
+ );
+
+ const [selectedDashboard] = dashboards;
+ const { data } = selectedDashboard;
+ const { widgets = [] } = data;
+ const { search } = useLocation();
+
+ const params = new URLSearchParams(search);
+ const widgetId = params.get('widgetId');
+
+ const selectedWidget = widgets.find((e) => e.id === widgetId);
+
+ if (selectedWidget === undefined) {
+ return Invalid widget;
+ }
+
+ const { queryData, title, opacity, isStacked } = selectedWidget;
+
+ if (queryData.data.length === 0) {
+ return (
+
+ No Data
+
+ );
+ }
+
+ const chartDataSet = getChartData({
+ queryData,
+ });
+
+ return (
+
+ );
+};
+
+type WidgetGraphProps = NewWidgetProps;
+
+export default WidgetGraph;
diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
new file mode 100644
index 0000000000..d844862875
--- /dev/null
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
@@ -0,0 +1,57 @@
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
+import { Card } from 'container/GridGraphLayout/styles';
+import React, { memo } from 'react';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { AppState } from 'store/reducers';
+import DashboardReducer from 'types/reducer/dashboards';
+
+import { NewWidgetProps } from '../../index';
+import { AlertIconContainer, Container, NotFoundContainer } from './styles';
+import WidgetGraphComponent from './WidgetGraph';
+
+const WidgetGraph = ({ selectedGraph }: WidgetGraphProps): JSX.Element => {
+ const { dashboards, isQueryFired } = useSelector(
+ (state) => state.dashboards,
+ );
+ const [selectedDashboard] = dashboards;
+ const { search } = useLocation();
+
+ const { data } = selectedDashboard;
+
+ const { widgets = [] } = data;
+
+ const params = new URLSearchParams(search);
+ const widgetId = params.get('widgetId');
+
+ const selectedWidget = widgets.find((e) => e.id === widgetId);
+
+ if (selectedWidget === undefined) {
+ return Invalid widget;
+ }
+
+ const { queryData } = selectedWidget;
+
+ return (
+
+ {queryData.error && (
+
+
+
+ )}
+
+ {!isQueryFired && (
+
+ No Data
+
+ )}
+
+ {isQueryFired && }
+
+ );
+};
+
+type WidgetGraphProps = NewWidgetProps;
+
+export default memo(WidgetGraph);
diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts
new file mode 100644
index 0000000000..b376f0d247
--- /dev/null
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts
@@ -0,0 +1,27 @@
+import { Card, Tooltip } from 'antd';
+import styled from 'styled-components';
+
+export const Container = styled(Card)`
+ &&& {
+ position: relative;
+ }
+
+ .ant-card-body {
+ padding: 0;
+ height: 55vh;
+ /* padding-bottom: 2rem; */
+ }
+`;
+
+export const AlertIconContainer = styled(Tooltip)`
+ position: absolute;
+ top: 10px;
+ left: 10px;
+`;
+
+export const NotFoundContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 55vh;
+`;
diff --git a/frontend/src/container/NewWidget/LeftContainer/index.tsx b/frontend/src/container/NewWidget/LeftContainer/index.tsx
new file mode 100644
index 0000000000..58b2c8f3ab
--- /dev/null
+++ b/frontend/src/container/NewWidget/LeftContainer/index.tsx
@@ -0,0 +1,28 @@
+import React, { memo } from 'react';
+
+import { NewWidgetProps } from '../index';
+import { timePreferance } from '../RightContainer/timeItems';
+import QuerySection from './QuerySection';
+import { QueryContainer } from './styles';
+import WidgetGraph from './WidgetGraph';
+
+const LeftContainer = ({
+ selectedGraph,
+ selectedTime,
+}: LeftContainerProps): JSX.Element => {
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
+
+interface LeftContainerProps extends NewWidgetProps {
+ selectedTime: timePreferance;
+}
+
+export default memo(LeftContainer);
diff --git a/frontend/src/container/NewWidget/LeftContainer/styles.ts b/frontend/src/container/NewWidget/LeftContainer/styles.ts
new file mode 100644
index 0000000000..4d1988a4e1
--- /dev/null
+++ b/frontend/src/container/NewWidget/LeftContainer/styles.ts
@@ -0,0 +1,9 @@
+import { Card } from 'antd';
+import styled from 'styled-components';
+
+export const QueryContainer = styled(Card)`
+ &&& {
+ margin-top: 1rem;
+ min-height: 23.5%;
+ }
+`;
diff --git a/frontend/src/container/NewWidget/RightContainer/index.tsx b/frontend/src/container/NewWidget/RightContainer/index.tsx
new file mode 100644
index 0000000000..651725459e
--- /dev/null
+++ b/frontend/src/container/NewWidget/RightContainer/index.tsx
@@ -0,0 +1,157 @@
+import { Button, Input, Slider, Switch, Typography } from 'antd';
+import InputComponent from 'components/Input';
+import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
+import GraphTypes from 'container/NewDashboard/ComponentsSlider/menuItems';
+import React, { useCallback } from 'react';
+
+import { timePreferance } from './timeItems';
+
+const { TextArea } = Input;
+import TimePreference from 'components/TimePreferenceDropDown';
+
+import { Container, NullButtonContainer, TextContainer, Title } from './styles';
+
+const RightContainer = ({
+ description,
+ opacity,
+ selectedNullZeroValue,
+ setDescription,
+ setOpacity,
+ setSelectedNullZeroValue,
+ setStacked,
+ setTitle,
+ stacked,
+ title,
+ selectedGraph,
+ setSelectedTime,
+ selectedTime,
+}: RightContainerProps): JSX.Element => {
+ const onChangeHandler = useCallback(
+ (setFunc: React.Dispatch>, value: string) => {
+ setFunc(value);
+ },
+ [],
+ );
+
+ const nullValueButtons = [
+ {
+ check: 'zero',
+ name: 'Zero',
+ },
+ {
+ check: 'interpolate',
+ name: 'Interpolate',
+ },
+ {
+ check: 'blank',
+ name: 'Blank',
+ },
+ ];
+
+ const selectedGraphType =
+ GraphTypes.find((e) => e.name === selectedGraph)?.display || '';
+
+ return (
+
+
+
+ Panel Attributes
+
+
+ onChangeHandler(setTitle, event.target.value)
+ }
+ value={title}
+ />
+
+ Description
+
+