Merge pull request #114 from thearyadev/108-use-app-router

108 use app router

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;
+export default BarChart;

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;
+export default LineChart;

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<NavLinks[]>([])
-    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 (
         <header>
             <div className={styles.top_header_container}>
-                <h1>Top 500 Aggregator</h1>
+                <Link href="/">
+                    <h1>Top 500 Aggregator</h1>
+                </Link>
             </div>
 
             <div className={styles.navbar} id="navbar">
@@ -67,4 +37,4 @@ const Header = () => {
         </header>
     )
 }
-export default Header
+export default Header

frontend/app/components/topmatter/topmatter.tsx

@@ -0,0 +1,36 @@
+const TopMatter = ({seasonNumber}: {seasonNumber: string}) => {
+	let indicator = ""
+	if (seasonNumber == "trends"){
+		indicator = "Trends"	
+	}else{
+		indicator = `Season: ${seasonNumber}`
+	}
+
+	return (
+		<div className="mt-5 lg:ml-3 lg:mr-3 sm:ml-1 sm:mr-1">
+			<h1 className="text-3xl pb-4">{indicator}</h1>
+			<p className="pb-2"><strong>Welcome to Overwatch 2 Top 500 Aggregator</strong></p>
+			<p>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 <a href="https://github.com/thearyadev/top500-aggregator" target="_blank">GitHub</a> page.</p>
+			<p className="pb-2"><strong>What is this data?</strong></p>
+			<p>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.</p>
+			<p className="pb-2"><strong>When is the data updated?</strong></p>
+			<p>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</p>
+			<hr className="m-5" />
+		</div>
+	)
+}
+
+export default TopMatter;
+

frontend/app/globals.scss

@@ -29,4 +29,8 @@
 
 html, body{
   margin: 0px;
-}
+}
+
+main{
+  @apply mt-5 lg:ml-3 lg:mr-3 sm:ml-1 sm:mr-1
+}

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'] })
 
@@ -10,15 +10,19 @@ export const metadata: Metadata = {
   description: 'T500 Aggregator',
 }
 
+export const dynamic = 'force-dynamic';
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
+
   return (
     <html lang="en">
       <body>
-      {children}
+          <Header />
+          {children}
+          <Footer />
       </body>
     </html>
   )

frontend/app/page.tsx

@@ -0,0 +1,9 @@
+import SeasonPage from "./season/[seasonNumber]/page";
+import { fetchSeasonList } from "./utils/serverSideProps";
+
+const IndexPage = async () => {
+  const latestSeason = (await fetchSeasonList()).reverse()[0]
+  return <SeasonPage params={{seasonNumber: latestSeason.replace("_8", "")}} />
+}
+
+export default IndexPage;

frontend/app/season/[seasonNumber]/page.tsx

@@ -0,0 +1,90 @@
+import React from "react"
+import { Card } from "@/app/components"
+import { fetchSingleSeasonPageChartData, fetchSingleSeasonStdDevs } from "@/app/utils/serverSideProps"
+import { BarChart } from "@/app/components"
+import TopMatter from "@/app/components/topmatter/topmatter"
+
+
+
+const HeroStdDev = ({ value, role }: { value: number, role: string }) => {
+  return (
+    <div className="text-center pt-5 pb-5">
+      <h5>{role}</h5>
+      <h6 className="text-lg text-center">{Math.round((value + Number.EPSILON) * 100) / 100}</h6>
+
+    </div>
+  )
+}
+
+const SeasonPage = async ({ params }: { params: { seasonNumber: string } }) => {
+  const seasonChartData = await fetchSingleSeasonPageChartData(+params.seasonNumber)
+  const seasonStdDevs = await fetchSingleSeasonStdDevs(+params.seasonNumber)
+
+
+
+  return (
+    <main>
+      <TopMatter seasonNumber={params.seasonNumber} /> 
+      <Card title="Role Standard Deviation: All Slots, All Regions" subtitle={"Note: The standard deviation is calculated with the 10th percentile excluded. T500 aggregator by nature skews the accuracy of the low outliers in a data set. For this reason, the bottom 10% of entries for any given set (support, damage or tank) is excluded from the calculation."}>
+        <HeroStdDev value={seasonStdDevs.SUPPORT} role={"SUPPORT"} />
+        <HeroStdDev value={seasonStdDevs.DAMAGE} role={"DAMAGE"} />
+        <HeroStdDev value={seasonStdDevs.TANK} role={"TANK"} />
+      </Card>
+
+      <Card title="Hero Occurrences: All Slots" nowrap>
+        {Object.keys(seasonChartData).map(key => {
+          if (key.includes("O_ALL")) {
+            const [_, role, region] = key.split("_")
+            return <BarChart title={`${region}`} graph={(seasonChartData as any)[key].graph} maxY={region === "ALL" ? 1250 : 500} />
+          }
+        })}
+      </Card>
+
+
+
+      <Card title="Hero Occurrences: First Most Played">
+        {Object.keys(seasonChartData).map(key => {
+          if (key.includes("OFMP")) {
+            const [_, role, region] = key.split("_")
+            return <BarChart title={`${role}: ${region}`} graph={(seasonChartData as any)[key].graph} maxY={region === "ALL" ? 500 : 300} />
+          }
+        })}
+
+      </Card>
+
+      <Card title="Hero Occurrences: Second Most Played">
+        {Object.keys(seasonChartData).map(key => {
+          if (key.includes("OSMP")) {
+            const [_, role, region] = key.split("_")
+            return <BarChart title={`${role}: ${region}`} graph={(seasonChartData as any)[key].graph} maxY={region === "ALL" ? 500 : 300} />
+
+          }
+        })}
+
+      </Card>
+
+
+      <Card title="Hero Occurrences: Third Most Played">
+        {Object.keys(seasonChartData).map(key => {
+          if (key.includes("OTMP")) {
+            const [_, role, region] = key.split("_")
+            return <BarChart title={`${role}: ${region}`} graph={(seasonChartData as any)[key].graph} maxY={region === "ALL" ? 500 : 300} />
+          }
+        })}
+
+      </Card>
+
+    </main>
+  )
+
+
+
+
+
+
+
+
+}
+
+
+export default SeasonPage

frontend/app/trends/page.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { fetchSeasonList, fetchSeasonalOccurrenceTrend, fetchSeasonalStdDevTrendByRole } from "../utils/serverSideProps";
+import { LineChart } from "../components";
+import {Card} from "../components";
+import TopMatter from "../components/topmatter/topmatter";
+
+const TrendsPage = async () => {
+    const seasonalOccurrencesTrend = await fetchSeasonalOccurrenceTrend()
+    const seasonalStdDevTrend = await fetchSeasonalStdDevTrendByRole()
+    const seasonList = await fetchSeasonList() 
+
+    return (
+        <main>
+            <TopMatter seasonNumber="trends" />
+            <Card title={"Seasonal Trends"} nowrap>
+                <LineChart data={seasonalOccurrencesTrend} seasons={seasonList}
+                           title={"Occurrences: All Roles All Regions"}/>
+                <LineChart title={"Standard Deviation: By Role All Regions"} data={seasonalStdDevTrend}
+                           seasons={seasonList}/>
+
+            </Card>
+        </main>
+    )
+
+
+}
+export default TrendsPage;

frontend/app/utils/serverSideProps.ts

@@ -1,3 +1,5 @@
+"use server";
+
 const backendUrl = process.env.BACKEND_URL;
 export type Statistic = {
     mean: number;
@@ -55,4 +57,4 @@ export async function fetchSeasonalOccurrenceTrend(): Promise<TrendLine[]>{
 export async function fetchSeasonalStdDevTrendByRole(): Promise<TrendLine[]>{
     const response = await fetch(`${backendUrl}/d/all_seasons_std_by_role`)
     return await response.json()
-}
+}

frontend/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.