GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-15 12:45:57 +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 { Typography } from 'antd';
import { ToggleGraphProps } from 'components/Graph/types'; import { ToggleGraphProps } from 'components/Graph/types';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
import { import {
forwardRef, forwardRef,
memo, memo,
@ -11,6 +12,7 @@ import {
useImperativeHandle, useImperativeHandle,
useRef, useRef,
} from 'react'; } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import UPlot from 'uplot'; import UPlot from 'uplot';
import { dataMatch, optionsUpdateState } from './utils'; import { dataMatch, optionsUpdateState } from './utils';
@ -119,13 +121,15 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
}, [data, resetScales, create]); }, [data, resetScales, create]);
return ( return (
<div className="uplot-graph-container" ref={targetRef}> <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
{data && data[0] && data[0]?.length === 0 ? ( <div className="uplot-graph-container" ref={targetRef}>
<div className="not-found"> {data && data[0] && data[0]?.length === 0 ? (
<Typography>No Data</Typography> <div className="not-found">
</div> <Typography>No Data</Typography>
) : null} </div>
</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 seriesList = apiResponse?.data?.result || [];
const uPlotData: uPlot.AlignedData = []; 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 // sort seriesList
for (let index = 0; index < seriesList.length; index += 1) { for (let index = 0; index < seriesList.length; index += 1) {
seriesList[index]?.values?.sort((a, b) => a[0] - b[0]); seriesList[index]?.values?.sort((a, b) => a[0] - b[0]);
} }
const timestampArr = xSeries?.values?.map((v) => v[0]);
const uplotDataFormatArr = new Float64Array(timestampArr);
// timestamp // timestamp
uPlotData.push(new Float64Array(seriesList[0]?.values?.map((v) => v[0]))); uPlotData.push(uplotDataFormatArr);
const numberOfTimestamps = uPlotData[0].length; const numberOfTimestamps = uPlotData[0].length;