FEAT: working on the bar chart for langauge

src/Components/FollowerAnalysis/FollowerProgress.tsx

@@ -13,7 +13,7 @@ const FollowerProgress: React.FC<FollowerAnalysis> = ({
 }) => {
   console.log(followerCount);
   return (
-    <Card className="followerCard" style={{ backgroundColor: "#000000" }}>
+    <Card className="followerCard drop-shadow-2xl" style={{ backgroundColor: "#FF1E56" }}>
       <h2 className="followerCardTitle font-mono">Followers</h2>
       <Flex>
         <ProgressCircle

src/Components/FollowerAnalysis/FollowingProgress.tsx

@@ -13,7 +13,7 @@ const FollowingProgress: React.FC<FollowingAnalysis> = ({
 }) => {
 
   return (
-    <Card className="followerCard" style={{ backgroundColor: "#000000" }}>
+    <Card className="followerCard " style={{ backgroundColor: "#F8FFD2" }}>
       <h2 className="followerCardTitle font-mono">Following</h2>
       <Flex>
         <ProgressCircle

src/Components/LanguageAnalysis/LanguageCount.tsx

@@ -1,21 +1,30 @@
-import React  from "react";
-import { BarChart , Card } from "@tremor/react";
+import React from "react";
+import { BarChart, Card } from "@tremor/react";
 import { LanguageCountAnalysis } from "@/Interface/api.interface";
 
+interface LanguageCountProps {
+  languageCounts: LanguageCountAnalysis;
+}
 
+const LanguageCount: React.FC<LanguageCountProps> = ({ languageCounts }) => {
+  const chartData = Object.entries(languageCounts).map(([name, count]) => ({
+    name,
+    "Lines of Languages used": count,
+  }));
 
-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}
-    />
-
+  return (
+    <Card className="langCountCard ">
+      <BarChart
+        className="mt-6"
+        data={chartData}
+        index="name"
+        categories={["Lines of Languages used"]}
+        colors={["orange"]}
+        valueFormatter={(value) => String(value)}
+        yAxisWidth={56}
+      />
     </Card>
-}
-export default LanguageCount;
+  );
+};
+
+export default LanguageCount;

src/Interface/api.interface.ts

@@ -10,6 +10,9 @@ export interface FollowerAnalysis {
   }
 
   export interface LanguageCountAnalysis{
-    [language:string]:any;
+
+      [LangName: string]: number;
+
+
   }
 

src/Services/analysis.service.ts

@@ -22,7 +22,7 @@ export const getFollowingAnalysis = async(userId:string)=>{
 }
 
 export const getLanguageCountAnalysis = async(userId:string)=>{
-    const endPoint = "tsotalLangaugeCountAnalysi"
+    const endPoint = "tsotalLanguageCountsAnalysi"
     try{
         const response = await fetch(`${BASE_API}${endPoint}?id=${userId}`)
         console.log(response)

src/Styles/Dashboard/followerProgress.css

@@ -1,15 +1,12 @@
-.gridLayout {
-    margin-top: 3%;
-  }
-
+
   .followerCard {
     height: auto;
     max-width: 250px; /* Set a maximum width to limit the card size */
     border-radius: 50px; /* Combine border-radius definitions */
     justify-content: center;
     align-items: center;
     text-align: center;
-    margin-left: 8%;
+    margin-left: 10%;
     padding: 20px; /* Added padding for better spacing */
     border-color: #3B3486;
 
@@ -19,15 +16,26 @@
     font-size: 15px;
     font-weight: bolder;
     margin-top: 0;
-    color: white;
+    color: black;
   }
 
   .followerProgressCircle {
     color: #864AF9;
-    margin-top: 5px; /* Adjusted margin for spacing */
+    margin-top: 5px; 
+    margin-right: 5%;
   }
 
   .followerBadge {
-    margin-top: 5px; /* Adjusted margin for spacing */
+    margin-top: 5px; 
   }
+
+  .langCountCard{
+   width: 600px;
+    height: auto;
+    background-color: black;
+  margin-left: 7%;
+  border-radius: 50px;
+  z-index: 1;
+  }
+
 

src/app/Dashboard/page.tsx

@@ -1,26 +1,36 @@
 "use client";
-import { getFollowerAnalysis,getFollowingAnalysis } from "@/Services/analysis.service";
-import {FollowerAnalysis,FollowingAnalysis} from "@/Interface/api.interface";
+import {
+  getFollowerAnalysis,
+  getFollowingAnalysis,
+  getLanguageCountAnalysis,
+} from "@/Services/analysis.service";
+import {
+  FollowerAnalysis,
+  FollowingAnalysis,
+  LanguageCountAnalysis,
+} from "@/Interface/api.interface";
 import FollowerProgress from "@/Components/FollowerAnalysis/FollowerProgress";
 import FollowingProgress from "@/Components/FollowerAnalysis/FollowingProgress";
+import LanguageCount from "@/Components/LanguageAnalysis/LanguageCount";  // Import the LanguageCount component
 import React, { useEffect, useState } from "react";
-import { Grid, Col, Card, Text, Metric } from "@tremor/react";
+import { Grid, Card, Flex } from "@tremor/react";
 
 const VersionDashboard: React.FC = () => {
   const [followerAnlData, setFollowerAnlData] = useState<FollowerAnalysis>({
     followerCount: 0,
     increaseOrDecrease: "",
   });
 
-  const [followingAnlData , setFollowingAnlData] = useState<FollowingAnalysis>({followingCount:0,increaseOrDecrease:""});
-
-
+  const [followingAnlData, setFollowingAnlData] = useState<FollowingAnalysis>({
+    followingCount: 0,
+    increaseOrDecrease: "",
+  });
+
+  const [langCount, setLangCount] = useState<LanguageCountAnalysis>({});
 
   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) {
@@ -30,34 +40,37 @@ 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) {
       console.error("Error fetching follower analysis:", error);
     }
   };
 
-
-
+  const getLanguageCountAnalysisData = async () => {
+    try {
+      const response: any = await getLanguageCountAnalysis("64b2e27fd3b241f53c4b4c55");
+      const data: LanguageCountAnalysis = await response.json();
+      setLangCount(data);
+    } catch (error) {
+      console.error("Error fetching language count analysis:", error);
+    }
+  };
+
   useEffect(() => {
     getFollowerAnalysisData();
     getFollowingAnalysisData();
-
+    getLanguageCountAnalysisData();
   }, []);
 
+  // ...
 
-
-  return followerAnlData.followerCount !== 0  && followingAnlData.followingCount !== 0? (
-    <div>
-      <Grid
-        numItems={1}
-        numItemsSm={2}
-        numItemsLg={5}
-        className="gap-5 gridLayout"
-      >
+return followerAnlData.followerCount !== 0 && followingAnlData.followingCount !== 0 ? (
+  <div>
+    <div className="flex flex-row basis-20 mt-10">
+      <div className="drop-shadow-2xl">
+      <Grid numItems={1} numItemsSm={2} numItemsLg={2} className="gap-3 ">
         <FollowerProgress
           followerCount={followerAnlData.followerCount}
           increaseOrDecrease={followerAnlData.increaseOrDecrease}
@@ -67,14 +80,17 @@ const VersionDashboard: React.FC = () => {
           followingCount={followingAnlData.followingCount}
           increaseOrDecrease={followerAnlData.increaseOrDecrease}
         />
-
-
-
       </Grid>
-    </div>
-  ) : (
-    <></>
-  );
+</div>
+      <div className="langCountCardContainer drop-shadow-2xl">
+        <LanguageCount languageCounts={langCount} />
+      </div>
+      </div>
+  </div>
+) : (
+  <></>
+);
+
 };
 
 export default VersionDashboard;

src/app/globals.css

@@ -17,9 +17,11 @@
 }
 
 body{
-  background-color: #171717;
+  background-color: #F5EEE6;
 }
 
+
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import "../Styles/Dashboard/followerProgress.css"
 
 const inter = Inter({ subsets: ["latin"] });