From 71a740f6aa52c91fe5212e551f9252974f62aef8 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Tue, 12 Dec 2023 13:14:22 +0100 Subject: [PATCH 1/7] chore: add tooltip to dashboard highlight cards --- .../HighlightCard/highlight-card.tsx | 20 +++++++++++++++++-- components/organisms/Dashboard/dashboard.tsx | 7 +++++++ 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx index 2ba8e17dd2..6273fd1ada 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..b7037bc093 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")} From dd0573ff79b76acfe013ac0e4d6a994d4ffd7e20 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Tue, 12 Dec 2023 13:21:56 +0100 Subject: [PATCH 2/7] chore: minor changes to update static range --- components/organisms/Dashboard/dashboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/organisms/Dashboard/dashboard.tsx b/components/organisms/Dashboard/dashboard.tsx index b7037bc093..f9fc8a9799 100644 --- a/components/organisms/Dashboard/dashboard.tsx +++ b/components/organisms/Dashboard/dashboard.tsx @@ -28,7 +28,7 @@ const Dashboard = ({ repositories }: DashboardProps): JSX.Element => {
= 0} increased={compare1.allPrsTotal - compare2.allPrsTotal >= 0} From 82f7bb898ac8b5f48df51fb9322c3979ea2269fe Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Tue, 12 Dec 2023 14:16:04 +0100 Subject: [PATCH 3/7] chore: adjust tooltip padding --- components/molecules/HighlightCard/highlight-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx index 6273fd1ada..4171ff4265 100644 --- a/components/molecules/HighlightCard/highlight-card.tsx +++ b/components/molecules/HighlightCard/highlight-card.tsx @@ -162,7 +162,7 @@ const HighlightCard: React.FC = ({ {/* Label: Text */}
{tooltip ? ( - + {label} ) : label ? ( From 7ff468c91ea9554b072e46a55a16a5013a614557 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Tue, 12 Dec 2023 14:18:12 +0100 Subject: [PATCH 4/7] fix: typo error --- components/molecules/HighlightCard/highlight-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx index 4171ff4265..f8fc39b40d 100644 --- a/components/molecules/HighlightCard/highlight-card.tsx +++ b/components/molecules/HighlightCard/highlight-card.tsx @@ -162,7 +162,7 @@ const HighlightCard: React.FC = ({ {/* Label: Text */}
{tooltip ? ( - + {label} ) : label ? ( From a864b815fcec04af8ae682d904e83fe5b6616f7b Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Wed, 13 Dec 2023 21:25:41 +0100 Subject: [PATCH 5/7] chore: remove cursor pointer styles --- components/molecules/HighlightCard/highlight-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx index f8fc39b40d..88d01d15c6 100644 --- a/components/molecules/HighlightCard/highlight-card.tsx +++ b/components/molecules/HighlightCard/highlight-card.tsx @@ -160,7 +160,7 @@ const HighlightCard: React.FC = ({ {getIcon(icon)}
{/* Label: Text */} -
+
{tooltip ? ( {label} From 158241e2fd476f696456894ccf54a8306a0a9bd5 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Tue, 19 Dec 2023 11:00:59 +0100 Subject: [PATCH 6/7] refactor: update condition checks and remove label text fallback --- components/molecules/HighlightCard/highlight-card.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx index 88d01d15c6..55d89dd9a5 100644 --- a/components/molecules/HighlightCard/highlight-card.tsx +++ b/components/molecules/HighlightCard/highlight-card.tsx @@ -161,14 +161,14 @@ const HighlightCard: React.FC = ({
{/* Label: Text */}
- {tooltip ? ( + {tooltip && lable ? ( {label} ) : label ? ( label ) : ( - "Label" + "" )}
From 0b17caa607fc0bfd4a42fdedeca360abb3d29ba0 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Tue, 19 Dec 2023 17:34:33 +0100 Subject: [PATCH 7/7] fix: typo error is fixed --- components/molecules/HighlightCard/highlight-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/molecules/HighlightCard/highlight-card.tsx b/components/molecules/HighlightCard/highlight-card.tsx index 55d89dd9a5..cd3e994df0 100644 --- a/components/molecules/HighlightCard/highlight-card.tsx +++ b/components/molecules/HighlightCard/highlight-card.tsx @@ -161,7 +161,7 @@ const HighlightCard: React.FC = ({
{/* Label: Text */}
- {tooltip && lable ? ( + {tooltip && label ? ( {label}