FEAT: started working on the bar chart for the lang count

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,

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;

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;

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;
+  export interface LanguageCountAnalysis{
+    [language:string]:any;
+  }
+

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
   }
-};
+};
+
+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;
+    }
+}

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>