fix(view): make storage label more floaty

MauriceNino · Jun 30, 2022 · 9619e27 · 9619e27
1 parent 20e273f
commit 9619e27
Showing 1 changed file with 17 additions and 10 deletions.
diff --git a/apps/view/src/components/chart-components.tsx b/apps/view/src/components/chart-components.tsx
@@ -139,23 +139,30 @@ export const DefaultPieChart: FC<DefaultPieChartProps> = ({
   );
 
   const minSize = Math.min(height, width);
-  const labelWidth = labelRef.current?.offsetWidth || 0;
-  const labelHeight = labelRef.current?.offsetHeight || 0;
+  const labelWidth = labelRef.current?.offsetWidth || 120;
+  const labelHeight = labelRef.current?.offsetHeight || 50;
+
+  const coords = label
+    ? getCoords(
+        label,
+        { width, height },
+        { width: labelWidth, height: labelHeight }
+      )
+    : undefined;
 
   return (
     <>
       {label && (
         <HoverLabel
           ref={labelRef}
-          initial={{
-            top: label.y,
-            left: label.x + 20,
+          initial={{ ...coords, opacity: 0 }}
+          animate={{
+            ...coords,
+            opacity: 1,
+            transition: {
+              duration: 0.3,
+            },
           }}
-          animate={getCoords(
-            label,
-            { width, height },
-            { width: labelWidth, height: labelHeight }
-          )}
         >
           {label.label}
         </HoverLabel>