From 56592086caca9d25cf4083d87387a80d1d40e8cb Mon Sep 17 00:00:00 2001
From: Mridul2820 <immridulpanda2820@gmail.com>
Date: Sat, 22 Jan 2022 09:49:22 +0530
Subject: [PATCH] reuseable tooltip

---
 components/graphs/ContributionGraph.js | 22 ++--------------------
 components/graphs/MostForked.js        |  2 +-
 components/graphs/MostStar.js          |  2 +-
 components/reuse/CustomTooltip.js      |  8 ++++----
 4 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/components/graphs/ContributionGraph.js b/components/graphs/ContributionGraph.js
index 3d72ea3..67f2475 100644
--- a/components/graphs/ContributionGraph.js
+++ b/components/graphs/ContributionGraph.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { LineChart, Line, Tooltip, YAxis, XAxis, ResponsiveContainer, CartesianGrid } from 'recharts';
+import CustomTooltip from '../reuse/CustomTooltip';
 
 const ContributionGraph = ({ weeks,username }) => {
     let contributions = []
@@ -20,25 +21,6 @@ const ContributionGraph = ({ weeks,username }) => {
         36 + presentDay
     );
 
-    const CustomTooltip = ({ active, payload, label }) => {
-        if (active && payload && payload.length) {
-            return (
-                <div className="custom-tooltip backdrop-blur-sm shadow-sm bg-slate-50 p-2">
-                    <p className="intro font-semibold">
-                        {`Contribution : ${payload[0].value}`}
-                    </p>
-
-                    <p className="label">
-                        {`Date : ${label}`}
-                    </p>
-
-                </div>
-            );
-        }
-      
-        return null;
-    };
-
     const tickDate = value => {
         const roundVal = new Date(value).getDate();
 
@@ -63,7 +45,7 @@ const ContributionGraph = ({ weeks,username }) => {
                     >
                         <CartesianGrid/>
                         <Tooltip 
-                            content={<CustomTooltip />}
+                            content={<CustomTooltip customLabel1="Date" customLabel2="Contribution" />}
                         />
                         <XAxis 
                             dataKey="date"
diff --git a/components/graphs/MostForked.js b/components/graphs/MostForked.js
index dca47c5..d6d8c5d 100644
--- a/components/graphs/MostForked.js
+++ b/components/graphs/MostForked.js
@@ -44,7 +44,7 @@ const MostForked = ({ repos }) => {
                         width={24}
                         tickFormatter={tickFork}
                     />
-                    <Tooltip content={<CustomTooltip />} />
+                    <Tooltip content={<CustomTooltip customLabel1="Repository" customLabel2="Fork Count" />} />
                     <Bar dataKey="forkCount" fill="#8884d8" />
                 </BarChart>
             </ResponsiveContainer>
diff --git a/components/graphs/MostStar.js b/components/graphs/MostStar.js
index 45bd637..aa785b6 100644
--- a/components/graphs/MostStar.js
+++ b/components/graphs/MostStar.js
@@ -44,7 +44,7 @@ const MostStar = ({ repos }) => {
                         width={24}
                         tickFormatter={tickFork}
                     />
-                    <Tooltip content={<CustomTooltip />} />
+                    <Tooltip content={<CustomTooltip customLabel1="Repository" customLabel2="Star Count" />} />
 
                     <Bar dataKey="stargazerCount" fill="#82ca9d" />
                 </BarChart>
diff --git a/components/reuse/CustomTooltip.js b/components/reuse/CustomTooltip.js
index 53081ee..dd99523 100644
--- a/components/reuse/CustomTooltip.js
+++ b/components/reuse/CustomTooltip.js
@@ -1,17 +1,17 @@
 import React from 'react';
 
-const CustomTooltip = ({ active, payload }) => {
+const CustomTooltip = ({ active, payload, customLabel1, customLabel2, label }) => {
 
     if (active && payload && payload.length) {
         return (
             <div className="custom-tooltip backdrop-blur-sm shadow-sm bg-slate-50 p-2">
                 <p className="flex gap-3">
-                    <span>Repository : </span>
-                    <span className="font-semibold">{payload[0].payload.name}</span>
+                    <span>{customLabel1} : </span>
+                    <span className="font-semibold">{label}</span>
                 </p>
 
                 <p className="flex gap-3">
-                    <span>Star Count : </span>
+                    <span>{customLabel2} : </span>
                     <span className="font-semibold">{payload[0].value}</span>
                 </p>
             </div>