From 0da915160334254a80f45a0e86602ba71ec4358e Mon Sep 17 00:00:00 2001
From: SANKALP PANDEY <tigerishan426@gmail.com>
Date: Tue, 13 Feb 2024 19:37:25 +0530
Subject: [PATCH] FEAT: added the total lang analyssi card

---
 .../FollowerAnalysis/FollowerProgress.tsx     |  2 +-
 .../FollowerAnalysis/FollowingProgress.tsx    |  2 +-
 .../LanguageAnalysis/TotalLangProgress.tsx    | 47 ++++++++++++++-----
 src/Components/Repository/RepoProgress.tsx    |  2 +-
 src/Styles/Dashboard/langCount.css            | 27 ++++++++++-
 src/app/Dashboard/page.tsx                    |  3 +-
 6 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/src/Components/FollowerAnalysis/FollowerProgress.tsx b/src/Components/FollowerAnalysis/FollowerProgress.tsx
index f51c85b..d2e643a 100644
--- a/src/Components/FollowerAnalysis/FollowerProgress.tsx
+++ b/src/Components/FollowerAnalysis/FollowerProgress.tsx
@@ -36,7 +36,7 @@ const FollowerProgress: React.FC<FollowerAnalysis> = ({
             tooltip="Followers"
             color={"green"}
           >
-            <span className="text-md text-gray-700 font-large ">{followerCount}</span>
+            <span className="text-md text-pink-700 font-large font-bold font-mono">{followerCount}</span>
           </ProgressCircle>
           {increaseOrDecrease === "no_change" ? (
             <BadgeDelta
diff --git a/src/Components/FollowerAnalysis/FollowingProgress.tsx b/src/Components/FollowerAnalysis/FollowingProgress.tsx
index 5a49a13..6a66673 100644
--- a/src/Components/FollowerAnalysis/FollowingProgress.tsx
+++ b/src/Components/FollowerAnalysis/FollowingProgress.tsx
@@ -33,7 +33,7 @@ const FollowingProgress: React.FC<FollowingAnalysis> = ({
           tooltip="Following"
           color={"purple"}
 
-        > <span className="text-md text-gray-700 font-large ">{followingCount}</span></ProgressCircle>
+        > <span className="text-md text-red-700 font-large  font-extrabold font-mono">{followingCount}</span></ProgressCircle>
         {increaseOrDecrease === "no_change" ? (
           <BadgeDelta deltaType="unchanged" isIncreasePositive={true}
           size="sm" color={"green"}>No Change</BadgeDelta>
diff --git a/src/Components/LanguageAnalysis/TotalLangProgress.tsx b/src/Components/LanguageAnalysis/TotalLangProgress.tsx
index 48e0e57..0726b17 100644
--- a/src/Components/LanguageAnalysis/TotalLangProgress.tsx
+++ b/src/Components/LanguageAnalysis/TotalLangProgress.tsx
@@ -1,21 +1,42 @@
-import React from "react";
-import { Card, BarList,ProgressBar } from "@tremor/react";
-import { TotalLangAnalysis } from "@/Interface/api.interface";
+import React , {useState} from "react";
+import {
+  Card,
+  Flex,
+  ProgressCircle,
+  BadgeDelta,
+} from "@tremor/react";
+import { RoughNotation } from "react-rough-notation";
+import {TotalLangAnalysis} from "@/Interface/api.interface";
 
 const TotalLangProgress: React.FC<TotalLangAnalysis> = ({
-  TotalCodePushedSinceJoingingGit,
+TotalCodePushedSinceJoingingGit
 }) => {
+  const [show, setShow] = useState(true);
+  return (
+    <div className="relative group items-start justify-center mt-5 ml-16">
+    <div className="langGradientBack 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>
+    <Card className="totalLangCard " style={{ backgroundColor: "black" }}>
+    <div className="mb-3">
+      {show && ( 
+          <RoughNotation type="underline" show={show} color="red" strokeWidth={5}>
+            <h2 className="totalLangrAnalysisCardTitle font-mono mb-5">Lines of code pushed</h2>
+          </RoughNotation>
+        )}
+        </div>
 
-  const bars = [
-    { name: "Total Count", value: TotalCodePushedSinceJoingingGit },
-  ];
+        <ProgressCircle
+          className="totalLangProgressCircle"
+          value={TotalCodePushedSinceJoingingGit}
+          radius={80}
+          strokeWidth={12}
+          tooltip="Lines of code pushed since joining git"
+          color={"orange"}
+          size="xl"
 
-  return (
-    <div className="relative group items-start justify-center ml-6 mt-6">
-        <div className="totalLangCountGradient  absolute -inset-0.5 bg-gradient-to-r from-red-600 to-blue-600  blur opacity-2 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
-      <Card className="totalLangCount">
-        <ProgressBar value={TotalCodePushedSinceJoingingGit} color="orange" showAnimation={true} label="Lines of Code Pushed" />
-      </Card>
+        > <span className="text-md text-orange-700 font-large font-extrabold font-mono">{TotalCodePushedSinceJoingingGit}</span></ProgressCircle>
+    
+
+    </Card>
     </div>
   );
 };
diff --git a/src/Components/Repository/RepoProgress.tsx b/src/Components/Repository/RepoProgress.tsx
index 4e4d172..26a6d6c 100644
--- a/src/Components/Repository/RepoProgress.tsx
+++ b/src/Components/Repository/RepoProgress.tsx
@@ -36,7 +36,7 @@ const RepoProgress: React.FC<RepoCountAnalysis> = ({
             tooltip="Followers"
             color={"pink"}
           >
-            <span className="text-md text-gray-700 font-large ">{RepoCount}</span>
+            <span className="text-md text-blue-700 font-large font-extrabold font-mono">{RepoCount}</span>
           </ProgressCircle>
           {increaseOrDecrease === "no_change" ? (
             <BadgeDelta
diff --git a/src/Styles/Dashboard/langCount.css b/src/Styles/Dashboard/langCount.css
index 554215e..ec1208f 100644
--- a/src/Styles/Dashboard/langCount.css
+++ b/src/Styles/Dashboard/langCount.css
@@ -1,4 +1,27 @@
 .langGradientBack{
     border-radius: 30px;
-    width:610px
-}
\ No newline at end of file
+    width: 330px;
+}
+.totalLangCard{
+    height: 250px;
+   width: 320px;
+    border-radius: 50px; 
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 20px; 
+    border-color: #3B3486;
+
+}
+ .totalLangProgressCircle {
+   color: #864AF9;
+    margin-top: 5px; 
+    margin-right: 5%;
+  }
+  
+  .totalLangrAnalysisCardTitle {
+    font-size: 15px;
+    font-weight: bolder;
+    margin-top: 0;
+    color: white;
+  }
\ No newline at end of file
diff --git a/src/app/Dashboard/page.tsx b/src/app/Dashboard/page.tsx
index 6342dcd..a3c5787 100644
--- a/src/app/Dashboard/page.tsx
+++ b/src/app/Dashboard/page.tsx
@@ -220,7 +220,7 @@ const VersionDashboard: React.FC = () => {
               
             </div>
 
-            <TotalLangProgress TotalCodePushedSinceJoingingGit={totalCount.TotalCodePushedSinceJoingingGit}/>
+           
 
           </Grid>
         </div>
@@ -230,6 +230,7 @@ const VersionDashboard: React.FC = () => {
         <div>
         <PullRequestProgress OpenCount={issueCount.OpenCount} ClosedCount={issueCount.ClosedCount}/>
         <TopicProgress topicCounts={topicCount}/>
+        <TotalLangProgress TotalCodePushedSinceJoingingGit={totalCount.TotalCodePushedSinceJoingingGit}/>
         </div>