feat: implemented hover and highlight contribution graph (#1404)

lib/hooks/useContributorPullRequestsChart.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import getPullRequestsToDays from "lib/utils/get-prs-to-days";
 import { RepoList } from "components/molecules/CardRepoList/card-repo-list";
 import { getAvatarByUsername } from "lib/utils/github";
+import getFormattedTooltipValue from "lib/utils/get-formatted-tooltip-value";
 import useContributorPullRequests from "./api/useContributorPullRequests";
 
 const useContributorPullRequestsChart = (contributor: string, topic: string, repoIds: number[] = [], range = 30) => {
@@ -42,6 +43,10 @@ const useContributorPullRequestsChart = (contributor: string, topic: string, rep
         },
       },
     ],
+    tooltip: {
+      trigger: "axis",
+      formatter: getFormattedTooltipValue,
+    },
   };
 
   const [chart, setChart] = useState(lineChart);

lib/utils/get-formatted-tooltip-value.ts

@@ -0,0 +1,12 @@
+type TooltipParams = {
+  name: string;
+  value: number;
+};
+const getFormattedTooltipValue = (params: Array<TooltipParams>) => {
+  const currentParam = params[0];
+  const daysAgo = parseInt(currentParam.name) > 1 ? currentParam.name + " days ago" : currentParam.name + " day ago";
+  const prCount = currentParam.value > 1 ? currentParam.value + " PRs" : currentParam.value + " PR";
+  return `${daysAgo} <br/> ${prCount}`;
+};
+
+export default getFormattedTooltipValue;

stories/molecules/card-line-chart.stories.tsx

@@ -50,6 +50,9 @@ const testOptions = {
         color: "#FFB74D",
         opacity: 0.6,
       },
+      tooltip: {
+        trigger: "axis",
+      },
     },
   ],
 };