reuseable tooltip

Mridul2820 · Jan 22, 2022 · 5659208 · 5659208 · vercel · Jan 22, 2022
1 parent c8cf654
commit 5659208
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>