diff --git a/frontend/src/container/TimeSeriesView/TimeSeriesView.tsx b/frontend/src/container/TimeSeriesView/TimeSeriesView.tsx
index ca01a0156c..6824b23995 100644
--- a/frontend/src/container/TimeSeriesView/TimeSeriesView.tsx
+++ b/frontend/src/container/TimeSeriesView/TimeSeriesView.tsx
@@ -11,6 +11,7 @@ function TimeSeriesView({
data,
isLoading,
isError,
+ yAxisUnit,
}: TimeSeriesViewProps): JSX.Element {
const chartData = useMemo(
() =>
@@ -32,6 +33,7 @@ function TimeSeriesView({
@@ -42,12 +44,14 @@ function TimeSeriesView({
interface TimeSeriesViewProps {
data?: SuccessResponse;
+ yAxisUnit?: string;
isLoading: boolean;
isError: boolean;
}
TimeSeriesView.defaultProps = {
data: undefined,
+ yAxisUnit: 'short',
};
export default TimeSeriesView;
diff --git a/frontend/src/container/TimeSeriesView/index.tsx b/frontend/src/container/TimeSeriesView/index.tsx
index 5212334a4d..a0618b9960 100644
--- a/frontend/src/container/TimeSeriesView/index.tsx
+++ b/frontend/src/container/TimeSeriesView/index.tsx
@@ -2,23 +2,43 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { DataSource } from 'types/common/queryBuilder';
import { GlobalReducer } from 'types/reducer/globalTime';
import TimeSeriesView from './TimeSeriesView';
+import { convertDataValueToMs } from './utils';
function TimeSeriesViewContainer({
dataSource = DataSource.TRACES,
}: TimeSeriesViewProps): JSX.Element {
- const { stagedQuery, panelType } = useQueryBuilder();
+ const { stagedQuery, currentQuery, panelType } = useQueryBuilder();
const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
AppState,
GlobalReducer
>((state) => state.globalTime);
+ const isValidToConvertToMs = useMemo(() => {
+ const isValid: boolean[] = [];
+
+ currentQuery.builder.queryData.forEach(
+ ({ aggregateAttribute, aggregateOperator }) => {
+ const isExistDurationNanoAttribute =
+ aggregateAttribute.key === 'durationNano';
+
+ const isCountOperator =
+ aggregateOperator === 'count' || aggregateOperator === 'count_distinct';
+
+ isValid.push(!isCountOperator && isExistDurationNanoAttribute);
+ },
+ );
+
+ return isValid.every(Boolean);
+ }, [currentQuery]);
+
const { data, isLoading, isError } = useGetQueryRange(
{
query: stagedQuery || initialQueriesMap[dataSource],
@@ -41,7 +61,19 @@ function TimeSeriesViewContainer({
},
);
- return ;
+ const responseData = useMemo(
+ () => (isValidToConvertToMs ? convertDataValueToMs(data) : data),
+ [data, isValidToConvertToMs],
+ );
+
+ return (
+
+ );
}
interface TimeSeriesViewProps {
diff --git a/frontend/src/container/TimeSeriesView/utils.ts b/frontend/src/container/TimeSeriesView/utils.ts
new file mode 100644
index 0000000000..b857cf9815
--- /dev/null
+++ b/frontend/src/container/TimeSeriesView/utils.ts
@@ -0,0 +1,26 @@
+import { SuccessResponse } from 'types/api/index';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryData } from 'types/api/widgets/getQuery';
+
+export const convertDataValueToMs = (
+ data?: SuccessResponse,
+): SuccessResponse | undefined => {
+ const convertedData = data;
+
+ const convertedResult: QueryData[] = data?.payload?.data?.result
+ ? data.payload.data.result.map((item) => {
+ const values: [number, string][] = item.values.map((value) => {
+ const [first = 0, second = ''] = value || [];
+ return [first, String(Number(second) / 1000000)];
+ });
+
+ return { ...item, values };
+ })
+ : [];
+
+ if (convertedData?.payload?.data?.result && convertedResult) {
+ convertedData.payload.data.result = convertedResult;
+ }
+
+ return convertedData;
+};