From a55274a72d8bf24a7b127c7020c48d831ec4cee3 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Mon, 4 Apr 2022 11:18:29 +0200
Subject: [PATCH] TimeSeries: Sort tooltip values based on raw values (#46738)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 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>
---
.../components/uPlot/plugins/TooltipPlugin.tsx | 15 ++++++++++++---
1 file changed, 12 insertions(+), 3 deletions(-)
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
index 45557b917d4..15032a07a90 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
@@ -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} />;