From e88e3482e0e66bc94d76d60d7503e6d63bcc499e Mon Sep 17 00:00:00 2001
From: Victor Marin <36818606+mdvictor@users.noreply.github.com>
Date: Fri, 29 Jul 2022 15:11:42 +0300
Subject: [PATCH] Tooltip mode works in BarChart panel (#52941)

---
 .../plugins/panel/barchart/BarChartPanel.tsx  |  6 +++++
 .../panel/geomap/components/DataHoverView.tsx | 22 +++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx
index ff53d1abd9a..b569a8321df 100644
--- a/public/app/plugins/panel/barchart/BarChartPanel.tsx
+++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx
@@ -18,6 +18,7 @@ import {
   measureText,
   PlotLegend,
   Portal,
+  TooltipDisplayMode,
   UPlotConfigBuilder,
   UPLOT_AXIS_FONT_SIZE,
   usePanelContext,
@@ -175,6 +176,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
           rowIndex={datapointIdx}
           columnIndex={seriesIdx}
           sortOrder={options.tooltip.sort}
+          mode={options.tooltip.mode}
         />
       </>
     );
@@ -284,6 +286,10 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
           });
         }
 
+        if (options.tooltip.mode === TooltipDisplayMode.None) {
+          return null;
+        }
+
         return (
           <Portal>
             {hover && coords && (
diff --git a/public/app/plugins/panel/geomap/components/DataHoverView.tsx b/public/app/plugins/panel/geomap/components/DataHoverView.tsx
index 6a7a750ee4e..b6b55960d51 100644
--- a/public/app/plugins/panel/geomap/components/DataHoverView.tsx
+++ b/public/app/plugins/panel/geomap/components/DataHoverView.tsx
@@ -10,7 +10,7 @@ import {
   GrafanaTheme2,
   LinkModel,
 } from '@grafana/data';
-import { SortOrder } from '@grafana/schema';
+import { SortOrder, TooltipDisplayMode } from '@grafana/schema';
 import { LinkButton, useStyles2, VerticalGroup } from '@grafana/ui';
 
 export interface Props {
@@ -18,9 +18,10 @@ export interface Props {
   rowIndex?: number | null; // the hover row
   columnIndex?: number | null; // the hover column
   sortOrder?: SortOrder;
+  mode?: TooltipDisplayMode | null;
 }
 
-export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder }: Props) => {
+export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode }: Props) => {
   const styles = useStyles2(getStyles);
 
   if (!data || rowIndex == null) {
@@ -60,12 +61,19 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder }: Props)
   return (
     <table className={styles.infoWrap}>
       <tbody>
-        {displayValues.map((v, i) => (
-          <tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}>
-            <th>{v[0]}:</th>
-            <td>{v[2]}</td>
+        {(mode === TooltipDisplayMode.Multi || mode === null) &&
+          displayValues.map((v, i) => (
+            <tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}>
+              <th>{v[0]}:</th>
+              <td>{v[2]}</td>
+            </tr>
+          ))}
+        {mode === TooltipDisplayMode.Single && columnIndex && (
+          <tr key={`${columnIndex}/${rowIndex}`}>
+            <th>{displayValues[columnIndex][0]}:</th>
+            <td>{displayValues[columnIndex][2]}</td>
           </tr>
-        ))}
+        )}
         {links.length > 0 && (
           <tr>
             <td colSpan={2}>