From 2e147ef63a1901f40cdf06afe75f9aeb9f83594f Mon Sep 17 00:00:00 2001
From: Marcos Pieras <pieras.marcos@gmail.com>
Date: Thu, 14 Nov 2024 15:51:39 +0000
Subject: [PATCH] Feat(vis1 d)/add tooltip

---
 .../vis1D/components/CustomChartPlotly.tsx    | 47 +++++++++++--------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx b/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
index 04229b1d0..d1bb53326 100644
--- a/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
+++ b/libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx
@@ -57,7 +57,6 @@ export const getPlotData = (
           x: xValues,
           y: yValues,
           marker: { color: primaryColor },
-          hoverinfo: 'none',
         },
       ];
     case 'scatter':
@@ -68,7 +67,6 @@ export const getPlotData = (
           y: yValues,
           mode: 'markers',
           marker: { color: primaryColor, size: 12 },
-          hoverinfo: 'none',
         },
       ];
     case 'line':
@@ -79,7 +77,6 @@ export const getPlotData = (
           y: yValues,
           mode: 'lines',
           line: { color: primaryColor },
-          hoverinfo: 'none',
         },
       ];
     case 'histogram':
@@ -88,7 +85,6 @@ export const getPlotData = (
           type: 'histogram',
           x: xAxisData,
           marker: { color: primaryColor },
-          hoverinfo: 'none',
         },
       ];
     case 'pie':
@@ -98,7 +94,6 @@ export const getPlotData = (
           labels: xValues.map(String),
           values: xAxisData,
           marker: { colors: mainColors },
-          hoverinfo: 'none',
         },
       ];
 
@@ -118,7 +113,7 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
 }) => {
   const internalRef = useRef<HTMLDivElement>(null);
   const [divSize, setDivSize] = useState({ width: 0, height: 0 });
-  const [hoveredPoint, setHoveredPoint] = useState<{ left: number; top: number; value: number } | null>(null);
+  const [hoveredPoint, setHoveredPoint] = useState<{ left: number; top: number; xValue: number; yValue: number } | null>(null);
 
   useEffect(() => {
     const handleResize = () => {
@@ -141,25 +136,28 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
 
   const handleHover = (event: any) => {
     const { points } = event;
-
     if (points.length) {
       const point = points[0];
-      const plotRect = internalRef.current?.getBoundingClientRect(); // Get the plot's bounding box
+      const plotRect = internalRef.current?.getBoundingClientRect();
 
       if (plotRect) {
-        // Calculate the position of the tooltip
-        const xIndex = point.xaxis.d2p(point.x); // Convert x value to pixel position
-        const yIndex = point.yaxis.d2p(point.y); // Convert y value to pixel position
+        const xIndex = point.xaxis.d2p(point.x);
+        const yIndex = point.yaxis.d2p(point.y);
 
         setHoveredPoint({
-          left: xIndex, // Center tooltip above the point
-          top: plotRect.top + yIndex, // Position below the point
-          value: point.y, // Value to display
+          left: plotRect.left + xIndex,
+          top: plotRect.top + yIndex,
+          xValue: point.x,
+          yValue: point.y,
         });
       }
     }
   };
 
+  const handleUnhover = () => {
+    setHoveredPoint(null);
+  };
+
   return (
     <div className="h-full w-full flex items-center justify-center overflow-hidden relative" ref={internalRef}>
       <Plot
@@ -168,7 +166,6 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
           responsive: true,
           scrollZoom: false,
           displayModeBar: false,
-          staticPlot: true,
           displaylogo: false,
         }}
         layout={{
@@ -179,7 +176,7 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
           font: {
             family: 'Inter, sans-serif',
             size: 12,
-            color: '#374151', // change to gp default color
+            color: '#374151',
           },
           xaxis: {
             title: showAxis ? (xAxisLabel ? xAxisLabel : '') : '',
@@ -195,11 +192,20 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
             showline: true,
             zeroline: false,
           },
+          hoverlabel: {
+            bgcolor: 'rgba(255, 255, 255, 0.8)',
+            bordercolor: 'rgba(0, 0, 0, 0.2)',
+            font: {
+              family: 'Inter, sans-serif',
+              size: 14,
+              color: '#374151',
+            },
+          },
         }}
         onHover={handleHover}
-        onUnhover={() => setHoveredPoint(null)}
+        onUnhover={handleUnhover}
       />
-
+      {/* 
       {hoveredPoint && (
         <div>
           <Tooltip open={true} showArrow={true}>
@@ -209,16 +215,17 @@ export const CustomChartPlotly: React.FC<CustomChartPlotlyProps> = ({
                 position: 'absolute',
                 left: hoveredPoint.left,
                 top: hoveredPoint.top,
-                transform: 'translate(-50%, -100%)',
+                transform: 'translate(-50%, 0%)',
               }}
             >
               <div>
-                <strong>Value:</strong> {hoveredPoint.value} <br />
+                <strong>{hoveredPoint.xValue}</strong>: {hoveredPoint.yValue}
               </div>
             </TooltipContent>
           </Tooltip>
         </div>
       )}
+        */}
     </div>
   );
 };
-- 
GitLab