From 3ab78dcc285839de5f33ef62acf19189acd6e5f8 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.pro>
Date: Sun, 25 Feb 2024 16:13:06 +0100
Subject: [PATCH] add perfictible tooltip

---
 .../js/components/rainfall/RainfallGraph.tsx   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/rainfall/RainfallGraph.tsx b/resources/js/components/rainfall/RainfallGraph.tsx
index 17ea405..077ce55 100644
--- a/resources/js/components/rainfall/RainfallGraph.tsx
+++ b/resources/js/components/rainfall/RainfallGraph.tsx
@@ -17,12 +17,13 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
 
         d3.select(svgRef.current).selectAll("*").remove()
         const svg = d3.select(svgRef.current)
+            .attr('id', 'rain-graph')
             .attr('width', gWidth + margin.left + margin.right)
             .attr('height', gHeight + margin.top + margin.bottom)
             .attr('class', 'relative')
             .append('g')
             .attr('transform', "translate(" + margin.left + "," + margin.top + ")")
-        console.log(data)
+
         const yMax = data.reduce((result, item) => item.value > result ? item.value : result, 0)
         const y = d3.scaleLinear()
             .domain([0, yMax + 10])
@@ -72,6 +73,15 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
                 .attr("stroke-opacity", 0.1))
         }
 
+
+        const showDetails = (event: Event, data: rainfallGraphData) => {
+            const toolTip = document.getElementById('tooltip')
+            if (toolTip) {
+                toolTip.style.opacity = '1'
+                toolTip.innerText = `${data.label} : ${data.value}`
+            }
+        }
+
         const diffDays = Math.round(Math.abs(((new Date(start_date)).getTime() - (new Date(end_date)).getTime()) / (24 * 60 * 60 * 1000))) + 1
         const dayWidth = (width - 44) / diffDays
         svg.selectAll(".bar")
@@ -84,11 +94,15 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
             .attr("y", d =>  y(d.value))
             .attr("width", d => (dayWidth * d.days - 3))
             .attr("height", d => height - margin.bottom - 10 - y(d.value))
+            .on('click', showDetails)
             .append('title')
             .text(d => `${d.label} : ${d.value}`)
     }
 
-    return <svg ref={svgRef} />
+    return <div className="relative">
+        <svg ref={svgRef} />
+        <div id="tooltip" className="absolute px-2 py-2 top-3 left-10 rounded border" style={{opacity: 0}}></div>
+    </div>
 }
 
 export default RainfallGraph