public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TimeSeries: Sort tooltip values based on raw values (#46738) (#47245)

Browse Source 
* TimeSeries: Fix tooltip values sorting

* Update packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Review

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
(cherry picked from commit a55274a72d)

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
This commit is contained in:
Grot (@grafanabot)
2022-04-04 03:35:54 -07:00
committed by GitHub
co-authored by Dominik Prokop
parent 220cecd855
commit d4466098ee
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
+12 -3
View File
@@ -214,7 +214,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
let series: SeriesTableRowProps[] = [];
const frame = otherProps.data;
const fields = frame.fields;
const sortIdx: Array<[number, number]> = [];
const sortIdx: any[] = [];
for (let i = 0; i < fields.length; i++) {
const field = frame.fields[i];
@@ -232,7 +232,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
const v = otherProps.data.fields[i].values.get(focusedPointIdxs[i]!);
const display = field.display!(v);
sortIdx.push([series.length, v]);
sortIdx.push(v);
series.push({
color: display.color || FALLBACK_COLOR,
label: getFieldDisplayName(field, frame),
@@ -242,7 +242,16 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
}
if (sortOrder !== SortOrder.None) {
series.sort((a, b) => arrayUtils.sortValues(sortOrder)(a.value, b.value));
// create sort reference series array, as Array.sort() mutates the original array
const sortRef = [...series];
const sortFn = arrayUtils.sortValues(sortOrder);
series.sort((a, b) => {
// get compared values indices to retrieve raw values from sortIdx
const aIdx = sortRef.indexOf(a);
const bIdx = sortRef.indexOf(b);
return sortFn(sortIdx[aIdx], sortIdx[bIdx]);
});
}
tooltip = <SeriesTable series={series} timestamp={xVal} />;