FEAT: added the topic tag cloud

package.json

@@ -15,7 +15,8 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-rough-notation": "^1.0.5"
+    "react-rough-notation": "^1.0.5",
+    "react-wordcloud": "^1.2.7"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",

src/Components/FollowerAnalysis/FollowingProgress.tsx

@@ -12,7 +12,7 @@ const FollowingProgress: React.FC<FollowingAnalysis> = ({
   followingCount,
   increaseOrDecrease,
 }) => {
-  const [show, setShow] = useState(true); // Define and initialize the state variable
+  const [show, setShow] = useState(true);
   return (
     <div className="relative group items-start justify-center">
     <div className="gradientbackGround w-full absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-red-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>

src/Components/FollowerAnalysis/RatioProgress.tsx

@@ -4,7 +4,7 @@ import {FollowerFollowingRatio} from "@/Interface/api.interface";
 
 
 export const RatioProgress: React.FC<FollowerFollowingRatio> = ({ FollowerToFollowingRatio }) => {
-    const ratio = FollowerToFollowingRatio || ""; // Using default parameter in function body
+    const ratio = FollowerToFollowingRatio || ""; 
     return (
       <div className="RatioProgressCard relative group items-start justify-center">
         <div className="w-full absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-red-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>

src/Components/PullReqAnalysis/PullReqProgress.tsx

@@ -17,7 +17,7 @@ const PullRequestProgress: React.FC<PullRequestAnalysis> = ({
     { name: "Open Count", value: openCount },
     { name: "Closed Count", value: closedCount },
   ];
-
+console.log(chartData)
   return (
     <div className="relative group items-start justify-center ml-16">
       <div className="pullReqGradientBack w-full absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-indigo-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
@@ -30,7 +30,7 @@ const PullRequestProgress: React.FC<PullRequestAnalysis> = ({
         </RoughNotation>
 
         <DonutChart
-          className="mt-4 h-28"
+          className="mt-4 h-26"
           data={chartData}
           category="value"
           index="name"

src/Components/Repository/RepoProgress.tsx

@@ -21,7 +21,7 @@ const RepoProgress: React.FC<RepoCountAnalysis> = ({
       <div className="gradientbackGround w-full absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
       <Card className="followerCard drop-shadow-2xl" style={{ backgroundColor:"black" }}>
         <div className="mb-3">
-      {show && ( // Conditional rendering based on show state
+      {show && ( 
           <RoughNotation type="underline" show={show} color="orange" strokeWidth={5}>
             <h2 className="followerAnalysisCardTitle font-mono">Repo Count</h2>
           </RoughNotation>

src/Components/TopicAnalysis/TopicProgress.tsx

@@ -0,0 +1,33 @@
+import React , {useState} from "react"
+import ReactWordcloud from "react-wordcloud"
+import { Card,Title } from "@tremor/react"
+import { TopicAnalaysis } from "@/Interface/api.interface"
+import { RoughNotation } from "react-rough-notation"
+interface TopicCountProps {
+    topicCounts:TopicAnalaysis
+}
+
+export const TopicProgress:React.FC<TopicCountProps>=({topicCounts})=>{
+    const [show,setShow] = useState(true)
+    const wordCloudData = Object.entries(topicCounts).map(([topic, count]) => ({
+        text: topic,
+        value: count
+      }));
+
+
+      const options:any ={
+        color:["black"]
+    }
+
+    return<div className="mt-2 relative group items-start justify-center ml-16">
+        <div className="topicBackGroundGrad w-full absolute -inset-0.5 bg-gradient-to-r from-yellow-300 to-red-400  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
+        <Card className="topicCloudCard">
+            <RoughNotation type="underline" show={show} color="pink" strokeWidth={5}>
+                <h2 className="topicCardTitle font-mono mb-2">Topics Worked</h2>
+            </RoughNotation>
+     <ReactWordcloud words={wordCloudData} options={options}/>
+        </Card>
+    </div>
+}
+
+export default TopicProgress

src/Interface/api.interface.ts

@@ -29,4 +29,8 @@ export interface RepoCountAnalysis{
 export interface PullRequestAnalysis{
   OpenCount: number;
   ClosedCount: number;
+}
+
+export interface TopicAnalaysis{
+  [Topic:string]:number
 }

src/Services/analysis.service.ts

@@ -64,4 +64,15 @@ export const getOpenCount = async(userId:string)=>{
   catch(err){
     return err;
   }
+}
+
+export const getTopicAnalysis= async(userId:string)=>{
+  const endPoint = "totalTopicsCounts"
+  try{
+    const response = await fetch(`${BASE_API}${endPoint}?id=${userId}`);
+    return response;
+  }
+  catch(err){
+    return err;
+  }
 }

src/Styles/Dashboard/followerProgress.css

@@ -1,13 +1,13 @@
 
   .followerCard {
     height: auto;
-    max-width: 250px; /* Set a maximum width to limit the card size */
-    border-radius: 50px; /* Combine border-radius definitions */
+    max-width: 250px;
+    border-radius: 50px; 
     justify-content: center;
     align-items: center;
     text-align: center;
     margin-left: 10%;
-    padding: 20px; /* Added padding for better spacing */
+    padding: 20px; 
     border-color: #3B3486;
 
   }
@@ -47,17 +47,34 @@
    border-radius: 55px;
   text-align: center;
   width: 320px;
-  height: 200px;
+  height: 175px;
 }
 .pullReqGradientBack{
-  height: 210px;
+  height: 180px;
   border-radius: 30px;
 }
 .pullRequestTitle{
    color: white;
    font-size: 15px;
    font-weight: bolder;
 }
+.topicCloudCard{
+  width: 320px;
+  height: 350px;
+  background-color: black;
+  border-radius: 50px;
+  text-align: center;
+}
+.topicBackGroundGrad{
+  height: 360px;
+  width: 325px;
+  border-radius: 35px;
+}
+.topicCardTitle{
+  font-size: 15px;
+  font-weight: bolder;
+  color: white;
+}
 
 
 

src/app/Dashboard/page.tsx

@@ -18,20 +18,25 @@ import {
   getLanguageCountAnalysis,
   getRepoCountAnalysis,
   getOpenCount,
-  getClosedCount
+  getClosedCount,
+  getTopicAnalysis
 } from "@/Services/analysis.service";
 import {
   FollowerAnalysis,
   FollowingAnalysis,
   LanguageCountAnalysis,
   RepoCountAnalysis,
-  PullRequestAnalysis
+  PullRequestAnalysis,
+  TopicAnalaysis
 } from "@/Interface/api.interface";
 import FollowerProgress from "@/Components/FollowerAnalysis/FollowerProgress";
 import FollowingProgress from "@/Components/FollowerAnalysis/FollowingProgress";
 import LanguageCount from "@/Components/LanguageAnalysis/LanguageCount";
 import RepoProgress from "@/Components/Repository/RepoProgress";
 import PullRequestProgress from "@/Components/PullReqAnalysis/PullReqProgress";
+import TopicProgress from "@/Components/TopicAnalysis/TopicProgress";
+
+
 
 
 const VersionDashboard: React.FC = () => {
@@ -54,6 +59,8 @@ const VersionDashboard: React.FC = () => {
 
   const [issueCount,setIssueCount] = useState<PullRequestAnalysis>({OpenCount:0,ClosedCount:0});
 
+  const [topicCount,setTopicCount] = useState<TopicAnalaysis>({});
+
 
   const getFollowerAnalysisData = async () => {
     try {
@@ -112,14 +119,26 @@ const VersionDashboard: React.FC = () => {
       const openCountData: { OpenCount: number } = await openResponse.json();
       const closedCountData: { ClosedCount: number } = await closedResponse.json();
 
-      console.log("here is the main data")
-      console.log(openCountData)
 
       setIssueCount({ OpenCount: openCountData.OpenCount, ClosedCount: closedCountData.ClosedCount });
     } catch (err) {
       console.error("Error fetching issue counts:", err);
     }
   };
+
+  const getTopicCountData = async()=>{
+    try{
+      const response:any = await getTopicAnalysis("64b2e27fd3b241f53c4b4c55")
+      const data: TopicAnalaysis = await response.json();
+      setTopicCount(data)
+      console.log("kjbkjbk")
+      console.log(data)
+    }
+    catch(err){
+      console.log(err)
+      return err;
+    }
+  }
 
 
 
@@ -131,6 +150,7 @@ const VersionDashboard: React.FC = () => {
     getLanguageCountAnalysisData();
     getRepoCountAnalysisData();
     getIssueCounts()
+    getTopicCountData()
   }, []);
 
   return followerAnlData.followerCount !== 0 &&
@@ -183,13 +203,22 @@ const VersionDashboard: React.FC = () => {
                 RepoCount={repoCount.RepoCount}
                 increaseOrDecrease={repoCount.increaseOrDecrease}
               />
+
             </div>
           </Grid>
         </div>
         <div className="langCountCardContainer drop-shadow-2xl">
           <LanguageCount languageCounts={langCount} />
         </div>
+        <div>
         <PullRequestProgress OpenCount={issueCount.OpenCount} ClosedCount={issueCount.ClosedCount}/>
+        <TopicProgress topicCounts={topicCount}/>
+        </div>
+
+
+      </div>
+      <div className="flex flex-row basis-20 mt-2">
+
       </div>
     </div>
   ) : (