From a6a9e4e0eda75f5db2a8fb872eba716b6fed1924 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 5 Apr 2023 15:55:53 -0500
Subject: [PATCH] [v9.5.x] XYChart: Add all dataset columns in tooltip (#66065)

XYChart: Add all dataset columns in tooltip (#65027)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
(cherry picked from commit df62bba354e169449b6e268e55395e334df7bf50)

Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>
---
 .../app/plugins/panel/xychart/TooltipView.tsx   | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/panel/xychart/TooltipView.tsx b/public/app/plugins/panel/xychart/TooltipView.tsx
index 5899569e00a..f3ebd1ef821 100644
--- a/public/app/plugins/panel/xychart/TooltipView.tsx
+++ b/public/app/plugins/panel/xychart/TooltipView.tsx
@@ -11,6 +11,7 @@ import {
   TimeRange,
 } from '@grafana/data';
 import { LinkButton, usePanelContext, useStyles2, VerticalGroup, VizTooltipOptions } from '@grafana/ui';
+import { findField } from 'app/features/dimensions';
 import { getFieldLinksForExplore } from 'app/features/explore/utils/links';
 
 import { ScatterSeriesConfig, SeriesMapping } from './models.gen';
@@ -69,14 +70,16 @@ export const TooltipView = ({
     range,
   });
 
+  let extraFields: Field[] = frame.fields.filter((f) => f !== xField && f !== yField);
+
   let yValue: YValue | null = null;
   let extraFacets: ExtraFacets | null = null;
   if (seriesMapping === SeriesMapping.Manual && manualSeriesConfigs) {
     const colorFacetFieldName = manualSeriesConfigs[hoveredPointIndex].pointColor?.field ?? '';
     const sizeFacetFieldName = manualSeriesConfigs[hoveredPointIndex].pointSize?.field ?? '';
 
-    const colorFacet = colorFacetFieldName ? frame.fields.find((f) => f.name === colorFacetFieldName) : undefined;
-    const sizeFacet = sizeFacetFieldName ? frame.fields.find((f) => f.name === sizeFacetFieldName) : undefined;
+    const colorFacet = colorFacetFieldName ? findField(frame, colorFacetFieldName) : undefined;
+    const sizeFacet = sizeFacetFieldName ? findField(frame, sizeFacetFieldName) : undefined;
 
     extraFacets = {
       colorFacetFieldName,
@@ -84,6 +87,8 @@ export const TooltipView = ({
       colorFacetValue: colorFacet?.values.get(rowIndex),
       sizeFacetValue: sizeFacet?.values.get(rowIndex),
     };
+
+    extraFields = extraFields.filter((f) => f !== colorFacet && f !== sizeFacet);
   }
 
   yValue = {
@@ -101,7 +106,7 @@ export const TooltipView = ({
         </tr>
         <tbody>
           <tr>
-            <th>{xField.name}</th>
+            <th>{getFieldDisplayName(xField, frame)}</th>
             <td>{fmt(xField, xField.values.get(rowIndex))}</td>
           </tr>
           <tr>
@@ -120,6 +125,12 @@ export const TooltipView = ({
               <td>{extraFacets.sizeFacetValue}</td>
             </tr>
           )}
+          {extraFields.map((field, i) => (
+            <tr key={i}>
+              <th>{getFieldDisplayName(field, frame)}:</th>
+              <td>{fmt(field, field.values.get(rowIndex))}</td>
+            </tr>
+          ))}
           {links.length > 0 && (
             <tr>
               <td colSpan={2}>