From 57679284c8f9e9cf60d3dbd5e38d5cfefa8fff9d Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 19 Jan 2024 19:34:43 +0000 Subject: [PATCH 01/16] delete pages directory --- frontend/pages/_app.tsx | 49 ------------- frontend/pages/index.tsx | 32 --------- frontend/pages/season/[seasonNumber].tsx | 88 ------------------------ frontend/pages/trends.tsx | 43 ------------ 4 files changed, 212 deletions(-) delete mode 100644 frontend/pages/_app.tsx delete mode 100644 frontend/pages/index.tsx delete mode 100644 frontend/pages/season/[seasonNumber].tsx delete mode 100644 frontend/pages/trends.tsx diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx deleted file mode 100644 index ecc499dc..00000000 --- a/frontend/pages/_app.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import '../app/globals.scss'; -import type {AppProps} from 'next/app'; -import {Footer, Header} from "@/app/components"; -import {useRouter} from "next/router"; - -interface T500AggregatorAppProps extends AppProps { - data: string[] | undefined; -} - - -function MyApp({Component, pageProps}: T500AggregatorAppProps) { - - const router = useRouter() - const {seasonNumber} = router.query - const path = router.asPath - - return ( - <> -
-
-

{seasonNumber ?`Season ${seasonNumber}` : path.toLowerCase().includes("trends") ? "Trends": null}

-

Welcome to Overwatch 2 Top 500 Aggregator

-

The data available on this page is not 100% accurate. Data collection involves computer vision and - image classification using a neural network, and as - such, there is a slight error rate. This error rate is most apparent in some charts where the - incorrect - role appears, such as a support chart containing Echo. More information on data collection is - available - on my GitHub page.

-

What is this data?

-

The data below is taken from the in-game top 500 leaderboards. The information available there - includes a single player's matches played and their top 3 heroes played. The charts and categories - below represent data for the hero "slot" in a top 500 leaderboard entry. For example, they count the - number of people who have Kiriko as their most played hero, or Widowmaker as their second most - played hero. The data is a high-level overview of what heroes are popular or unpopular and is by no - means an accurate representation of hero pick rates.

-

When is the data updated?

-

The dataset is updated once per season. Starting in season 8, the most recent season will be updated - weekly, overwritten each week until the end of the season

-
- - -
-
- - ) -} - -export default MyApp; diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx deleted file mode 100644 index fd7af8ca..00000000 --- a/frontend/pages/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Season from "@/pages/season/[seasonNumber]"; -import { - fetchSeasonList, - fetchSingleSeasonPageChartData, - fetchSingleSeasonStdDevs, - SeasonData, - StdDevs -} from "@/app/utils/serverSideProps"; -import {GetServerSidePropsContext} from "next"; - -const Index = ({seasonChartData, seasonStdDevs}: {seasonChartData: SeasonData, seasonStdDevs: StdDevs}) => { - return -} - -export async function getServerSideProps(context: GetServerSidePropsContext) { - // @ts-ignore - const seasonList = await fetchSeasonList() - const seasonNumber = Number(seasonList[seasonList.length -1].split("_")[0]) - const seasonChartData = await fetchSingleSeasonPageChartData(seasonNumber) - const seasonStdDevs = await fetchSingleSeasonStdDevs(seasonNumber) - - return { - props: { - seasonChartData, - seasonStdDevs - }, - }; -} - - - -export default Index \ No newline at end of file diff --git a/frontend/pages/season/[seasonNumber].tsx b/frontend/pages/season/[seasonNumber].tsx deleted file mode 100644 index 00df07b2..00000000 --- a/frontend/pages/season/[seasonNumber].tsx +++ /dev/null @@ -1,88 +0,0 @@ -import {useRouter} from "next/router"; -import {Card} from "@/app/components"; -import {BarChart} from "@/app/components"; -import {GetServerSidePropsContext} from "next"; -import type {SeasonData, StdDevs} from "@/app/utils/serverSideProps"; -import {fetchSingleSeasonStdDevs, fetchSingleSeasonPageChartData} from "@/app/utils/serverSideProps"; - -const HeroStdDev = ({value, role}: {value: number, role: string}) => { - return ( -
-
{role}
-
{Math.round((value + Number.EPSILON) * 100) / 100}
- -
- ) -} - -const Season = ({seasonChartData, seasonStdDevs}: { seasonChartData: SeasonData, seasonStdDevs: StdDevs}) => { - return ( - <> - - - - - - - - {Object.keys(seasonChartData).map(key => { - if (key.includes("O_ALL")){ - const [_, role, region] = key.split("_") - return - } - })} - - - - - - {Object.keys(seasonChartData).map(key => { - if (key.includes("OFMP")){ - const [_, role, region] = key.split("_") - return - } - })} - - - - - {Object.keys(seasonChartData).map(key => { - if (key.includes("OSMP")){ - const [_, role, region] = key.split("_") - return - } - })} - - - - - - {Object.keys(seasonChartData).map(key => { - if (key.includes("OTMP")){ - const [_, role, region] = key.split("_") - return - } - })} - - - - - ) -} - -export async function getServerSideProps(context: GetServerSidePropsContext) { - // @ts-ignore - const {seasonNumber} = context.params; - const seasonChartData = await fetchSingleSeasonPageChartData(seasonNumber) - const seasonStdDevs = await fetchSingleSeasonStdDevs(seasonNumber) - - return { - props: { - seasonChartData, - seasonStdDevs - }, - }; -} - - -export default Season \ No newline at end of file diff --git a/frontend/pages/trends.tsx b/frontend/pages/trends.tsx deleted file mode 100644 index e479a891..00000000 --- a/frontend/pages/trends.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import {GetServerSidePropsContext} from "next"; -import {Card} from "@/app/components"; -import {LineChart} from "@/app/components"; -import type {TrendLine} from "@/app/utils/serverSideProps"; -import { - fetchSeasonalOccurrenceTrend, - fetchSeasonList, - fetchSeasonalStdDevTrendByRole, -} from "@/app/utils/serverSideProps"; - -const Trends = ({seasonalOccurrencesTrend, seasonalStdDevTrend, seasonList}: { - seasonalOccurrencesTrend: TrendLine[], - seasonalStdDevTrend: TrendLine[], - seasonList: string[] -}) => { - return ( - <> - - - - - - - ) -} - -export async function getServerSideProps(context: GetServerSidePropsContext) { - const seasonalOccurrencesTrend = await fetchSeasonalOccurrenceTrend() - const seasonList = await fetchSeasonList() - const seasonalStdDevTrend = await fetchSeasonalStdDevTrendByRole() - return { - props: { - seasonalOccurrencesTrend, - seasonalStdDevTrend, - seasonList - }, - }; -} - - -export default Trends; From 80f32b079dcb57c8325175bfeacd8c0202112edc Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 19 Jan 2024 19:35:08 +0000 Subject: [PATCH 02/16] delete redundant layout.tsx --- frontend/app/components/layout.tsx | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 frontend/app/components/layout.tsx diff --git a/frontend/app/components/layout.tsx b/frontend/app/components/layout.tsx deleted file mode 100644 index d9f86ee5..00000000 --- a/frontend/app/components/layout.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import {Header} from "@/app/components/index"; - - -export default function Layout({ children }: {children: React.ReactNode}) { - return ( - <> -
{children}
- - ) -} \ No newline at end of file From 5fa5d0f2b88c7ffad0f2cf826b526bf20021ae4c Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 19 Jan 2024 19:35:30 +0000 Subject: [PATCH 03/16] remove client side fetch --- frontend/app/utils/clientSideFetch.ts | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 frontend/app/utils/clientSideFetch.ts diff --git a/frontend/app/utils/clientSideFetch.ts b/frontend/app/utils/clientSideFetch.ts deleted file mode 100644 index c6bda723..00000000 --- a/frontend/app/utils/clientSideFetch.ts +++ /dev/null @@ -1,6 +0,0 @@ - -export async function fetchSeasonList(): Promise { - const response = await fetch("/api/d/seasons") - return await response.json() -} - From 4ad16e581acf8b81c634ee157af3488c5eaa9c3c Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 19 Jan 2024 19:36:08 +0000 Subject: [PATCH 04/16] set barchart.tsx to explicit client component --- frontend/app/components/charts/barChart.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/app/components/charts/barChart.tsx b/frontend/app/components/charts/barChart.tsx index 8d7c99a2..c1eb83f6 100644 --- a/frontend/app/components/charts/barChart.tsx +++ b/frontend/app/components/charts/barChart.tsx @@ -1,3 +1,6 @@ +"use client"; + + import * as Highcharts from 'highcharts'; import HighchartsReact from "highcharts-react-official"; import {useRef} from "react"; @@ -67,4 +70,4 @@ const BarChart = (props: BarChartProps) => { } -export default BarChart; \ No newline at end of file +export default BarChart; From 69f87c46aa6c7a7bbd6cdae330078ca0120b33e2 Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 19 Jan 2024 19:36:21 +0000 Subject: [PATCH 05/16] set linechart.tsx to explicit client component --- frontend/app/components/charts/lineChart.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/app/components/charts/lineChart.tsx b/frontend/app/components/charts/lineChart.tsx index e3ed5324..19355837 100644 --- a/frontend/app/components/charts/lineChart.tsx +++ b/frontend/app/components/charts/lineChart.tsx @@ -1,3 +1,5 @@ +"use client"; + import * as Highcharts from 'highcharts'; import HighchartsReact from "highcharts-react-official"; import {useRef} from "react"; @@ -70,4 +72,4 @@ const LineChart = (props: LineChartProps) => { } -export default LineChart; \ No newline at end of file +export default LineChart; From 5e723e72ac7a094f417b1668d47888f972401a77 Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 19 Jan 2024 19:37:00 +0000 Subject: [PATCH 06/16] Convert header to server component --- frontend/app/components/header/header.tsx | 56 ++++++----------------- 1 file changed, 13 insertions(+), 43 deletions(-) diff --git a/frontend/app/components/header/header.tsx b/frontend/app/components/header/header.tsx index 242e83d4..a72b2d27 100644 --- a/frontend/app/components/header/header.tsx +++ b/frontend/app/components/header/header.tsx @@ -1,56 +1,26 @@ -"use client"; -import {useEffect, useState} from "react"; +import Link from "next/link"; import styles from "./header.module.scss" -import {fetchSeasonList} from "@/app/utils/clientSideFetch"; -import {useRouter} from "next/router"; +import { fetchSeasonList } from "@/app/utils/serverSideProps"; type NavLinks = { label: string; path: string } -const Header = () => { - const [navLinks, setNavLinks] = useState([]) - const router = useRouter(); - useEffect(() => { - fetchSeasonList().then(seasonList => { - setNavLinks(seasonList.reverse().map(season => { - const seasonNumber = season.split("_")[0] - return {label: `Season ${seasonNumber}`, path: `/season/${seasonNumber}`} - })) - if (router.pathname === "/" && typeof window !== undefined) { - const element = document.getElementById("curseason") - if (element) { - element.innerText = `Season ${seasonList[0].split("_")[0]}` - } - } - - setNavLinks(prev => ([{label: "Trends", path: "/trends"}, ...prev])) - - if (typeof window !== undefined){ - const element = document.getElementById('navbar') - if (element){ - element.addEventListener('wheel', function(e) { - // @ts-ignore - if (e.deltaY != 0) { - // @ts-ignore - this.scrollLeft += (e.deltaY * 1.5); - e.preventDefault(); - } - }, false); - } - - } - - }) - - }, []); - +const Header = async() => { + const seasons = await fetchSeasonList() + const navLinks: NavLinks[] = seasons.reverse().map(seasonNum => { + seasonNum = seasonNum.replace("_8", "") + return {label: `Season ${seasonNum}`, path: `/season/${seasonNum}` } + }) + navLinks.unshift({label: "Trends", path: "/trends"}) return (
-

Top 500 Aggregator

+ +

Top 500 Aggregator

+
) } -export default Header \ No newline at end of file +export default Header From 0ae3cf208045047fa54649357b6787f180a86ad4 Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 19 Jan 2024 19:37:17 +0000 Subject: [PATCH 07/16] add main tag styles to globals --- frontend/app/globals.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/app/globals.scss b/frontend/app/globals.scss index 4b484946..69ceab71 100644 --- a/frontend/app/globals.scss +++ b/frontend/app/globals.scss @@ -29,4 +29,8 @@ html, body{ margin: 0px; -} \ No newline at end of file +} + +main{ + @apply mt-5 lg:ml-3 lg:mr-3 sm:ml-1 sm:mr-1 +} From 2287e8dd0268e2920af76fc9ca2e3372d54de533 Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 19 Jan 2024 19:37:40 +0000 Subject: [PATCH 08/16] configure app router layout.tsx --- frontend/app/layout.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 034e3365..513472d6 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -1,7 +1,7 @@ import type { Metadata } from 'next' import { Inter } from 'next/font/google' import './globals.scss' -import {Header} from "@/app/components"; +import { Footer, Header } from "@/app/components"; const inter = Inter({ subsets: ['latin'] }) @@ -15,10 +15,13 @@ export default function RootLayout({ }: { children: React.ReactNode }) { + return ( - {children} +
+ {children} +