diff --git a/screens/about/index.tsx b/screens/about/index.tsx index 44af887e..41fd715d 100644 --- a/screens/about/index.tsx +++ b/screens/about/index.tsx @@ -60,6 +60,143 @@ const BugReports = () => { ); }; +const Statistics = () => { + return ( + <> + Data Scraping +
  • Tracking only "automatch" matches.
    • +
  • Tracking only matches where at least one player is ranked in the leaderboards.
    • + See Data source article bellow for more details. + + ELO Filtering +
  • + You can filter by single ELO group like{" "} + + this + +
    • +
  • + You can filter by combining multiple ELO groups like{" "} + + this + +
    • + It's recommended to combine multiple ELO groups to get more data for you analysis. Keep in + mind that you need thousands of games to get meaningful results. + + Average Group Filter + <> + Average ELO of all players fit in the specified group. +
  • + + Good + {" "} + - a lot of games can fit into the group. +
    • +
  • + + {" "} + Bad + {" "} + - the game might not be balanced, it can be team A 1100 ELO vs Team B 1600 ELO. +
    • + Formula: + + Sum ELO of all players in match divided by number of players. + + + + Average Fair Matchup Filter + <> + + Average ELO of all players fit in the specified group while the difference between the + teams ELO is bellow 20% + +
  • + + Good + {" "} + - provides balanced games with more games to analyze. Useful for 3v3 and 4v4 +
    • +
  • + + {" "} + Bad + {" "} + - the team itself might not be balanced. Team A can have player with 1600 and 800 ELO + resulting in the average ELO of 1200 of team A. +
    • + Formula: + + Calculate average ELO of team A and team B. The difference between the ELO of the team A + and B is less than 20%. + + + + Average Excluded Group + <> + + Average ELO of all players fit in the specified group while the difference between the + lowest ELO and highest ELO player is less then 400. + +
  • + + Good + {" "} + - provides balanced games +
    • +
  • + + {" "} + Bad + {" "} + - less games can fit into this group. Very low matches in mode 3v3 and 4v4 can fit into + this group. +
    • + Formula: + + Sum ELO of all players in match divided by number of players to get match ELO. The + difference between the lowest ELO and highest ELO player is less then 400. + + + + Limit Group + <> + + Average ELO of all players fit in the specified group while the difference between the + lowest ELO and highest ELO player is less then 400. + +
  • + + Good + {" "} + - should provide the most balanced games +
    • +
  • + + {" "} + Bad + {" "} + - very low matches fit. Unusable for 3v3 and 4v4. +
    • + Formula: + + All players in the match has to fit into the specified group. The difference between the + lowest ELO and highest ELO player is less then 400. + + + + ); +}; + const keywords = generateKeywordsString(["coh3 stats", "coh3 discord", "bug report", "github"]); const sections = [ @@ -70,6 +207,12 @@ const sections = [ pageDisplayName: "Bug Reports, Feature Request and Contributions", component: , }, + { + name: "stats", + menuDisplayName: "Statistics", + pageDisplayName: "Game Statistics", + component: , + }, { name: "data", menuDisplayName: "Data", diff --git a/screens/stats/stats-container-selector.tsx b/screens/stats/stats-container-selector.tsx index 71304478..e3416c8d 100644 --- a/screens/stats/stats-container-selector.tsx +++ b/screens/stats/stats-container-selector.tsx @@ -7,9 +7,11 @@ import { AnalyticsMapStatsPageView, } from "../../src/firebase/analytics"; import { + Anchor, Button, Container, Flex, + HoverCard, MultiSelect, SegmentedControl, Select, @@ -29,7 +31,8 @@ import config from "../../config"; import InnerGameStatsPage from "./game/inner-game-stats-page"; import InnerMapsStatsPage from "./maps/inner-maps-stats-page"; import { analysisFilterType, analysisMapFilterType } from "../../src/analysis-types"; -import HelperIcon from "../../components/icon/helper"; +import { IconInfoCircle } from "@tabler/icons-react"; +import { getAboutRoute } from "../../src/routes"; const patchSelectorData = getPatchVersionAsMantineV7Groups(); @@ -250,6 +253,41 @@ const StatsContainerSelector = ({ statsType }: { statsType: "gameStats" | "mapSt }, ], }, + { + group: "Average Fair Matchup", + items: [ + { + value: `${statsType === "gameStats" ? "stats" : "mapStats"}-fair-1600-9999`, + label: "Average Fair 1600+", + disabled: disabledMultiFilter.averageDisabled, + }, + { + value: `${statsType === "gameStats" ? "stats" : "mapStats"}-fair-1400-1599`, + label: "Average Fair 1400-1599", + disabled: disabledMultiFilter.averageDisabled, + }, + { + value: `${statsType === "gameStats" ? "stats" : "mapStats"}-fair-1250-1399`, + label: "Average Fair 1250-1399", + disabled: disabledMultiFilter.averageDisabled, + }, + { + value: `${statsType === "gameStats" ? "stats" : "mapStats"}-fair-1100-1249`, + label: "Average Fair 1100-1249", + disabled: disabledMultiFilter.averageDisabled, + }, + { + value: `${statsType === "gameStats" ? "stats" : "mapStats"}-fair-800-1099`, + label: "Average Fair 800-1099", + disabled: disabledMultiFilter.averageDisabled, + }, + { + value: `${statsType === "gameStats" ? "stats" : "mapStats"}-fair-0-799`, + label: "Average Fair 0-799", + disabled: disabledMultiFilter.averageDisabled, + }, + ], + }, { group: "Average Ex 400 diff", items: [ @@ -355,12 +393,23 @@ const StatsContainerSelector = ({ statsType }: { statsType: "gameStats" | "mapSt withCheckIcon={false} label={ <> - ELO Filter{" "} - + + +
    + ELO Filter +
    +     + + + + Learn more about Stats and ELO Filters + +
    Average Group - Average ELO of all players fit in the specified group
    + Average Fair Matchup - Average ELO of all players fit in the + specified group while the difference between the teams ELO is bellow 20% +
    Average Excluded Group - Average ELO of all players fit into specified group while the difference between the lowest ELO player and highest ELO player in the match is bellow 400 @@ -368,10 +417,8 @@ const StatsContainerSelector = ({ statsType }: { statsType: "gameStats" | "mapSt Limit Group - ELO of all players in the match must fit into specified group     - } - iconSize={18} - position={"bottom"} - /> +     +     } defaultValue="all" diff --git a/src/analysis-types.ts b/src/analysis-types.ts index 7534c12f..b2535afb 100644 --- a/src/analysis-types.ts +++ b/src/analysis-types.ts @@ -33,6 +33,12 @@ export const analysisFilterTypeArray = [ "stats-average-ex-1250-1399", "stats-average-ex-1400-1599", "stats-average-ex-1600-9999", + "stats-fair-0-799", + "stats-fair-800-1099", + "stats-fair-1100-1249", + "stats-fair-1250-1399", + "stats-fair-1400-1599", + "stats-fair-1600-9999", ] as const; export type analysisFilterType = (typeof analysisFilterTypeArray)[number]; @@ -57,6 +63,12 @@ export const analysisMapFilterTypeArray = [ "mapStats-average-ex-1250-1399", "mapStats-average-ex-1400-1599", "mapStats-average-ex-1600-9999", + "mapStats-fair-0-799", + "mapStats-fair-800-1099", + "mapStats-fair-1100-1249", + "mapStats-fair-1250-1399", + "mapStats-fair-1400-1599", + "mapStats-fair-1600-9999", ] as const; export type analysisMapFilterType = (typeof analysisMapFilterTypeArray)[number]; diff --git a/src/routes.ts b/src/routes.ts index 577475b8..c1059dec 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -87,7 +87,11 @@ export const getDesktopAppRoute = () => { return encodeURI(`/desktop-app`); }; -export const getAboutRoute = () => { +export const getAboutRoute = (section?: string) => { + if (section) { + return encodeURI(`/about#${section}`); + } + return encodeURI(`/about`); };