From ea15d9cd62590059cecc739402a29299c78d8eac Mon Sep 17 00:00:00 2001
From: Stanley <festusstanley@gmail.com>
Date: Thu, 28 Mar 2024 14:42:12 +0200
Subject: [PATCH] 37 issue with table html dom (#40)

* tr thead error fixed

* Adjusted tooltip width

* Edited tooltip position and value and y position

* console log removed

* fix: ensure tick labels are positioned correctly

---------

Co-authored-by: Sampo Savolainen <sampo.savolainen@spatineo.com>
---
 .../TemperatureComponent.css                    |  2 +-
 .../TemperatureComponent.tsx                    | 17 +++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/TemperatureComponent/TemperatureComponent.css b/src/components/TemperatureComponent/TemperatureComponent.css
index 517a159..3a25a9d 100644
--- a/src/components/TemperatureComponent/TemperatureComponent.css
+++ b/src/components/TemperatureComponent/TemperatureComponent.css
@@ -36,6 +36,6 @@
 
 .temperature-component-td:hover .tooltip {
   display: block;
-  min-width: 26%;
+  min-width: 20%;
   font-size: 0.8rem;
 }
diff --git a/src/components/TemperatureComponent/TemperatureComponent.tsx b/src/components/TemperatureComponent/TemperatureComponent.tsx
index ea3837d..edd9a6c 100644
--- a/src/components/TemperatureComponent/TemperatureComponent.tsx
+++ b/src/components/TemperatureComponent/TemperatureComponent.tsx
@@ -50,11 +50,13 @@ export const TemperatureComponent = (options: TemperatureProps) => {
   const tableContent = (
     <table style={{ width: "100%" }}>
       <thead>
+        <tr>
         {xLabelWithDataValue.map((month, index) => (
           <th className="temperature-component-x-labels" key={index}>
             {month.xLabels}
           </th>
         ))}
+        </tr>
       </thead>
       <tbody style={{ height: `${heightInPixel}` }}>
         {calculatedData
@@ -78,25 +80,28 @@ export const TemperatureComponent = (options: TemperatureProps) => {
                       backgroundColor: `${cell?.bgColor}`,
                       borderRight: "4px solid white",
                     }}
-                  ></td>
+                  >
+                     {cell?.value && (
+                    <span className="tooltip">{xLabelWithDataValue[cellIndex].xLabels}: -{Number(rowData.yValueNumber).toFixed(1)}m, {cell.value}{"°C"}</span>
+                  )}
+                  </td>
                 ))}
 
                 {rowIndex === 0 && (
                   <th
                     className="temperature-component-th"
                     rowSpan={calculatedData.length}
+                    style={{'position': 'relative', 'padding': '0'}}
                   >
                     <Box position="absolute" top="0" h="100%">
                       {options.ticks.map((tick) => (
                         <Box
                           key={tick}
                           position="absolute"
-                          top={
-                            (tick / options.seabedDepth) *
-                            (heightInPixel - 20 / 2)
-                          }
+                          top={`${(tick / options.seabedDepth)*100}%`}
+                          height={0}
                         >
-                          -{tick}
+                          <Box position="relative" top={0} height={0} lineHeight={0}>-{tick}</Box>
                         </Box>
                       ))}
                     </Box>