GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 20:05:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update logic to generate x series for line series charts (#3993)

Browse Source 
Co-authored-by: Palash Gupta <palashgdev@gmail.com>
This commit is contained in:
Yunus M 2023-11-20 10:56:33 +05:30 committed by GitHub
parent b3c0681a85
commit 4083970289
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/Uplot/Uplot.tsx
View File

@ -3,6 +3,7 @@ import './uplot.scss';
import { Typography } from 'antd';
import { ToggleGraphProps } from 'components/Graph/types';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
import {
forwardRef,
memo,
@ -11,6 +12,7 @@ import {
useImperativeHandle,
useRef,
} from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import UPlot from 'uplot';
import { dataMatch, optionsUpdateState } from './utils';
@ -119,13 +121,15 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
}, [data, resetScales, create]);
return (
<div className="uplot-graph-container" ref={targetRef}>
{data && data[0] && data[0]?.length === 0 ? (
<div className="not-found">
<Typography>No Data</Typography>
</div>
) : null}
</div>
<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
<div className="uplot-graph-container" ref={targetRef}>
{data && data[0] && data[0]?.length === 0 ? (
<div className="not-found">
<Typography>No Data</Typography>
</div>
) : null}
</div>
</ErrorBoundary>
);
},
);

13
frontend/src/lib/uPlotLib/utils/getChartData.ts
View File

@ -7,13 +7,24 @@ export const getUPlotChartData = (
const seriesList = apiResponse?.data?.result || [];
const uPlotData: uPlot.AlignedData = [];
// this helps us identify the series with the max number of values and helps define the x axis - timestamps
const xSeries = seriesList.reduce(
(maxObj, currentObj) =>
currentObj.values.length > maxObj.values.length ? currentObj : maxObj,
seriesList[0],
);
// sort seriesList
for (let index = 0; index < seriesList.length; index += 1) {
seriesList[index]?.values?.sort((a, b) => a[0] - b[0]);
}
const timestampArr = xSeries?.values?.map((v) => v[0]);
const uplotDataFormatArr = new Float64Array(timestampArr);
// timestamp
uPlotData.push(new Float64Array(seriesList[0]?.values?.map((v) => v[0])));
uPlotData.push(uplotDataFormatArr);
const numberOfTimestamps = uPlotData[0].length;