diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx index 2ba8e17dd2..cd3e994df0 100644 --- a/components/molecules/HighlightCard/highlight-card.tsx +++ b/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 = ({ valueLabel, contributors = [], isLoading, + tooltip, }) => { function getIcon(icon: string) { switch (icon) { @@ -154,7 +160,17 @@ const HighlightCard: React.FC = ({ {getIcon(icon)} {/* Label: Text */} -
{label ? label : "Label"}
+
+ {tooltip && label ? ( + + {label} + + ) : label ? ( + label + ) : ( + "" + )} +
{/* Last Updated Information */} diff --git a/components/organisms/Dashboard/dashboard.tsx b/components/organisms/Dashboard/dashboard.tsx index 7644d3001b..f9fc8a9799 100644 --- a/components/organisms/Dashboard/dashboard.tsx +++ b/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 => {
= 0} increased={compare1.allPrsTotal - compare2.allPrsTotal >= 0} @@ -36,6 +40,7 @@ const Dashboard = ({ repositories }: DashboardProps): JSX.Element => { = 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 => { = 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 => { = 0} increased={compare1.unlabeledPrsTotal - compare2.unlabeledPrsTotal >= 0} numChanged={humanizeNumber(Math.abs(compare1.unlabeledPrsTotal - compare2.unlabeledPrsTotal), "abbreviation")}