display to screen

frontend/pages/index.tsx

@@ -22,10 +22,34 @@ 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>
 
-const Index = ({data, season_list}: { data: SeasonData, season_list: string[]}) => {
+    </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")){
@@ -74,21 +98,29 @@ const Index = ({data, season_list}: { data: SeasonData, season_list: string[]})
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
 
+    const seasonNumber = "7"
+
     // Make an API call using seasonNumber
-    const res = await fetch(`http://server:8000/chart/7_8`);
+    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()
+
     return {
         props: {
             data,
             season_list,
+            std_devs
         },
     };
 }
 
 
+
+
 export default Index

frontend/pages/season/[seasonNumber].tsx

@@ -23,10 +23,31 @@ type SeasonData = {
     [key: string]: SingleChart;
 }
 
+type StdDevs = {
+    DAMAGE: number;
+    SUPPORT: number;
+    TANK: number;
+}
 
-const Season = ({data, season_list}: { data: SeasonData, season_list: string[]}) => {
+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 Season = ({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")){
@@ -85,10 +106,14 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     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()
+
     return {
         props: {
             data,
             season_list,
+            std_devs
         },
     };
 }