From 566c2becdf36f963aec4befac3f10bda508a6ebe Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Tue, 5 Apr 2022 16:09:57 +0530
Subject: [PATCH] feat: dynamic step size for the data for graphs (#929)

* feat: dynamic step size for the data for graphs

* fix: remove console.log

* chore: add jest globals

* feat: add step size for dashboard

* chore: undo .eslintignore
---
 frontend/.eslintignore                                  | 2 +-
 frontend/src/lib/__tests__/getStep.test.ts              | 5 +++--
 frontend/src/lib/getStep.ts                             | 9 +++------
 frontend/src/modules/Usage/UsageExplorer.tsx            | 2 +-
 frontend/src/pages/Trace/index.tsx                      | 3 ++-
 frontend/src/store/actions/dashboard/getQueryResults.ts | 3 ++-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/.eslintignore b/frontend/.eslintignore
index b7dab5e9cb..dd87e2d73f 100644
--- a/frontend/.eslintignore
+++ b/frontend/.eslintignore
@@ -1,2 +1,2 @@
 node_modules
-build
\ No newline at end of file
+build
diff --git a/frontend/src/lib/__tests__/getStep.test.ts b/frontend/src/lib/__tests__/getStep.test.ts
index 399f0cfbc6..d3eaab422c 100644
--- a/frontend/src/lib/__tests__/getStep.test.ts
+++ b/frontend/src/lib/__tests__/getStep.test.ts
@@ -1,6 +1,6 @@
 import { expect } from '@jest/globals';
 import dayjs from 'dayjs';
-import getStep, { DefaultStepSize } from 'lib/getStep';
+import getStep, { DefaultStepSize, MaxDataPoints } from 'lib/getStep';
 
 describe('lib/getStep', () => {
 	test('should return default step when the given range is less than 1 day', () => {
@@ -40,7 +40,8 @@ describe('lib/getStep', () => {
 		const startUnix = start.valueOf();
 		const endUnix = end.valueOf();
 
-		const expectedStepSize = end.diff(start, 'days') * DefaultStepSize;
+		const expectedStepSize = Math.floor(end.diff(start, 's') / MaxDataPoints);
+
 		expect(
 			getStep({
 				start: startUnix / 1e3,
diff --git a/frontend/src/lib/getStep.ts b/frontend/src/lib/getStep.ts
index c7388bbe06..347f9dc332 100644
--- a/frontend/src/lib/getStep.ts
+++ b/frontend/src/lib/getStep.ts
@@ -30,6 +30,7 @@ const convertToMs = (
 };
 
 export const DefaultStepSize = 60;
+export const MaxDataPoints = 200;
 
 /**
  *	Returns relevant step size based on given start and end date.
@@ -37,13 +38,9 @@ export const DefaultStepSize = 60;
 const getStep = ({ start, end, inputFormat = 'ms' }: GetStepInput): number => {
 	const startDate = dayjs(convertToMs(Number(start), inputFormat));
 	const endDate = dayjs(convertToMs(Number(end), inputFormat));
-	const diffDays = Math.abs(endDate.diff(startDate, 'days'));
+	const diffSec = Math.abs(endDate.diff(startDate, 's'));
 
-	if (diffDays > 1) {
-		return DefaultStepSize * diffDays;
-	}
-
-	return DefaultStepSize;
+	return Math.max(Math.floor(diffSec / MaxDataPoints), DefaultStepSize);
 };
 
 export default getStep;
diff --git a/frontend/src/modules/Usage/UsageExplorer.tsx b/frontend/src/modules/Usage/UsageExplorer.tsx
index 502ae0294b..ec37b6ae33 100644
--- a/frontend/src/modules/Usage/UsageExplorer.tsx
+++ b/frontend/src/modules/Usage/UsageExplorer.tsx
@@ -84,7 +84,7 @@ function _UsageExplorer(props: UsageExplorerProps): JSX.Element {
 		if (selectedTime && selectedInterval) {
 			const maxTime = new Date().getTime() * 1000000;
 			const minTime = maxTime - selectedTime.value * 24 * 3600000 * 1000000;
-
+			
 			getUsageData(minTime, maxTime, selectedInterval.value, selectedService);
 		}
 	}, [selectedTime, selectedInterval, selectedService, getUsageData]);
diff --git a/frontend/src/pages/Trace/index.tsx b/frontend/src/pages/Trace/index.tsx
index 427dd0d14e..9764c83afe 100644
--- a/frontend/src/pages/Trace/index.tsx
+++ b/frontend/src/pages/Trace/index.tsx
@@ -5,6 +5,7 @@ import TraceGraph from 'container/Trace/Graph';
 import Search from 'container/Trace/Search';
 import TraceGraphFilter from 'container/Trace/TraceGraphFilter';
 import TraceTable from 'container/Trace/TraceTable';
+import getStep from 'lib/getStep';
 import history from 'lib/history';
 import React, { useCallback, useEffect, useState } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
@@ -84,7 +85,7 @@ function Trace({
 			selectedFilter,
 			selectedTags,
 			start: minTime,
-			step: 60,
+			step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }),
 			isFilterExclude,
 		});
 	}, [
diff --git a/frontend/src/store/actions/dashboard/getQueryResults.ts b/frontend/src/store/actions/dashboard/getQueryResults.ts
index b87aca985f..e2ced192db 100644
--- a/frontend/src/store/actions/dashboard/getQueryResults.ts
+++ b/frontend/src/store/actions/dashboard/getQueryResults.ts
@@ -5,6 +5,7 @@ import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems
 import GetMaxMinTime from 'lib/getMaxMinTime';
 import GetMinMax from 'lib/getMinMax';
 import GetStartAndEndTime from 'lib/getStartAndEndTime';
+import getStep from 'lib/getStep';
 import { Dispatch } from 'redux';
 import store from 'store';
 import AppActions from 'types/actions';
@@ -45,7 +46,7 @@ export const GetQueryResults = (
 							end,
 							query: encodeURIComponent(query.query),
 							start,
-							step: '60',
+							step: `${getStep({ start, end, inputFormat: 'ms' })}`,
 						});
 						return {
 							query: query.query,