Heatmap: Fix tooltip y range of top and bottom buckets in calculated heatmaps (#59172)

Co-authored-by: xdavidwu <xdavidwuph@gmail.com>

public/app/plugins/panel/heatmap/HeatmapHoverView.tsx

@@ -48,16 +48,43 @@ const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
 
   // labeled buckets
   const meta = readHeatmapRowsCustomMeta(data.heatmap);
-  const yDispSrc = meta.yOrdinalDisplay ?? yVals;
   const yDisp = yField?.display ? (v: any) => formattedValueToString(yField.display!(v)) : (v: any) => `${v}`;
 
   const yValueIdx = index % data.yBucketCount! ?? 0;
 
-  const yMinIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx - 1 : yValueIdx;
+  let yBucketMin: string;
-  const yMaxIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx : yValueIdx + 1;
+  let yBucketMax: string;
 
-  const yBucketMin = yDispSrc?.[yMinIdx];
+  if (meta.yOrdinalDisplay) {
-  const yBucketMax = yDispSrc?.[yMaxIdx];
+    const yMinIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx - 1 : yValueIdx;
+    const yMaxIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx : yValueIdx + 1;
+    yBucketMin = `${meta.yOrdinalDisplay[yMinIdx]}`;
+    yBucketMax = `${meta.yOrdinalDisplay[yMaxIdx]}`;
+  } else {
+    const value = yVals?.[yValueIdx];
+
+    if (data.yLayout === HeatmapCellLayout.le) {
+      yBucketMax = `${value}`;
+
+      if (data.yLog) {
+        let logFn = data.yLog === 2 ? Math.log2 : Math.log10;
+        let exp = logFn(value) - 1 / data.yLogSplit!;
+        yBucketMin = `${data.yLog ** exp}`;
+      } else {
+        yBucketMin = `${value - data.yBucketSize!}`;
+      }
+    } else {
+      yBucketMin = `${value}`;
+
+      if (data.yLog) {
+        let logFn = data.yLog === 2 ? Math.log2 : Math.log10;
+        let exp = logFn(value) + 1 / data.yLogSplit!;
+        yBucketMax = `${data.yLog ** exp}`;
+      } else {
+        yBucketMax = `${value + data.yBucketSize!}`;
+      }
+    }
+  }
 
   let xBucketMin: number;
   let xBucketMax: number;

public/app/plugins/panel/heatmap/fields.ts

@@ -35,6 +35,12 @@ export interface HeatmapData {
   xLayout?: HeatmapCellLayout;
   yLayout?: HeatmapCellLayout;
 
+  xLog?: number;
+  yLog?: number;
+
+  xLogSplit?: number;
+  yLogSplit?: number;
+
   // color scale range
   minValue?: number;
   maxValue?: number;
@@ -224,6 +230,9 @@ const getDenseHeatmapData = (
     options.filterValues?.ge
   );
 
+  let calcX = options.calculation?.xBuckets;
+  let calcY = options.calculation?.yBuckets;
+
   const data: HeatmapData = {
     heatmap: frame,
     exemplars: exemplars?.length ? exemplars : undefined,
@@ -232,6 +241,12 @@ const getDenseHeatmapData = (
     xBucketCount: xBinQty,
     yBucketCount: yBinQty,
 
+    yLog: calcY?.scale?.log ?? 0,
+    xLog: calcX?.scale?.log ?? 0,
+
+    xLogSplit: calcX?.scale?.log ? +(calcX?.value ?? '1') : 1,
+    yLogSplit: calcY?.scale?.log ? +(calcY?.value ?? '1') : 1,
+
     minValue,
     maxValue,