GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-01 04:42:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: dynamic step size for the data for graphs (#929)

Browse Source 
* 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
This commit is contained in:
Pranshu Chittora 2022-04-05 16:09:57 +05:30 committed by GitHub
parent a8c5934fc5
commit 566c2becdf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/.eslintignore
View File

@ -1,2 +1,2 @@
node_modules node_modules
build build

5
frontend/src/lib/__tests__/getStep.test.ts
View File

@ -1,6 +1,6 @@
import { expect } from '@jest/globals'; import { expect } from '@jest/globals';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import getStep, { DefaultStepSize } from 'lib/getStep'; import getStep, { DefaultStepSize, MaxDataPoints } from 'lib/getStep';
describe('lib/getStep', () => { describe('lib/getStep', () => {
test('should return default step when the given range is less than 1 day', () => { 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 startUnix = start.valueOf();
const endUnix = end.valueOf(); const endUnix = end.valueOf();
const expectedStepSize = end.diff(start, 'days') * DefaultStepSize; const expectedStepSize = Math.floor(end.diff(start, 's') / MaxDataPoints);
expect( expect(
getStep({ getStep({
start: startUnix / 1e3, start: startUnix / 1e3,

9
frontend/src/lib/getStep.ts
View File

@ -30,6 +30,7 @@ const convertToMs = (
}; };
export const DefaultStepSize = 60; export const DefaultStepSize = 60;
export const MaxDataPoints = 200;
/** /**
* Returns relevant step size based on given start and end date. * 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 getStep = ({ start, end, inputFormat = 'ms' }: GetStepInput): number => {
const startDate = dayjs(convertToMs(Number(start), inputFormat)); const startDate = dayjs(convertToMs(Number(start), inputFormat));
const endDate = dayjs(convertToMs(Number(end), 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 Math.max(Math.floor(diffSec / MaxDataPoints), DefaultStepSize);
return DefaultStepSize * diffDays;
}
return DefaultStepSize;
}; };
export default getStep; export default getStep;

2
frontend/src/modules/Usage/UsageExplorer.tsx
View File

@ -84,7 +84,7 @@ function _UsageExplorer(props: UsageExplorerProps): JSX.Element {
if (selectedTime && selectedInterval) { if (selectedTime && selectedInterval) {
const maxTime = new Date().getTime() * 1000000; const maxTime = new Date().getTime() * 1000000;
const minTime = maxTime - selectedTime.value * 24 * 3600000 * 1000000; const minTime = maxTime - selectedTime.value * 24 * 3600000 * 1000000;
getUsageData(minTime, maxTime, selectedInterval.value, selectedService); getUsageData(minTime, maxTime, selectedInterval.value, selectedService);
} }
}, [selectedTime, selectedInterval, selectedService, getUsageData]); }, [selectedTime, selectedInterval, selectedService, getUsageData]);

3
frontend/src/pages/Trace/index.tsx
View File

@ -5,6 +5,7 @@ import TraceGraph from 'container/Trace/Graph';
import Search from 'container/Trace/Search'; import Search from 'container/Trace/Search';
import TraceGraphFilter from 'container/Trace/TraceGraphFilter'; import TraceGraphFilter from 'container/Trace/TraceGraphFilter';
import TraceTable from 'container/Trace/TraceTable'; import TraceTable from 'container/Trace/TraceTable';
import getStep from 'lib/getStep';
import history from 'lib/history'; import history from 'lib/history';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { connect, useDispatch, useSelector } from 'react-redux'; import { connect, useDispatch, useSelector } from 'react-redux';
@ -84,7 +85,7 @@ function Trace({
selectedFilter, selectedFilter,
selectedTags, selectedTags,
start: minTime, start: minTime,
step: 60, step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }),
isFilterExclude, isFilterExclude,
}); });
}, [ }, [

3
frontend/src/store/actions/dashboard/getQueryResults.ts
View File

@ -5,6 +5,7 @@ import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems
import GetMaxMinTime from 'lib/getMaxMinTime'; import GetMaxMinTime from 'lib/getMaxMinTime';
import GetMinMax from 'lib/getMinMax'; import GetMinMax from 'lib/getMinMax';
import GetStartAndEndTime from 'lib/getStartAndEndTime'; import GetStartAndEndTime from 'lib/getStartAndEndTime';
import getStep from 'lib/getStep';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import store from 'store'; import store from 'store';
import AppActions from 'types/actions'; import AppActions from 'types/actions';
@ -45,7 +46,7 @@ export const GetQueryResults = (
end, end,
query: encodeURIComponent(query.query), query: encodeURIComponent(query.query),
start, start,
step: '60', step: `${getStep({ start, end, inputFormat: 'ms' })}`,
}); });
return { return {
query: query.query, query: query.query,