fix: added tooltips on legend for most active contributors graph wher…

…e data is not available yet (#2084)
open-sauced · Nov 9, 2023 · 6e27449 · 6e27449
2 parents 8253f58 + ad6be0d
commit 6e27449
Showing 1 changed file with 32 additions and 21 deletions.
diff --git a/components/molecules/MostActiveContributorsCard/most-active-contributors-card.tsx b/components/molecules/MostActiveContributorsCard/most-active-contributors-card.tsx
@@ -2,7 +2,7 @@ import { useSprings, animated } from "@react-spring/web";
 import { useGesture } from "@use-gesture/react";
 import Image from "next/image";
 import { ReactNode, useState } from "react";
-import * as Tooltip from "@radix-ui/react-tooltip";
+import * as RawTooltip from "@radix-ui/react-tooltip";
 import clsx from "clsx";
 import Button from "components/atoms/Button/button";
 import Card from "components/atoms/Card/card";
@@ -17,6 +17,7 @@ import { getAvatarByUsername } from "lib/utils/github";
 import PeopleIcon from "img/icons/people.svg";
 import ChevronDownIcon from "img/chevron-down.svg";
 import SVGIcon from "components/atoms/SVGIcon/svg-icon";
+import Tooltip from "components/atoms/Tooltip/tooltip";
 
 // omit total_contributions and login from ContributorStat
 type StatKeys = keyof Omit<ContributorStat, "total_contributions" | "login">;
@@ -58,6 +59,18 @@ const peopleFilters: Record<ContributorType, string> = {
   alumni: "Churned Contributors",
 };
 
+const LegendItem = ({ color, title }: { color?: string; title: string }) => {
+  return (
+    <div className="flex items-center gap-2">
+      <div
+        className={`w-3 h-3 rounded-sm ${!color ? "bg-slate-200" : ""}`}
+        style={color ? { backgroundColor: color } : {}}
+      ></div>
+      <div className="text-sm text-slate-900 capitalize">{title}</div>
+    </div>
+  );
+};
+
 const MostActiveCard = ({ children }: { children: ReactNode }) => {
   return (
     <Card className="grid place-content-stretch overflow-hidden">
@@ -186,19 +199,17 @@ export default function MostActiveContributorsCard({
 
       {/* key */}
       <div className="flex justify-center gap-4 flex-wrap">
-        {Object.entries(dataLabelsList).map(([key, value]) => (
-          <div
-            key={key}
-            className="flex items-center gap-2"
-            {...(labels.includes(key) ? null : { title: "coming soon" })}
-          >
-            <div
-              className={`w-3 h-3 rounded-sm ${labels.includes(key) ? "" : "bg-slate-200"}`}
-              style={labels.includes(key) ? { backgroundColor: value.color } : {}}
-            ></div>
-            <div className="text-sm text-slate-900 capitalize">{value.title}</div>
-          </div>
-        ))}
+        {Object.entries(dataLabelsList).map(([key, value]) => {
+          const isAvailable = labels.includes(key);
+
+          return isAvailable ? (
+            <LegendItem key={key} color={value.color} title={value.title} />
+          ) : (
+            <Tooltip direction="top" content="Coming soon">
+              <LegendItem key={key} title={value.title} />
+            </Tooltip>
+          );
+        })}
       </div>
     </MostActiveCard>
   );
@@ -215,10 +226,10 @@ function RowTooltip({
 }) {
   const labels = Object.keys(dataLabels);
   return (
-    <Tooltip.Root delayDuration={300}>
-      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content sideOffset={-10} align="center" collisionPadding={10} side={"bottom"} avoidCollisions>
+    <RawTooltip.Root delayDuration={300}>
+      <RawTooltip.Trigger asChild>{children}</RawTooltip.Trigger>
+      <RawTooltip.Portal>
+        <RawTooltip.Content sideOffset={-10} align="center" collisionPadding={10} side={"bottom"} avoidCollisions>
           <div className={clsx("text-xs p-2 rounded shadow-lg bg-white font-light")}>
             <div className="text-black font-bold mb-1">{contributor.login}</div>
             {Object.entries(dataLabelsList)
@@ -230,9 +241,9 @@ function RowTooltip({
                 </div>
               ))}
           </div>
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+        </RawTooltip.Content>
+      </RawTooltip.Portal>
+    </RawTooltip.Root>
   );
 }