chore: add helper tooltip to dashboard highlight cards

components/molecules/HighlightCard/highlight-card.tsx

@@ -3,15 +3,19 @@ import Image from "next/image";
 import { GoCommit } from "react-icons/go";
 import { HiOutlineCheck, HiPlus } from "react-icons/hi";
 import { HiArrowPath } from "react-icons/hi2";
+import clsx from "clsx";
+
 import Card from "components/atoms/Card/card";
 import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
+import Tooltip from "components/atoms/Tooltip/tooltip";
+import StackedAvatar, { Contributor } from "../StackedAvatar/stacked-avatar";
+
 import repoIcon from "../../../img/icons/icon-repo--blue.svg";
 import mergedPrIcon from "../../../img/icons/icon-merged-pr--purple.svg";
 import personIcon from "../../../img/icons/person-icon.svg";
 import labelIcon from "../../../img/icons/icon-label--blue.svg";
 import thumbsIcon from "../../../img/icons/icon-thumbs-down--yellow.svg";
 import metricArrow from "../../../img/icons/metric-arrow.svg";
-import StackedAvatar, { Contributor } from "../StackedAvatar/stacked-avatar";
 
 interface HighlightCardProps {
   className?: string;
@@ -35,6 +39,7 @@ interface HighlightCardProps {
   valueLabel?: string;
   contributors?: Contributor[];
   isLoading?: boolean;
+  tooltip?: string;
 }
 
 type IconMap = {
@@ -109,6 +114,7 @@ const HighlightCard: React.FC<HighlightCardProps> = ({
   valueLabel,
   contributors = [],
   isLoading,
+  tooltip,
 }) => {
   function getIcon(icon: string) {
     switch (icon) {
@@ -154,7 +160,17 @@ const HighlightCard: React.FC<HighlightCardProps> = ({
               {getIcon(icon)}
             </div>
             {/* Label: Text */}
-            <div className="text-sm text-slate-600   leading-none">{label ? label : "Label"}</div>
+            <div className={clsx("text-sm text-slate-600 leading-none", tooltip && "cursor-pointer")}>
+              {tooltip ? (
+                <Tooltip className="w-44 py-3 text-center" content={tooltip}>
+                  {label}
+                </Tooltip>
+              ) : label ? (
+                label
+              ) : (
+                "Label"
+              )}
+            </div>
           </div>
 
           {/* Last Updated Information */}

components/organisms/Dashboard/dashboard.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from "next/router";
 import HighlightCard from "components/molecules/HighlightCard/highlight-card";
 
 import humanizeNumber from "lib/utils/humanizeNumber";
@@ -16,6 +17,8 @@ interface DashboardProps {
 const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
   const { data: insightsData, isLoading } = useInsights(repositories);
   const { data: contributorData, meta: contributorMeta } = useContributors(undefined, repositories);
+  const router = useRouter();
+  const { range = 30 } = router.query;
 
   const compare1 = getInsights(insightsData, 30);
   const compare2 = getInsights(insightsData, 60);
@@ -25,6 +28,7 @@ const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
       <section className="flex flex-wrap items-center max-w-full gap-4 lg:flex-row lg:flex-nowrap">
         <HighlightCard
           label="Contributors"
+          tooltip={`People who have made pull requests to the selected repositories over the last ${range} days.`}
           icon="contributors"
           metricIncreases={compare1.allPrsTotal - compare2.allPrsTotal >= 0}
           increased={compare1.allPrsTotal - compare2.allPrsTotal >= 0}
@@ -36,6 +40,7 @@ const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
         <HighlightCard
           label="Spam"
           icon="spam"
+          tooltip={`An issue or pull request labeled as spam on the selected repositories over the last ${range} days.`}
           metricIncreases={compare1.spamTotal - compare2.spamTotal >= 0}
           increased={compare1.spamTotal - compare2.spamTotal >= 0}
           numChanged={humanizeNumber(Math.abs(compare1.spamTotal - compare2.spamTotal), "abbreviation")}
@@ -46,6 +51,7 @@ const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
         <HighlightCard
           label="Merged PRs"
           icon="merged-pr"
+          tooltip={`Pull requests that have been successfully merged into the codebase in the last ${range} days.`}
           metricIncreases={compare1.acceptedTotal - compare2.acceptedTotal >= 0}
           increased={compare1.acceptedTotal - compare2.acceptedTotal >= 0}
           numChanged={humanizeNumber(Math.abs(compare1.acceptedTotal - compare2.acceptedTotal), "abbreviation")}
@@ -56,6 +62,7 @@ const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
         <HighlightCard
           label="Unlabeled PRs"
           icon="unlabeled-pr"
+          tooltip={`The number of open or closed PRs that have not been labeled in the last ${range} days.`}
           metricIncreases={compare1.unlabeledPrsTotal - compare2.unlabeledPrsTotal >= 0}
           increased={compare1.unlabeledPrsTotal - compare2.unlabeledPrsTotal >= 0}
           numChanged={humanizeNumber(Math.abs(compare1.unlabeledPrsTotal - compare2.unlabeledPrsTotal), "abbreviation")}