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/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 +++++++++++++++ 9 files changed, 479 insertions(+) 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 (limited to 'src/components') 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 } -- cgit v1.2.3