From 52401fc1a7611948d4020243fa3868ad8000ca2d Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 7 Jan 2025 17:13:43 +0100
Subject: [PATCH] ui: fixing horizontal bar tooltip

---
 frontend/app/components/Charts/ColumnChart.tsx |  4 +++-
 frontend/app/components/Charts/utils.ts        | 13 +++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Charts/ColumnChart.tsx b/frontend/app/components/Charts/ColumnChart.tsx
index 1ab012c38..26e5c6f58 100644
--- a/frontend/app/components/Charts/ColumnChart.tsx
+++ b/frontend/app/components/Charts/ColumnChart.tsx
@@ -41,10 +41,11 @@ function ColumnChart(props: ColumnChartProps) {
     (window as any).__seriesValueMap[chartUuid.current] = {};
     (window as any).__seriesColorMap = (window as any).__seriesColorMap ?? {};
     (window as any).__seriesColorMap[chartUuid.current] = {};
+    (window as any).__yAxisData = (window as any).__yAxisData ?? {}
 
     const { yAxisData, series } = buildColumnChart(chartUuid.current, data, compData);
+    (window as any).__yAxisData[chartUuid.current] = yAxisData
 
-    console.log(yAxisData)
     chart.setOption({
       ...defaultOptions,
       tooltip: {
@@ -85,6 +86,7 @@ function ColumnChart(props: ColumnChartProps) {
       obs.disconnect();
       delete (window as any).__seriesValueMap[chartUuid.current];
       delete (window as any).__seriesColorMap[chartUuid.current];
+      delete (window as any).__yAxisData[chartUuid.current];
     };
   }, [data, compData, label]);
 
diff --git a/frontend/app/components/Charts/utils.ts b/frontend/app/components/Charts/utils.ts
index 202e44277..5ce3268ed 100644
--- a/frontend/app/components/Charts/utils.ts
+++ b/frontend/app/components/Charts/utils.ts
@@ -96,14 +96,17 @@ export function customTooltipFormatter(uuid: string) {
     // { seriesName, dataIndex, data, marker, color, encode, ... }
     if (!params) return '';
     const { seriesName, dataIndex } = params;
-    const isPrevious = /^Previous\s+/.test(seriesName);
     const baseName = seriesName.replace(/^Previous\s+/, '');
-    const partnerName = isPrevious ? baseName : `Previous ${baseName}`;
 
     if (!Array.isArray(params.data)) {
+      const isPrevious = /Previous/.test(seriesName);
+      const categoryName = (window as any).__yAxisData?.[uuid]?.[dataIndex];
+      const fullname = isPrevious ? `Previous ${categoryName}` : categoryName;
+      const partnerName = isPrevious ? categoryName : `Previous ${categoryName}`;
       const partnerValue = (window as any).__seriesValueMap?.[uuid]?.[
-        seriesName
+        partnerName
       ];
+
       let str = `
         <div class="flex flex-col gap-1 bg-white shadow border rounded p-2 z-50">
           <div class="flex gap-2 items-center">
@@ -113,7 +116,7 @@ export function customTooltipFormatter(uuid: string) {
               width: 1rem; 
               height: 1rem;">
             </div>
-            <div class="font-medium text-black">${seriesName}</div>
+            <div class="font-medium text-black">${fullname}</div>
           </div>
     
           <div style="border-left: 2px solid ${
@@ -152,6 +155,8 @@ export function customTooltipFormatter(uuid: string) {
 
       return str;
     }
+    const isPrevious = /^Previous\s+/.test(seriesName);
+    const partnerName = isPrevious ? baseName : `Previous ${baseName}`;
     // 'value' of the hovered point
     const yKey = params.encode.y[0]; // "Series 1"
     const value = params.data?.[yKey];