Custop Tooltip for bar graphs

Mridul2820 · Jan 21, 2022 · c8cf654 · c8cf654 · vercel · Jan 21, 2022
1 parent 429207e
commit c8cf654
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/components/graphs/MostForked.js b/components/graphs/MostForked.js
@@ -1,6 +1,7 @@
-import { truncate } from 'lodash';
 import React from 'react'
+import { truncate } from 'lodash';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import CustomTooltip from '../reuse/CustomTooltip';
 
 const MostForked = ({ repos }) => {
     const sortByFork = repos.slice(0).sort((a, b) => (a.forkCount > b.forkCount ? -1 : 1)).slice(0, 4)
@@ -43,7 +44,7 @@ const MostForked = ({ repos }) => {
                         width={24}
                         tickFormatter={tickFork}
                     />
-                    <Tooltip />
+                    <Tooltip content={<CustomTooltip />} />
                     <Bar dataKey="forkCount" fill="#8884d8" />
                 </BarChart>
             </ResponsiveContainer>

diff --git a/components/graphs/MostStar.js b/components/graphs/MostStar.js
@@ -1,6 +1,7 @@
-import { truncate } from 'lodash';
 import React from 'react'
+import { truncate } from 'lodash';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import CustomTooltip from '../reuse/CustomTooltip';
 
 const MostStar = ({ repos }) => {
     const sortByFork = repos.slice(0).sort((a, b) => (a.stargazerCount > b.stargazerCount ? -1 : 1)).slice(0, 4)
@@ -43,7 +44,8 @@ const MostStar = ({ repos }) => {
                         width={24}
                         tickFormatter={tickFork}
                     />
-                    <Tooltip />
+                    <Tooltip content={<CustomTooltip />} />
+
                     <Bar dataKey="stargazerCount" fill="#82ca9d" />
                 </BarChart>
             </ResponsiveContainer>

diff --git a/components/reuse/CustomTooltip.js b/components/reuse/CustomTooltip.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const CustomTooltip = ({ active, payload }) => {
+
+    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>
+                </p>
+
+                <p className="flex gap-3">
+                    <span>Star Count : </span>
+                    <span className="font-semibold">{payload[0].value}</span>
+                </p>
+            </div>
+        );
+    }
+    return null;
+};
+
+export default CustomTooltip;