From 311eebf055199acdf3b09719b5876cfc5de41a77 Mon Sep 17 00:00:00 2001
From: SANKALP PANDEY <tigerishan426@gmail.com>
Date: Sun, 4 Feb 2024 23:39:13 +0530
Subject: [PATCH] FEAT: started working on the bar chart for the lang count

---
 .../FollowerAnalysis/FollowerProgress.tsx     |  2 +-
 .../FollowerAnalysis/FollowingProgress.tsx    | 47 +++++++++++++++++++
 .../LanguageAnalysis/LanguageCount.tsx        | 21 +++++++++
 src/Interface/api.interface.ts                | 18 +++++--
 src/Services/analysis.service.ts              | 27 ++++++++++-
 src/app/Dashboard/page.tsx                    | 38 +++++++++++----
 6 files changed, 136 insertions(+), 17 deletions(-)
 create mode 100644 src/Components/FollowerAnalysis/FollowingProgress.tsx
 create mode 100644 src/Components/LanguageAnalysis/LanguageCount.tsx

diff --git a/src/Components/FollowerAnalysis/FollowerProgress.tsx b/src/Components/FollowerAnalysis/FollowerProgress.tsx
index 96f6628..f121136 100644
--- a/src/Components/FollowerAnalysis/FollowerProgress.tsx
+++ b/src/Components/FollowerAnalysis/FollowerProgress.tsx
@@ -5,7 +5,7 @@ import {
   ProgressCircle,
   BadgeDelta,
 } from "@tremor/react";
-import FollowerAnalysis from "@/Interface/api.interface";
+import {FollowerAnalysis} from "@/Interface/api.interface";
 
 const FollowerProgress: React.FC<FollowerAnalysis> = ({
   followerCount,
diff --git a/src/Components/FollowerAnalysis/FollowingProgress.tsx b/src/Components/FollowerAnalysis/FollowingProgress.tsx
new file mode 100644
index 0000000..164d57e
--- /dev/null
+++ b/src/Components/FollowerAnalysis/FollowingProgress.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import {
+  Card,
+  Flex,
+  ProgressCircle,
+  BadgeDelta,
+} from "@tremor/react";
+import {FollowingAnalysis} from "@/Interface/api.interface";
+
+const FollowingProgress: React.FC<FollowingAnalysis> = ({
+  followingCount,
+  increaseOrDecrease,
+}) => {
+
+  return (
+    <Card className="followerCard" style={{ backgroundColor: "#000000" }}>
+      <h2 className="followerCardTitle font-mono">Following</h2>
+      <Flex>
+        <ProgressCircle
+          className="followerProgressCircle"
+          value={followingCount}
+          radius={40}
+          strokeWidth={12}
+          tooltip="Following"
+          color={"purple"}
+
+        > <span className="text-md text-gray-700 font-large ">{followingCount}</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={""}
+          >
+            Increase
+          </BadgeDelta>
+        )}
+      </Flex>
+    </Card>
+  );
+};
+
+export default FollowingProgress;
diff --git a/src/Components/LanguageAnalysis/LanguageCount.tsx b/src/Components/LanguageAnalysis/LanguageCount.tsx
new file mode 100644
index 0000000..07e2cc5
--- /dev/null
+++ b/src/Components/LanguageAnalysis/LanguageCount.tsx
@@ -0,0 +1,21 @@
+import React  from "react";
+import { BarChart , Card } from "@tremor/react";
+import { LanguageCountAnalysis } from "@/Interface/api.interface";
+
+
+
+export const LanguageCount: React.FC<LanguageCountAnalysis> =({LangName , LangCount})=>{
+    return <Card>
+    <BarChart
+      className="mt-6"
+      data={LangName}
+      index="name"
+      categories={["Number of threatened species"]}
+      colors={["blue"]}
+      valueFormatter={LangCount}
+      yAxisWidth={48}
+    />
+
+    </Card>
+}
+export default LanguageCount;
\ No newline at end of file
diff --git a/src/Interface/api.interface.ts b/src/Interface/api.interface.ts
index 79ffd72..71e6c5c 100644
--- a/src/Interface/api.interface.ts
+++ b/src/Interface/api.interface.ts
@@ -1,7 +1,15 @@
-interface FollowerAnalysis{
+// follower-analysis.interface.ts
+export interface FollowerAnalysis {
     followerCount: number;
-    increaseOrDecrease: String
+    increaseOrDecrease: string; // Use lowercase 'string'
+  }
+  
+  export interface FollowingAnalysis {
+    followingCount: number;
+    increaseOrDecrease: string;
+  }
 
-}
-
-export default FollowerAnalysis;
\ No newline at end of file
+  export interface LanguageCountAnalysis{
+    [language:string]:any;
+  }
+  
\ No newline at end of file
diff --git a/src/Services/analysis.service.ts b/src/Services/analysis.service.ts
index b1eb614..a5855e9 100644
--- a/src/Services/analysis.service.ts
+++ b/src/Services/analysis.service.ts
@@ -3,9 +3,32 @@ import { BASE_API } from "../Utils/api.utils";
 export const getFollowerAnalysis = async (userId: string) => {
   const endPoint = "followerAnalysis";
   try {
-    const response = await fetch(`${BASE_API}${endPoint}?id=${userId}`,{cache:"force-cache"})
+    const response = await fetch(`${BASE_API}${endPoint}?id=${userId}`)
     return response;
   } catch (error) {
     return error
   }
-};
\ No newline at end of file
+};
+
+export const getFollowingAnalysis = async(userId:string)=>{
+    const endPoint = "followingAnalysis"
+    try{
+        const response = await fetch(`${BASE_API}${endPoint}?id=${userId}`)
+        return response;
+    }
+    catch(err){
+        return err;
+    }
+}
+
+export const getLanguageCountAnalysis = async(userId:string)=>{
+    const endPoint = "tsotalLangaugeCountAnalysi"
+    try{
+        const response = await fetch(`${BASE_API}${endPoint}?id=${userId}`)
+        console.log(response)
+        return response;
+    }
+    catch(err){
+        return err;
+    }
+}
\ No newline at end of file
diff --git a/src/app/Dashboard/page.tsx b/src/app/Dashboard/page.tsx
index 8c0d643..385938a 100644
--- a/src/app/Dashboard/page.tsx
+++ b/src/app/Dashboard/page.tsx
@@ -1,7 +1,8 @@
 "use client";
-import { getFollowerAnalysis } from "@/Services/analysis.service";
-import FollowerAnalysis from "@/Interface/api.interface";
+import { getFollowerAnalysis,getFollowingAnalysis } from "@/Services/analysis.service";
+import {FollowerAnalysis,FollowingAnalysis} from "@/Interface/api.interface";
 import FollowerProgress from "@/Components/FollowerAnalysis/FollowerProgress";
+import FollowingProgress from "@/Components/FollowerAnalysis/FollowingProgress";
 import React, { useEffect, useState } from "react";
 import { Grid, Col, Card, Text, Metric } from "@tremor/react";
 
@@ -11,6 +12,10 @@ const VersionDashboard: React.FC = () => {
     increaseOrDecrease: "",
   });
 
+  const [followingAnlData , setFollowingAnlData] = useState<FollowingAnalysis>({followingCount:0,increaseOrDecrease:""});
+
+
+
   const getFollowerAnalysisData = async () => {
     try {
       const response: any = await getFollowerAnalysis(
@@ -23,11 +28,29 @@ const VersionDashboard: React.FC = () => {
     }
   };
 
+  const getFollowingAnalysisData = async () => {
+    try {
+      const response: any = await getFollowingAnalysis(
+        "64b2e27fd3b241f53c4b4c55"
+      );
+      const data: FollowingAnalysis = await response.json();
+      setFollowingAnlData(data);
+    } catch (error) {
+      console.error("Error fetching follower analysis:", error);
+    }
+  };
+
+  
+  
   useEffect(() => {
     getFollowerAnalysisData();
+    getFollowingAnalysisData();
+
   }, []);
 
-  return followerAnlData.followerCount !== 0 ? (
+
+
+  return followerAnlData.followerCount !== 0  && followingAnlData.followingCount !== 0? (
     <div>
       <Grid
         numItems={1}
@@ -40,14 +63,11 @@ const VersionDashboard: React.FC = () => {
           increaseOrDecrease={followerAnlData.increaseOrDecrease}
         />
 
-        <FollowerProgress
-          followerCount={followerAnlData.followerCount}
-          increaseOrDecrease={followerAnlData.increaseOrDecrease}
-        />
-         <FollowerProgress
-          followerCount={followerAnlData.followerCount}
+        <FollowingProgress
+          followingCount={followingAnlData.followingCount}
           increaseOrDecrease={followerAnlData.increaseOrDecrease}
         />
+
        
        
       </Grid>