-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* move types and fetches to different file * change import location for TrendLine * import season component instead of copying the whole file * add backend url and api proxy to next.config.js * import backend url from process env * add api fetchSeasonList for use in client component * Adjust header style to remove horizontal scrollbar and enable mouse horizontal scroll * Convert header to client component, fetch seasonList from backend * Remove navlink list * add mysql test server deploy script * remove legacy frontend files
- Loading branch information
1 parent
a7674e2
commit 169dd51
Showing
29 changed files
with
196 additions
and
1,420 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
|
|
||
| export async function fetchSeasonList(): Promise<string[]> { | ||
| const response = await fetch("/api/d/seasons") | ||
| return await response.json() | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| const backendUrl = process.env.BACKEND_URL; | ||
| export type Statistic = { | ||
| mean: number; | ||
| standard_deviation: number; | ||
| variance: number; | ||
| } | ||
|
|
||
| export type BarChartData = { | ||
| labels: string[]; | ||
| values: number[]; | ||
| } | ||
|
|
||
| export type SingleChart = { | ||
| graph: BarChartData; | ||
| statistic: Statistic; | ||
| } | ||
|
|
||
| export type SeasonData = { | ||
| [key: string]: SingleChart | ||
| } | ||
|
|
||
| export type StdDevs = { | ||
| DAMAGE: number; | ||
| SUPPORT: number; | ||
| TANK: number; | ||
| } | ||
|
|
||
| export type TrendLine = { | ||
| name: string; | ||
| data: number[] | ||
| } | ||
|
|
||
| export async function fetchSingleSeasonPageChartData(seasonNumber: number): Promise<SingleChart[]> { | ||
| const response = await fetch(`${backendUrl}/chart/${seasonNumber}_8`); | ||
| return await response.json(); | ||
| } | ||
|
|
||
|
|
||
| export async function fetchSeasonList(): Promise<string[]> { | ||
| const response = await fetch(`${backendUrl}/d/seasons`) | ||
| return await response.json() | ||
| } | ||
|
|
||
|
|
||
| export async function fetchSingleSeasonStdDevs(seasonNumber: number): Promise<StdDevs> { | ||
| const response = await fetch(`${backendUrl}/d/single_season_std_by_role/${seasonNumber}_8`) | ||
| return await response.json() | ||
| } | ||
|
|
||
| export async function fetchSeasonalOccurrenceTrend(): Promise<TrendLine[]>{ | ||
| const response = await fetch(`${backendUrl}/chart/trend/d`) | ||
| return await response.json() | ||
| } | ||
|
|
||
| export async function fetchSeasonalStdDevTrendByRole(): Promise<TrendLine[]>{ | ||
| const response = await fetch(`${backendUrl}/d/all_seasons_std_by_role`) | ||
| return await response.json() | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,18 @@ | ||
| /** @type {import('next').NextConfig} */ | ||
| const nextConfig = {} | ||
| const backendUrl = process.env.NODE_ENV === "development" ? "http://localhost:7771" : "http://server:8000" | ||
|
|
||
| const nextConfig = { | ||
| async rewrites() { | ||
| return [ | ||
| { | ||
| source: "/api/:path*", | ||
| destination: `${backendUrl}/:path*` | ||
| } | ||
| ] | ||
| }, | ||
| env: { | ||
| BACKEND_URL: backendUrl | ||
| } | ||
| } | ||
|
|
||
| module.exports = nextConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,126 +1,32 @@ | ||
| import {Card} from "@/app/components"; | ||
| import {BarChart} from "@/app/components"; | ||
| import Season from "@/pages/season/[seasonNumber]"; | ||
| import { | ||
| fetchSeasonList, | ||
| fetchSingleSeasonPageChartData, | ||
| fetchSingleSeasonStdDevs, | ||
| SeasonData, | ||
| StdDevs | ||
| } from "@/app/utils/serverSideProps"; | ||
| import {GetServerSidePropsContext} from "next"; | ||
|
|
||
| type Statistic = { | ||
| mean: number; | ||
| standard_deviation: number; | ||
| variance: number; | ||
| } | ||
|
|
||
| type BarChartData = { | ||
| labels: string[]; | ||
| values: number[]; | ||
| } | ||
|
|
||
| type SingleChart = { | ||
| graph: BarChartData; | ||
| statistic: Statistic; | ||
| } | ||
|
|
||
| type SeasonData = { | ||
| [key: string]: SingleChart; | ||
| } | ||
|
|
||
| type StdDevs = { | ||
| DAMAGE: number; | ||
| SUPPORT: number; | ||
| TANK: number; | ||
| } | ||
|
|
||
|
|
||
| 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 Index = ({data, season_list, std_devs}: { data: SeasonData, season_list: string[], std_devs: StdDevs}) => { | ||
| return ( | ||
| <> | ||
|
|
||
| <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={std_devs.SUPPORT} role={"SUPPORT"} /> | ||
| <HeroStdDev value={std_devs.DAMAGE} role={"DAMAGE"}/> | ||
| <HeroStdDev value={std_devs.TANK} role={"TANK"}/> | ||
| </Card> | ||
|
|
||
|
|
||
| <Card title="Hero Occurrences: All Slots" nowrap> | ||
| {Object.keys(data).map(key => { | ||
| if (key.includes("O_ALL")){ | ||
| const [_, role, region] = key.split("_") | ||
| return <BarChart title={`${region}`} graph={data[key].graph} maxY={region === "ALL" ? 1250 : 500 } /> | ||
| } | ||
| })} | ||
| </Card> | ||
|
|
||
|
|
||
|
|
||
| <Card title="Hero Occurrences: First Most Played"> | ||
| {Object.keys(data).map(key => { | ||
| if (key.includes("OFMP")){ | ||
| const [_, role, region] = key.split("_") | ||
| return <BarChart title={`${role}: ${region}`} graph={data[key].graph} maxY={region === "ALL" ? 500 : 300 } /> | ||
| } | ||
| })} | ||
|
|
||
| </Card> | ||
|
|
||
| <Card title="Hero Occurrences: Second Most Played"> | ||
| {Object.keys(data).map(key => { | ||
| if (key.includes("OSMP")){ | ||
| const [_, role, region] = key.split("_") | ||
| return <BarChart title={`${role}: ${region}`} graph={data[key].graph} maxY={region === "ALL" ? 500 : 300 } /> | ||
| } | ||
| })} | ||
|
|
||
| </Card> | ||
|
|
||
|
|
||
| <Card title="Hero Occurrences: Third Most Played"> | ||
| {Object.keys(data).map(key => { | ||
| if (key.includes("OTMP")){ | ||
| const [_, role, region] = key.split("_") | ||
| return <BarChart title={`${role}: ${region}`} graph={data[key].graph} maxY={region === "ALL" ? 500 : 300 } /> | ||
| } | ||
| })} | ||
|
|
||
| </Card> | ||
|
|
||
| </> | ||
| ) | ||
| const Index = ({seasonChartData, seasonStdDevs}: {seasonChartData: SeasonData, seasonStdDevs: StdDevs}) => { | ||
| return <Season seasonChartData={seasonChartData} seasonStdDevs={seasonStdDevs} /> | ||
| } | ||
|
|
||
| export async function getServerSideProps(context: GetServerSidePropsContext) { | ||
|
|
||
| const seasonNumber = "7" | ||
|
|
||
| // Make an API call using seasonNumber | ||
| const res = await fetch(`http://server:8000/chart/${seasonNumber}_8`); | ||
| const data = await res.json(); | ||
|
|
||
|
|
||
| const res2 = await fetch("http://server:8000/d/seasons") | ||
| const season_list = await res2.json() | ||
|
|
||
| const res3 = await fetch(`http://server:8000/d/single_season_std_by_role/${seasonNumber}_8`) | ||
| const std_devs = await res3.json() | ||
| // @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: { | ||
| data, | ||
| season_list, | ||
| std_devs | ||
| seasonChartData, | ||
| seasonStdDevs | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| export default Index |
Oops, something went wrong.