From 0f1c7dda9244ba364cd44a74912538ea0c17b6c6 Mon Sep 17 00:00:00 2001 From: SANKALP PANDEY Date: Tue, 6 Feb 2024 23:17:56 +0530 Subject: [PATCH] FEAT: ADDED THE TAB FOR THE BETTER DATA DISPLAY --- .../FollowerAnalysis/RatioProgress.tsx | 19 ++++ src/Interface/api.interface.ts | 30 +++--- src/Services/analysis.service.ts | 11 +++ src/Styles/Dashboard/followerProgress.css | 4 + src/Styles/Dashboard/main.css | 10 ++ src/app/Dashboard/page.tsx | 99 +++++++++++-------- src/app/layout.tsx | 1 + 7 files changed, 120 insertions(+), 54 deletions(-) create mode 100644 src/Components/FollowerAnalysis/RatioProgress.tsx create mode 100644 src/Styles/Dashboard/main.css diff --git a/src/Components/FollowerAnalysis/RatioProgress.tsx b/src/Components/FollowerAnalysis/RatioProgress.tsx new file mode 100644 index 0000000..eb5ca0e --- /dev/null +++ b/src/Components/FollowerAnalysis/RatioProgress.tsx @@ -0,0 +1,19 @@ +import React , {useState} from "react"; +import {Card, Text} from "@tremor/react" +import {FollowerFollowingRatio} from "@/Interface/api.interface"; + + +export const RatioProgress: React.FC = ({ FollowerToFollowingRatio }) => { + const ratio = FollowerToFollowingRatio || ""; // Using default parameter in function body + return ( +
+
+ +

{ratio}

+ +
+ ); + }; + + +export default RatioProgress; \ No newline at end of file diff --git a/src/Interface/api.interface.ts b/src/Interface/api.interface.ts index fd0f04b..a412987 100644 --- a/src/Interface/api.interface.ts +++ b/src/Interface/api.interface.ts @@ -1,18 +1,22 @@ // follower-analysis.interface.ts export interface FollowerAnalysis { - followerCount: number; - increaseOrDecrease: string; // Use lowercase 'string' - } - - export interface FollowingAnalysis { - followingCount: number; - increaseOrDecrease: string; - } + followerCount: number; + increaseOrDecrease: string; // Use lowercase 'string' +} - export interface LanguageCountAnalysis{ +export interface FollowingAnalysis { + followingCount: number; + increaseOrDecrease: string; +} - [LangName: string]: number; +export interface LanguageCountAnalysis { + [LangName: string]: number; +} - - } - \ No newline at end of file + +export interface FollowerFollowingRatio { + + FollowerToFollowingRatio: String; + + +} \ No newline at end of file diff --git a/src/Services/analysis.service.ts b/src/Services/analysis.service.ts index d8143be..6101f50 100644 --- a/src/Services/analysis.service.ts +++ b/src/Services/analysis.service.ts @@ -31,4 +31,15 @@ export const getLanguageCountAnalysis = async(userId:string)=>{ catch(err){ return err; } +} + +export const getFollowerFollowingRation = async(userId:string)=>{ + const endPoint = "followerToFollowingRatio" + try{ + const response = await fetch(`${BASE_API}${endPoint}?id=${userId}`) + return response + } + catch(err){ + return err; + } } \ No newline at end of file diff --git a/src/Styles/Dashboard/followerProgress.css b/src/Styles/Dashboard/followerProgress.css index 08b4b06..7543a82 100644 --- a/src/Styles/Dashboard/followerProgress.css +++ b/src/Styles/Dashboard/followerProgress.css @@ -42,5 +42,9 @@ margin-left: 10%; border-radius: 30px; } + .i{ + color: black; + } + \ No newline at end of file diff --git a/src/Styles/Dashboard/main.css b/src/Styles/Dashboard/main.css new file mode 100644 index 0000000..daa7139 --- /dev/null +++ b/src/Styles/Dashboard/main.css @@ -0,0 +1,10 @@ +.tabCard{ + background-color: black; + border-radius: 45px; + max-width: 230px; + height: auto; +} +.tabCardBackGradient{ + max-width: 240px; + border-radius: 45px; +} \ No newline at end of file diff --git a/src/app/Dashboard/page.tsx b/src/app/Dashboard/page.tsx index e4c7e7e..fe42edc 100644 --- a/src/app/Dashboard/page.tsx +++ b/src/app/Dashboard/page.tsx @@ -1,19 +1,11 @@ -"use client"; -import { - getFollowerAnalysis, - getFollowingAnalysis, - getLanguageCountAnalysis, -} from "@/Services/analysis.service"; -import { - FollowerAnalysis, - FollowingAnalysis, - LanguageCountAnalysis, -} from "@/Interface/api.interface"; +"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 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, Card, Flex } from "@tremor/react"; +import LanguageCount from "@/Components/LanguageAnalysis/LanguageCount"; const VersionDashboard: React.FC = () => { const [followerAnlData, setFollowerAnlData] = useState({ @@ -25,7 +17,7 @@ const VersionDashboard: React.FC = () => { followingCount: 0, increaseOrDecrease: "", }); - + const [langCount, setLangCount] = useState({}); const getFollowerAnalysisData = async () => { @@ -64,33 +56,58 @@ const VersionDashboard: React.FC = () => { getLanguageCountAnalysisData(); }, []); - // ... - -return followerAnlData.followerCount !== 0 && followingAnlData.followingCount !== 0 ? ( -
-
-
- - - - - -
-
- -
+ return followerAnlData.followerCount !== 0 && followingAnlData.followingCount !== 0 ? ( +
+
+
+ + + + +
+
+ + + + Repos + Ratio + Stars + + + +
+

nnk

+
+ + +
+

knkn

+
+ + +
+

knkn

+
+ + + + +
+
+
+ +
-
-) : ( - <> -); - +
+ ) : ( + <> + ); }; export default VersionDashboard; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 269e83c..5a20a2f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,6 +3,7 @@ import { Inter } from "next/font/google"; import "./globals.css"; import "../Styles/Dashboard/followerProgress.css" import "../Styles/Dashboard/langCount.css" +import "../Styles/Dashboard/main.css"; const inter = Inter({ subsets: ["latin"] });