fix: eazychart-[react & vue] - empty tooltip v0.01

Hexastack · May 13, 2024 · a0cc639 · a0cc639
1 parent 8cc4668
commit a0cc639
Show file tree

Hide file tree

Showing 19 changed files with 45 additions and 87 deletions.
diff --git a/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/Chart.spec.tsx.snap
@@ -50,10 +50,7 @@ exports[`Chart should provide the chart data to the children components 1`] = `
         </svg>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap b/packages/ez-dev/jest/snapshots/components/addons/Tooltip.spec.tsx.snap
@@ -1,10 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tooltip renders no tooltip when shape is being hovered 1`] = `
-<div
-  class="ez-tooltip"
-  style="left: 416px; top: 284px; opacity: 0;"
->
+<div class="ez-tooltip">
 </div>
 `;
 

diff --git a/packages/ez-dev/jest/snapshots/recipes/area/AreaChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/area/AreaChart.spec.tsx.snap
@@ -479,10 +479,7 @@ exports[`AreaChart renders an area chart 1`] = `
         </svg>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/area/MultiAreaChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/area/MultiAreaChart.spec.tsx.snap
@@ -647,10 +647,7 @@ exports[`MultiAreaChart renders a multiarea chart 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/bar/BarChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/bar/BarChart.spec.tsx.snap
@@ -396,10 +396,7 @@ exports[`BarChart renders a bar chart 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/column/ColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/ColumnChart.spec.tsx.snap
@@ -396,10 +396,7 @@ exports[`ColumnChart renders a column chart 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/column/LineColumnChart.spec.tsx.snap
@@ -643,10 +643,7 @@ exports[`LineColumnChart renders a line & column chart 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/line/LineChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/line/LineChart.spec.tsx.snap
@@ -468,10 +468,7 @@ exports[`LineChart renders a line chart 1`] = `
         </svg>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/line/LineErrorMarginChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/line/LineErrorMarginChart.spec.tsx.snap
@@ -579,10 +579,7 @@ exports[`LineErrorMarginChart renders a line error margin chart 1`] = `
         </svg>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/line/MultiLineChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/line/MultiLineChart.spec.tsx.snap
@@ -625,10 +625,7 @@ exports[`MultiLineChart renders a multiline chart 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/map/MapChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/map/MapChart.spec.tsx.snap
@@ -51,10 +51,7 @@ exports[`MapChart renders a map chart 1`] = `
         </svg>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/pie/IrregularPieChart.spec.tsx.snap
@@ -94,10 +94,7 @@ exports[`IrregularPieChart renders a irregular pie chart 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/pie/PieChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/pie/PieChart.spec.tsx.snap
@@ -92,10 +92,7 @@ exports[`PieChart renders a pie chart 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/pie/RadialChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/pie/RadialChart.spec.tsx.snap
@@ -94,10 +94,7 @@ exports[`RadialChart renders a Radial chart 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/pie/SemiCircleChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/pie/SemiCircleChart.spec.tsx.snap
@@ -92,10 +92,7 @@ exports[`SemiCircleChart renders a semi-circle chart 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/scatter/BubbleChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/scatter/BubbleChart.spec.tsx.snap
@@ -515,10 +515,7 @@ exports[`BubbleChart renders a bubble chart 1`] = `
         </svg>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap b/packages/ez-dev/jest/snapshots/recipes/scatter/ScatterChart.spec.tsx.snap
@@ -516,10 +516,7 @@ exports[`ScatterChart renders a scatter chart 1`] = `
         </svg>
       </div>
     </div>
-    <div
-      class="ez-tooltip"
-      style="left: 0px; top: 0px; opacity: 0;"
-    >
+    <div class="ez-tooltip">
     </div>
   </div>
 </div>

diff --git a/packages/ez-react/src/components/addons/tooltip/Tooltip.tsx b/packages/ez-react/src/components/addons/tooltip/Tooltip.tsx
@@ -50,24 +50,31 @@ export const Tooltip: FC<TooltipProps> = ({
     color: undefined,
   };
 
-  return datum ? (
-    <div className="ez-tooltip" style={animatedStyle} {...rest}>
-      {shapeDatum?.color && (
-        <div
-          className="ez-tooltip-color"
-          style={{ backgroundColor: shapeDatum.color }}
-        ></div>
-      )}
-      <div className="ez-tooltip-text">
-        {Object.keys(attributes).map((attribute) => (
-          <div key={attribute} className={`ez-tooltip-attribute ${attribute}`}>
-            <div className="ez-tooltip-attribute--name">{attribute} :</div>
-            <div className="ez-tooltip-attribute--value">
-              {datum[attribute] as string}
-            </div>
+  return (
+    <div className="ez-tooltip" style={datum && animatedStyle} {...rest}>
+      {datum ? (
+        <>
+          {shapeDatum?.color && (
+            <div
+              className="ez-tooltip-color"
+              style={{ backgroundColor: shapeDatum.color }}
+            ></div>
+          )}
+          <div className="ez-tooltip-text">
+            {Object.keys(attributes).map((attribute) => (
+              <div
+                key={attribute}
+                className={`ez-tooltip-attribute ${attribute}`}
+              >
+                <div className="ez-tooltip-attribute--name">{attribute} :</div>
+                <div className="ez-tooltip-attribute--value">
+                  {datum[attribute] as string}
+                </div>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        </>
+      ) : null}
     </div>
-  ) : null;
+  );
 };
diff --git a/packages/ez-vue/src/components/addons/tooltip/Tooltip.tsx b/packages/ez-vue/src/components/addons/tooltip/Tooltip.tsx
@@ -128,6 +128,8 @@ export default class Tooltip extends mixins(AnimationMixin) {
           ))}
         </div>
       </div>
-    ) : null;
+    ) : (
+      <div class="ez-tooltip"></div>
+    );
   }
 }