From 0fbfb67b159fd30e164207e0d82cffc71c643b48 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Wed, 1 May 2024 08:55:11 -0600
Subject: [PATCH] XY Chart: Show mapped size/color fields in tooltip (#87153)

---
 .../plugins/panel/xychart/v2/XYChartPanel.tsx  |  4 ++++
 .../panel/xychart/v2/XYChartTooltip.tsx        | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/public/app/plugins/panel/xychart/v2/XYChartPanel.tsx b/public/app/plugins/panel/xychart/v2/XYChartPanel.tsx
index 54caeda8db5..fc876de5002 100644
--- a/public/app/plugins/panel/xychart/v2/XYChartPanel.tsx
+++ b/public/app/plugins/panel/xychart/v2/XYChartPanel.tsx
@@ -53,6 +53,10 @@ export const XYChartPanel2 = (props: Props2) => {
 
   // TODO: React.memo()
   const renderLegend = () => {
+    if (!props.options.legend.showLegend) {
+      return null;
+    }
+
     const items: VizLegendItem[] = [];
 
     series.forEach((s, idx) => {
diff --git a/public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx b/public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx
index e47d1c531f4..76618d3728e 100644
--- a/public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx
+++ b/public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx
@@ -40,6 +40,9 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, xySeries, dismiss, i
   const xField = series.x.field;
   const yField = series.y.field;
 
+  const sizeField = series.size.field;
+  const colorField = series.color.field;
+
   let label = series.name.value;
 
   let seriesColor = series.color.fixed;
@@ -68,6 +71,21 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, xySeries, dismiss, i
     },
   ];
 
+  // mapped fields for size/color
+  if (sizeField != null) {
+    contentItems.push({
+      label: stripSeriesName(sizeField.state?.displayName ?? sizeField.name, label),
+      value: fmt(sizeField, sizeField.values[rowIndex]),
+    });
+  }
+
+  if (colorField != null) {
+    contentItems.push({
+      label: stripSeriesName(colorField.state?.displayName ?? colorField.name, label),
+      value: fmt(colorField, colorField.values[rowIndex]),
+    });
+  }
+
   series._rest.forEach((field) => {
     contentItems.push({
       label: stripSeriesName(field.state?.displayName ?? field.name, label),