chore: some tsc fix

frontend/src/components/NotFound/NotFound.test.tsx

@@ -1,3 +1,4 @@
+import { expect } from '@jest/globals';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';

frontend/src/components/Styled/types.ts

@@ -1,5 +1,5 @@
 import { FlattenSimpleInterpolation } from 'styled-components';
 
 export interface IStyledClass {
-	styledclass?: FlattenSimpleInterpolation[];
+	styledclass: FlattenSimpleInterpolation[];
 }

frontend/src/container/GantChart/SpanLength/index.tsx

@@ -33,7 +33,7 @@ function SpanLength(props: SpanLengthProps): JSX.Element {
 				leftOffset={leftOffset}
 				width={width}
 			/>
-			<SpanText leftOffset={leftOffset}>{`${toFixed(
+			<SpanText isDarkMode={isDarkMode} leftOffset={leftOffset}>{`${toFixed(
 				resolveTimeFromInterval(inMsCount, intervalUnit),
 				2,
 			)} ${intervalUnit.name}`}</SpanText>

frontend/src/container/ListOfDashboard/index.tsx

@@ -157,7 +157,7 @@ function ListOfAllDashboard(): JSX.Element {
 								<TextToolTip
 									{...{
 										text: `More details on how to create dashboards`,
-										url: 'https://signoz.io/docs/userguide/metrics-dashboard',
+										url: 'https://signoz.io/docs/userguide/dashboards',
 									}}
 								/>
 

frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx

@@ -2,8 +2,8 @@ import { Button, Divider } from 'antd';
 import Input from 'components/Input';
 import TextToolTip from 'components/TextToolTip';
 import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
-import React, { useCallback, useState } from 'react';
-import { connect } from 'react-redux';
+import React, { useCallback, useMemo, useState } from 'react';
+import { connect, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -12,8 +12,11 @@ import {
 	UpdateQuery,
 	UpdateQueryProps,
 } from 'store/actions/dashboard/updateQuery';
+import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { DeleteQueryProps } from 'types/actions/dashboard';
+import { Widgets } from 'types/api/dashboard/getAll';
+import DashboardReducer from 'types/reducer/dashboards';
 
 import {
 	ButtonContainer,
@@ -32,10 +35,27 @@ function Query({
 	const [promqlQuery, setPromqlQuery] = useState(preQuery);
 	const [legendFormat, setLegendFormat] = useState(preLegend);
 	const { search } = useLocation();
+	const { dashboards } = useSelector<AppState, DashboardReducer>(
+		(state) => state.dashboards,
+	);
+
+	const [selectedDashboards] = dashboards;
+	const { widgets } = selectedDashboards.data;
 
 	const query = new URLSearchParams(search);
 	const widgetId = query.get('widgetId') || '';
 
+	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 onChangeHandler = useCallback(
 		(setFunc: React.Dispatch<React.SetStateAction<string>>, value: string) => {
 			setFunc(value);
@@ -49,6 +69,7 @@ function Query({
 			legend: legendFormat,
 			query: promqlQuery,
 			widgetId,
+			yAxisUnit: selectedWidget.yAxisUnit,
 		});
 	};
 

frontend/src/container/Trace/Graph/index.tsx

@@ -43,7 +43,7 @@ function TraceGraph(): JSX.Element {
 	}
 
 	return (
-		<Container ref={ref}>
+		<Container ref={ref as never}>
 			<Graph
 				animate={false}
 				data={ChartData}

frontend/src/hooks/useFetch.ts

@@ -56,7 +56,7 @@ function useFetch<PayloadProps, FunctionParams>(
 				loading: false,
 				success: false,
 				error: true,
-				errorMessage: error,
+				errorMessage: error as string,
 			});
 		}
 		return (): void => {

frontend/src/lib/__tests__/getStep.test.ts

@@ -1,3 +1,4 @@
+import { expect } from '@jest/globals';
 import dayjs from 'dayjs';
 import getStep, { DefaultStepSize } from 'lib/getStep';
 

frontend/src/pages/DashboardWidget/index.tsx

@@ -74,7 +74,12 @@ function DashboardWidget({ getDashboard }: NewDashboardProps): JSX.Element {
 		);
 	}
 
-	return <NewWidget selectedGraph={selectedGraph} />;
+	return (
+		<NewWidget
+			yAxisUnit={selectedWidget.yAxisUnit}
+			selectedGraph={selectedGraph}
+		/>
+	);
 }
 
 export interface DashboardWidgetPageParams {