From 77a0b69d9a0dd755a0a59a4c1dc3f3d045327e89 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Wed, 22 Nov 2023 21:58:45 -0800 Subject: feat: re-implement individual statistic pages on next --- src/app/_componenets/Footer/Footer.tsx | 27 ------ .../SubscriberTable/SubscriberTable.tsx | 67 ------------- .../SubscriberTable/SubscriberTableRow.tsx | 35 ------- src/app/_componenets/TitleBar/TitleBar.tsx | 18 ---- src/app/layout.tsx | 2 +- src/app/page.tsx | 4 +- src/components/DataChart/DataChart.tsx | 108 +++++++++++++++++++++ src/components/Footer/Footer.tsx | 26 +++++ src/components/SubscriberTable/SubscriberTable.tsx | 66 +++++++++++++ .../SubscriberTable/SubscriberTableRow.tsx | 35 +++++++ src/components/TitleBar/TitleBar.tsx | 26 +++++ src/components/channel-card.tsx | 53 ++++++++++ src/components/ui/avatar.tsx | 50 ++++++++++ src/components/ui/badge.tsx | 36 +++++++ src/components/ui/card.tsx | 79 +++++++++++++++ src/lib/utils.ts | 6 ++ src/pages/stats/[slug].tsx | 72 +++++++++++--- 17 files changed, 549 insertions(+), 161 deletions(-) delete mode 100644 src/app/_componenets/Footer/Footer.tsx delete mode 100644 src/app/_componenets/SubscriberTable/SubscriberTable.tsx delete mode 100644 src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx delete mode 100644 src/app/_componenets/TitleBar/TitleBar.tsx create mode 100644 src/components/DataChart/DataChart.tsx create mode 100644 src/components/Footer/Footer.tsx create mode 100644 src/components/SubscriberTable/SubscriberTable.tsx create mode 100644 src/components/SubscriberTable/SubscriberTableRow.tsx create mode 100644 src/components/TitleBar/TitleBar.tsx create mode 100644 src/components/channel-card.tsx create mode 100644 src/components/ui/avatar.tsx create mode 100644 src/components/ui/badge.tsx create mode 100644 src/components/ui/card.tsx create mode 100644 src/lib/utils.ts (limited to 'src') diff --git a/src/app/_componenets/Footer/Footer.tsx b/src/app/_componenets/Footer/Footer.tsx deleted file mode 100644 index f23c677..0000000 --- a/src/app/_componenets/Footer/Footer.tsx +++ /dev/null @@ -1,27 +0,0 @@ - -import React from 'react'; - -const Footer = () => { - return ( - - ); -}; - -export default Footer; diff --git a/src/app/_componenets/SubscriberTable/SubscriberTable.tsx b/src/app/_componenets/SubscriberTable/SubscriberTable.tsx deleted file mode 100644 index a538bdd..0000000 --- a/src/app/_componenets/SubscriberTable/SubscriberTable.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from "react"; -import Image from "next/image"; -import ChannelRow from "./SubscriberTableRow"; - -interface ChannelDataProp { - channel_name: string; - profile_pic: string; - subscribers: number; - sub_org: string; - video_count: number; - day_diff: number; -} - -interface SubscriberDataTableProp { - channel_data: ChannelDataProp[]; - timestamp: string; -} - -const DataTable = ({ channel_data, timestamp }: SubscriberDataTableProp) => { - if (!channel_data) { - return null; - } - -return ( - <> -
-

Subscriber Count

-

Last Updated: {timestamp}

-
-
- - - - - - - - - - - - - {channel_data.map((channel, index) => ( - - ))} - -
- RANK - - CHANNEL - - GROUP - - VIDEO COUNT - - SUBSCRIBERS - - DIFF (24H) -
-
- -); -}; - -export default DataTable; -export type { SubscriberDataTableProp }; -export type { ChannelDataProp }; diff --git a/src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx b/src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx deleted file mode 100644 index 619a5b8..0000000 --- a/src/app/_componenets/SubscriberTable/SubscriberTableRow.tsx +++ /dev/null @@ -1,35 +0,0 @@ -"use client" -import React from 'react'; -import Image from 'next/image'; -import { ChannelDataProp } from './SubscriberTable'; - -interface ChannelRowProps { - channel: ChannelDataProp; - index: number; -} - -const ChannelRow: React.FC = ({ channel, index }) => ( - - {index + 1} - - {channel.channel_name} - - {channel.channel_name} - - - {channel.sub_org} - {channel.video_count} - {Number(channel.subscribers).toLocaleString()} - - {channel.day_diff > 0 ? `+${Number(channel.day_diff).toLocaleString()}` : Number(channel.day_diff).toLocaleString()} - - -); - -export default ChannelRow; \ No newline at end of file diff --git a/src/app/_componenets/TitleBar/TitleBar.tsx b/src/app/_componenets/TitleBar/TitleBar.tsx deleted file mode 100644 index 27bebfc..0000000 --- a/src/app/_componenets/TitleBar/TitleBar.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Image from 'next/image'; - -interface TitleBarProps { - title: string; -} - -const TitleBar: React.FC = ({ title }) => { - return ( -
-
- {title} -
-
- ); -}; - -export default TitleBar; \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ae0349f..3fdc727 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,6 @@ import type { Metadata } from 'next' import { Inter } from 'next/font/google' -import Footer from './_componenets/Footer/Footer' +import Footer from '../components/Footer/Footer' import './globals.css' const inter = Inter({ subsets: ['latin'] }) diff --git a/src/app/page.tsx b/src/app/page.tsx index 7a40c0a..6016d89 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,5 +1,5 @@ -import SubscriberTable, {SubscriberDataTableProp} from './_componenets/SubscriberTable/SubscriberTable'; -import TitleBar from './_componenets/TitleBar/TitleBar'; +import SubscriberTable, {SubscriberDataTableProp} from '../components/SubscriberTable/SubscriberTable'; +import TitleBar from '../components/TitleBar/TitleBar'; async function Home(){ const apiUrl = process.env.NEXT_PUBLIC_API_URL diff --git a/src/components/DataChart/DataChart.tsx b/src/components/DataChart/DataChart.tsx new file mode 100644 index 0000000..b51d592 --- /dev/null +++ b/src/components/DataChart/DataChart.tsx @@ -0,0 +1,108 @@ + + +import React, {useEffect, useState} from 'react'; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, +} from 'chart.js'; +import { Line } from 'react-chartjs-2'; + + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend +); + + + + + +interface Dataset { + label: string; + data: number[]; + borderColor: string; + backgroundColor: string; +} + +interface DataChartResponseProps { + labels: string[]; + datasets: Dataset[]; +} + +interface DataChartProps { + channel_name: string; + requestUrl?: string; + graphTitle?: string; +} + +const DataChart: React.FC = ({ channel_name, requestUrl, graphTitle }) => { + const [data, setData] = useState(); + const apiUrl = process.env.NEXT_PUBLIC_API_URL + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch(requestUrl || `${apiUrl}/api/subscribers/${channel_name}`); + const json = await response.json(); + setData({ + labels: json.labels, + datasets: [ + { + label: 'Subscriber Count', + data: json.datasets, + borderColor: 'rgb(255, 99, 132)', + backgroundColor: 'rgba(255, 99, 132, 0.5)', + }, + ], + }); + } catch (error) { + console.error('Error fetching data:', error); + } + }; + + fetchData(); + }, [apiUrl, channel_name, requestUrl]); + + const options = { + responsive: true, + plugins: { + legend: { + position: 'top' as const, + }, + title: { + display: true, + text: graphTitle || 'Historical Subscriber Data', + font: { + size: 18 + } + }, + }, + scales: { + x: { + ticks: { + autoSkip: true, + maxTicksLimit: 10 + } + } + } + }; + + if (!data) { + return
Loading...
; + } + + return ; +}; + +export default DataChart; \ No newline at end of file diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..6585e52 --- /dev/null +++ b/src/components/Footer/Footer.tsx @@ -0,0 +1,26 @@ + +import React from 'react'; + +const Footer = () => { + return ( +
+
+

+ Information +

+

+ Information is collected once per hour. Data collection will stop once a liver has graduated. +
+ This page is in now way affiliated with ANYCOLOR or with any of the channels listed here. +
+ Date Started: 2023-03-26 +

+

+ Source Code
+

+
+
+ ); +}; + +export default Footer; diff --git a/src/components/SubscriberTable/SubscriberTable.tsx b/src/components/SubscriberTable/SubscriberTable.tsx new file mode 100644 index 0000000..8094e21 --- /dev/null +++ b/src/components/SubscriberTable/SubscriberTable.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import ChannelRow from "./SubscriberTableRow"; + +interface ChannelDataProp { + channel_name: string; + profile_pic: string; + subscribers: number; + sub_org: string; + video_count: number; + day_diff: number; +} + +interface SubscriberDataTableProp { + channel_data: ChannelDataProp[]; + timestamp: string; +} + +const DataTable = ({ channel_data, timestamp }: SubscriberDataTableProp) => { + if (!channel_data) { + return null; + } + +return ( + <> +
+

Subscriber Count

+

Last Updated: {timestamp}

+
+
+ + + + + + + + + + + + + {channel_data.map((channel, index) => ( + + ))} + +
+ RANK + + CHANNEL + + GROUP + + VIDEO COUNT + + SUBSCRIBERS + + DIFF (24H) +
+
+ +); +}; + +export default DataTable; +export type { SubscriberDataTableProp }; +export type { ChannelDataProp }; diff --git a/src/components/SubscriberTable/SubscriberTableRow.tsx b/src/components/SubscriberTable/SubscriberTableRow.tsx new file mode 100644 index 0000000..e97af1c --- /dev/null +++ b/src/components/SubscriberTable/SubscriberTableRow.tsx @@ -0,0 +1,35 @@ +"use client" +import React from 'react'; +import Image from 'next/image'; +import { ChannelDataProp } from './SubscriberTable'; + +interface ChannelRowProps { + channel: ChannelDataProp; + index: number; +} + +const ChannelRow: React.FC = ({ channel, index }) => ( + window.location.href = "/stats/"+channel.channel_name}> + {index + 1} + + {channel.channel_name} + + {channel.channel_name} + + + {channel.sub_org} + {channel.video_count} + {Number(channel.subscribers).toLocaleString()} + + {channel.day_diff > 0 ? `+${Number(channel.day_diff).toLocaleString()}` : Number(channel.day_diff).toLocaleString()} + + +); + +export default ChannelRow; \ No newline at end of file diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx new file mode 100644 index 0000000..85fbfbd --- /dev/null +++ b/src/components/TitleBar/TitleBar.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +interface TitleBarProps { + title: string; + redirectUrl?: string; + showHomeButton?: boolean; +} + +const TitleBar: React.FC = ({ title, redirectUrl, showHomeButton }) => { + return ( +
+
+ + {title} + + {showHomeButton && ( + + + + )} +
+
+ ); +}; + +export default TitleBar; \ No newline at end of file diff --git a/src/components/channel-card.tsx b/src/components/channel-card.tsx new file mode 100644 index 0000000..f2eed59 --- /dev/null +++ b/src/components/channel-card.tsx @@ -0,0 +1,53 @@ +import { AvatarImage, AvatarFallback, Avatar } from "@/components/ui/avatar" +import { CardTitle, CardHeader, CardContent, Card } from "@/components/ui/card" +import { Badge } from "@/components/ui/badge" + +interface ChannelCardProps { + name: string + avatarUrl: string + subscriberCount: number + videoCount: number + suborg: string + nextMilestone: string + nextMilestoneDays: string + nextMilestoneDate: string +} + +export function ChannelCard(props: ChannelCardProps) { + const { name, avatarUrl, subscriberCount, videoCount, suborg, nextMilestone, nextMilestoneDays, nextMilestoneDate } = props + return ( + + +
+ + + PR + +
+ {name} + {suborg} +
+
+ + +
+ Subscribers + {subscriberCount.toLocaleString()} +
+
+ Videos + {videoCount} +
+
+ Next Milestone + {nextMilestone} +
+ {nextMilestoneDays} days + {nextMilestoneDate} +
+ +
+ + + ) +} diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx new file mode 100644 index 0000000..1c69f50 --- /dev/null +++ b/src/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx new file mode 100644 index 0000000..0f7034b --- /dev/null +++ b/src/components/ui/card.tsx @@ -0,0 +1,79 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Card = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +Card.displayName = "Card" + +const CardHeader = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardHeader.displayName = "CardHeader" + +const CardTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardDescription.displayName = "CardDescription" + +const CardContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardContent.displayName = "CardContent" + +const CardFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardFooter.displayName = "CardFooter" + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..d084cca --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx index 03f8adf..1971c1e 100644 --- a/src/pages/stats/[slug].tsx +++ b/src/pages/stats/[slug].tsx @@ -1,16 +1,66 @@ -"use client" -import { useRouter } from 'next/router' - +"use client"; +import React, { useEffect, useState } from "react"; +import { useRouter } from "next/router"; +import "../../app/globals.css"; +import TitleBar from "../../components/TitleBar/TitleBar"; +import { ChannelCard } from "@/components/channel-card"; +import DataChart from "@/components/DataChart/DataChart"; +import axios from "axios"; + +interface ChannelDataProp { + channel_name: string; + profile_pic: string; + subscribers: number; + sub_org: string; + video_count: number; + next_milestone: string; + days_until_next_milestone: string; + next_milestone_date: string; +} + export default function Page() { + const [channelData, setChannelData] = useState(null); const router = useRouter(); + const { slug } = router.query; + useEffect(() => { + const apiUrl = process.env.NEXT_PUBLIC_API_URL; + if (slug) { + const encodedSlug = encodeURIComponent(slug as string); + console.log(apiUrl + `/api/channel/${encodedSlug}`); + axios.get(apiUrl + `/api/channel/${encodedSlug}`).then((response) => { + console.log(response); + setChannelData(response.data); + }); + } + }, [slug]); + return ( -
-
-

Under Construction

-

We are currently working on this page. Please check back later.

-

Thank you for your patience

-

Slug: {router.query.slug}

+ <> + +
+
+ {channelData && ( + + )} +
-
+
+
+ +
+
+ +
+
+ ); -} \ No newline at end of file +} -- cgit v1.2.3