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

fix: [GH-4097]: Fix missing values in chart tooltip (#4098)

Browse Source
This commit is contained in:
Yunus M 2023-11-28 17:18:48 +05:30 committed by GitHub
parent 16839eb7d3
commit dae817640b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
View File

@ -14,7 +14,7 @@ interface UplotTooltipDataProps {
color: string; color: string;
label: string; label: string;
focus: boolean; focus: boolean;
value: string | number; value: number;
tooltipValue: string; tooltipValue: string;
textContent: string; textContent: string;
} }
@ -25,7 +25,6 @@ const generateTooltipContent = (
idx: number, idx: number,
yAxisUnit?: string, yAxisUnit?: string,
series?: uPlot.Options['series'], series?: uPlot.Options['series'],
fillSpans?: boolean,
// eslint-disable-next-line sonarjs/cognitive-complexity // eslint-disable-next-line sonarjs/cognitive-complexity
): HTMLElement => { ): HTMLElement => {
const container = document.createElement('div'); const container = document.createElement('div');
@ -34,19 +33,23 @@ const generateTooltipContent = (
let tooltipTitle = ''; let tooltipTitle = '';
const formattedData: Record<string, UplotTooltipDataProps> = {}; const formattedData: Record<string, UplotTooltipDataProps> = {};
function sortTooltipContentBasedOnValue(
tooltipDataObj: Record<string, UplotTooltipDataProps>,
): Record<string, UplotTooltipDataProps> {
const entries = Object.entries(tooltipDataObj);
entries.sort((a, b) => b[1].value - a[1].value);
return Object.fromEntries(entries);
}
if (Array.isArray(series) && series.length > 0) { if (Array.isArray(series) && series.length > 0) {
series.forEach((item, index) => { series.forEach((item, index) => {
if (index === 0) { if (index === 0) {
tooltipTitle = dayjs(data[0][idx] * 1000).format('MMM DD YYYY HH:mm:ss'); tooltipTitle = dayjs(data[0][idx] * 1000).format('MMM DD YYYY HH:mm:ss');
} else if (fillSpans ? item.show : item.show && data[index][idx]) { } else if (item.show) {
const { metric = {}, queryName = '', legend = '' } = const { metric = {}, queryName = '', legend = '' } =
seriesList[index - 1] || {}; seriesList[index - 1] || {};
const label = getLabelName( const label = getLabelName(metric, queryName || '', legend || '');
metric,
queryName || '', // query
legend || '',
);
const value = data[index][idx] || 0; const value = data[index][idx] || 0;
const tooltipValue = getToolTipValue(value, yAxisUnit); const tooltipValue = getToolTipValue(value, yAxisUnit);
@ -60,24 +63,18 @@ const generateTooltipContent = (
focus: item?._focus || false, focus: item?._focus || false,
value, value,
tooltipValue, tooltipValue,
textContent: `${label} : ${tooltipValue || 0}`, textContent: `${label} : ${tooltipValue}`,
}; };
formattedData[value] = dataObj; formattedData[label] = dataObj;
} }
}); });
} }
// Get the keys and sort them const sortedData: Record<
const sortedKeys = Object.keys(formattedData).sort( string,
(a, b) => parseInt(b, 10) - parseInt(a, 10), UplotTooltipDataProps
); > = sortTooltipContentBasedOnValue(formattedData);
// Create a new object with sorted keys
const sortedData: Record<string, UplotTooltipDataProps> = {};
sortedKeys.forEach((key) => {
sortedData[key] = formattedData[key];
});
const div = document.createElement('div'); const div = document.createElement('div');
div.classList.add('tooltip-content-row'); div.classList.add('tooltip-content-row');
@ -85,6 +82,8 @@ const generateTooltipContent = (
div.classList.add('tooltip-content-header'); div.classList.add('tooltip-content-header');
container.appendChild(div); container.appendChild(div);
const sortedKeys = Object.keys(sortedData);
if (Array.isArray(sortedKeys) && sortedKeys.length > 0) { if (Array.isArray(sortedKeys) && sortedKeys.length > 0) {
sortedKeys.forEach((key) => { sortedKeys.forEach((key) => {
if (sortedData[key]) { if (sortedData[key]) {
@ -129,7 +128,6 @@ const generateTooltipContent = (
const tooltipPlugin = ( const tooltipPlugin = (
apiResponse: MetricRangePayloadProps | undefined, apiResponse: MetricRangePayloadProps | undefined,
yAxisUnit?: string, yAxisUnit?: string,
fillSpans?: boolean,
): any => { ): any => {
let over: HTMLElement; let over: HTMLElement;
let bound: HTMLElement; let bound: HTMLElement;
@ -189,7 +187,6 @@ const tooltipPlugin = (
idx, idx,
yAxisUnit, yAxisUnit,
u.series, u.series,
fillSpans,
); );
overlay.appendChild(content); overlay.appendChild(content);
placement(overlay, anchor, 'right', 'start', { bound }); placement(overlay, anchor, 'right', 'start', { bound });