Heatmap: honor dashboard timezone in x axis and fix tooltip time range (#56909) (#56928)

(cherry picked from commit 53ac77d4a5)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

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

@@ -59,8 +59,16 @@ const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
   const yBucketMin = yDispSrc?.[yMinIdx];
   const yBucketMax = yDispSrc?.[yMaxIdx];
 
-  const xBucketMin = xVals?.[index];
-  const xBucketMax = xBucketMin + data.xBucketSize;
+  let xBucketMin: number;
+  let xBucketMax: number;
+
+  if (data.xLayout === HeatmapCellLayout.le) {
+    xBucketMax = xVals?.[index];
+    xBucketMin = xBucketMax - data.xBucketSize!;
+  } else {
+    xBucketMin = xVals?.[index];
+    xBucketMax = xBucketMin + data.xBucketSize!;
+  }
 
   const count = countVals?.[index];
 

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

@@ -138,7 +138,7 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
       ySizeDivisor: scaleConfig?.type === ScaleDistribution.Log ? +(options.calculation?.yBuckets?.value || 1) : 1,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options, data.structureRev]);
+  }, [options, timeZone, data.structureRev]);
 
   const renderLegend = () => {
     if (!info.heatmap || !options.legend.show) {

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

@@ -250,6 +250,7 @@ export function prepConfig(opts: PrepConfigOpts) {
     placement: AxisPlacement.Bottom,
     isTime: true,
     theme: theme,
+    timeZone,
   });
 
   const yField = dataRef.current?.heatmap?.fields[1]!;