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 <[email protected]>
spatineo · Mar 28, 2024 · ea15d9c · ea15d9c
1 parent b405771
commit ea15d9c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git 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
@@ -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>