FEAT: working on the repo count visuliasiation/

SANKALP1011 · Feb 6, 2024 · c304984 · c304984
1 parent 0f1c7dd
commit c304984
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 39 deletions.
diff --git a/src/Components/Repository/RepoProgress.tsx b/src/Components/Repository/RepoProgress.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import {
+  Card,
+  Flex,
+  ProgressCircle,
+  BadgeDelta,
+} from "@tremor/react";
+import { RoughNotation } from "react-rough-notation";
+import { RepoCountAnalysis } from "@/Interface/api.interface";
+
+const RepoProgress: React.FC<RepoCountAnalysis> = ({
+  RepoCount,
+  increaseOrDecrease,
+}) => {
+  const [show, setShow] = useState(true); 
+
+
+
+  return (
+    <div className="relative group items-start justify-center">
+      <div className="bb 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
+          <RoughNotation type="underline" show={show} color="orange" strokeWidth={5}>
+            <h2 className="followerCardTitle font-mono">Repo Count</h2>
+          </RoughNotation>
+        )}
+        </div>
+        <Flex>
+          <ProgressCircle
+            className="followerProgressCircle"
+            value={RepoCount}
+            radius={40}
+            strokeWidth={10}
+            tooltip="Followers"
+            color={"green"}
+          >
+            <span className="text-md text-gray-700 font-large ">{RepoCount}</span>
+          </ProgressCircle>
+          {increaseOrDecrease === "no_change" ? (
+            <BadgeDelta
+              deltaType="unchanged"
+              isIncreasePositive={true}
+              size="sm"
+              color={"green"}
+            >
+              No Change
+            </BadgeDelta>
+          ) : (
+            <BadgeDelta
+              className="followerBadge"
+              deltaType="moderateIncrease"
+              isIncreasePositive={true}
+              size="sm"
+              color={"green"}
+            >
+              Increase
+            </BadgeDelta>
+          )}
+        </Flex>
+      </Card>
+    </div>
+  );
+};
+
+export default RepoProgress;
diff --git a/src/Interface/api.interface.ts b/src/Interface/api.interface.ts
@@ -19,4 +19,9 @@ export interface FollowerFollowingRatio {
     FollowerToFollowingRatio: String;
 
 
+}
+
+export interface RepoCountAnalysis{
+  RepoCount: number;
+  increaseOrDecrease:string
 }
diff --git a/src/Services/analysis.service.ts b/src/Services/analysis.service.ts
@@ -33,8 +33,8 @@ export const getLanguageCountAnalysis = async(userId:string)=>{
     }
 }
 
-export const getFollowerFollowingRation = async(userId:string)=>{
-  const endPoint = "followerToFollowingRatio"
+export const getRepoCountAnalysis = async(userId:string)=>{
+  const endPoint = "repoCountAnalysis"
   try{
     const response = await fetch(`${BASE_API}${endPoint}?id=${userId}`)
     return response

diff --git a/src/app/Dashboard/page.tsx b/src/app/Dashboard/page.tsx
@@ -1,11 +1,33 @@
-"use client"
+"use client";
 import React, { useEffect, useState } from "react";
-import { Grid, Flex, Text, ProgressBar, TabGroup, TabList, Tab, TabPanels, TabPanel ,Card } from "@tremor/react";
-import { getFollowerAnalysis, getFollowingAnalysis, getLanguageCountAnalysis } from "@/Services/analysis.service";
-import { FollowerAnalysis, FollowingAnalysis, LanguageCountAnalysis } from "@/Interface/api.interface";
+import {
+  Grid,
+  Flex,
+  Text,
+  ProgressBar,
+  TabGroup,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+  Card,
+} from "@tremor/react";
+import {
+  getFollowerAnalysis,
+  getFollowingAnalysis,
+  getLanguageCountAnalysis,
+  getRepoCountAnalysis,
+} from "@/Services/analysis.service";
+import {
+  FollowerAnalysis,
+  FollowingAnalysis,
+  LanguageCountAnalysis,
+  RepoCountAnalysis,
+} 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";
 
 const VersionDashboard: React.FC = () => {
   const [followerAnlData, setFollowerAnlData] = useState<FollowerAnalysis>({
@@ -20,9 +42,16 @@ const VersionDashboard: React.FC = () => {
 
   const [langCount, setLangCount] = useState<LanguageCountAnalysis>({});
 
+  const [repoCount, setRepoCount] = useState<RepoCountAnalysis>({
+    RepoCount: 0,
+    increaseOrDecrease: "",
+  });
+
   const getFollowerAnalysisData = async () => {
     try {
-      const response: any = await getFollowerAnalysis("64b2e27fd3b241f53c4b4c55");
+      const response: any = await getFollowerAnalysis(
+        "64b2e27fd3b241f53c4b4c55"
+      );
       const data: FollowerAnalysis = await response.json();
       setFollowerAnlData(data);
     } catch (error) {
@@ -32,7 +61,9 @@ const VersionDashboard: React.FC = () => {
 
   const getFollowingAnalysisData = async () => {
     try {
-      const response: any = await getFollowingAnalysis("64b2e27fd3b241f53c4b4c55");
+      const response: any = await getFollowingAnalysis(
+        "64b2e27fd3b241f53c4b4c55"
+      );
       const data: FollowingAnalysis = await response.json();
       setFollowingAnlData(data);
     } catch (error) {
@@ -42,21 +73,37 @@ const VersionDashboard: React.FC = () => {
 
   const getLanguageCountAnalysisData = async () => {
     try {
-      const response: any = await getLanguageCountAnalysis("64b2e27fd3b241f53c4b4c55");
+      const response: any = await getLanguageCountAnalysis(
+        "64b2e27fd3b241f53c4b4c55"
+      );
       const data: LanguageCountAnalysis = await response.json();
       setLangCount(data);
     } catch (error) {
       console.error("Error fetching language count analysis:", error);
     }
   };
 
+  const getRepoCountAnalysisData = async () => {
+    try {
+      const response: any = await getRepoCountAnalysis(
+        "64b2e27fd3b241f53c4b4c55"
+      );
+      const data: RepoCountAnalysis = await response.json();
+      setRepoCount(data);
+    } catch (error) {
+      console.error("Error fetching language count analysis:", error);
+    }
+  };
+
   useEffect(() => {
     getFollowerAnalysisData();
     getFollowingAnalysisData();
     getLanguageCountAnalysisData();
+    getRepoCountAnalysisData();
   }, []);
 
-  return followerAnlData.followerCount !== 0 && followingAnlData.followingCount !== 0 ? (
+  return followerAnlData.followerCount !== 0 &&
+    followingAnlData.followingCount !== 0 ? (
     <div>
       <div className="flex flex-row basis-20 mt-10">
         <div className="drop-shadow-2xl">
@@ -70,35 +117,43 @@ const VersionDashboard: React.FC = () => {
               increaseOrDecrease={followerAnlData.increaseOrDecrease}
             />
           </Grid>
-          <div className="ml-6 mt-8 relative group items-start justify-cente">
-          <div className="tabCardBackGradient absolute -inset-0.5 bg-gradient-to-r from-green-600 to-blue-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
-            <Card className="tabCard">
-            <TabGroup>
-              <TabList className="mt-8">
-                <Tab>Repos</Tab>
-                <Tab>Ratio</Tab>
-                <Tab>Stars</Tab>
-              </TabList>
-              <TabPanels>
-                <TabPanel className="ml-4">
-                  <div className="mt-10">
-                   <p>nnk</p>
-                  </div>
-                </TabPanel>
-                <TabPanel>
-                  <div className="mt-10">
-                   <p>knkn</p>
-                  </div>
-                </TabPanel>
-                <TabPanel>
-                  <div className="mt-10">
-                   <p>knkn</p>
-                  </div>
-                </TabPanel>
-              </TabPanels>
-            </TabGroup>
-            </Card>
-          </div>
+          <Grid numItems={1} numItemsLg={2}>
+            <div className="ml-6 mt-8 relative group items-start justify-cente">
+              <div className="tabCardBackGradient absolute -inset-0.5 bg-gradient-to-r from-green-600 to-blue-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
+              <Card className="tabCard">
+                <TabGroup>
+                  <TabList className="mt-8">
+                    <Tab>Repos</Tab>
+                    <Tab>Ratio</Tab>
+                    <Tab>Stars</Tab>
+                  </TabList>
+                  <TabPanels>
+                    <TabPanel className="ml-4">
+                      <div className="mt-10">
+                        <p>nnk</p>
+                      </div>
+                    </TabPanel>
+                    <TabPanel>
+                      <div className="mt-10">
+                        <p>knkn</p>
+                      </div>
+                    </TabPanel>
+                    <TabPanel>
+                      <div className="mt-10">
+                        <p>knkn</p>
+                      </div>
+                    </TabPanel>
+                  </TabPanels>
+                </TabGroup>
+              </Card>
+            </div>
+            <div>
+              <RepoProgress
+                RepoCount={repoCount.RepoCount}
+                increaseOrDecrease={repoCount.increaseOrDecrease}
+              />
+            </div>
+          </Grid>
         </div>
         <div className="langCountCardContainer drop-shadow-2xl">
           <LanguageCount languageCounts={langCount} />