x trends translated

frontend-react/public/locales/en/translation.json

@@ -1504,5 +1504,8 @@
     "X Power": "X Power",
     "Placement": "Placement",
     "ID": "ID"
+  },
+  "xtrends": {
+    "trendsExplanation": "Here you can find X Rank Top 500 usage tier lists. For example for a weapon to be in the X tier it needs at least 30 placements in that mode that month."
   }
 }

frontend-react/src/components/xsearch/Top500Forms.tsx

@@ -8,6 +8,7 @@ import Select from "../elements/Select"
 import Label from "../elements/Label"
 import { Weapon } from "../../types"
 import { useTranslation } from "react-i18next"
+import { getLocalizedMonthYearString } from "../../utils/helperFunctions"
 
 interface Top500FormsProps {
   forms: {
@@ -20,23 +21,6 @@ interface Top500FormsProps {
   handleChange: (value: Object) => void
 }
 
-const getLocalizedMonthYearString = (
-  month: number,
-  year: number,
-  locale: string
-) => {
-  const dateForLocalization = new Date()
-  dateForLocalization.setDate(1)
-  dateForLocalization.setMonth(month)
-  dateForLocalization.setFullYear(year)
-  const localizedString = dateForLocalization.toLocaleString(locale, {
-    month: "long",
-    year: "numeric",
-  })
-
-  return localizedString.charAt(0).toUpperCase() + localizedString.slice(1)
-}
-
 const Top500Forms: React.FC<Top500FormsProps> = ({ forms, handleChange }) => {
   const { t, i18n } = useTranslation()
   const { themeColor } = useContext(MyThemeContext)

frontend-react/src/components/xtrends/WeaponLineChart.tsx

@@ -3,6 +3,8 @@ import { LineChart, Line, Tooltip } from "recharts"
 import MyThemeContext from "../../themeContext"
 import { months } from "../../utils/lists"
 import { Box, Flex, Badge } from "@chakra-ui/core"
+import { useTranslation } from "react-i18next"
+import { parseAndGetLocalizedMonthYear } from "../../utils/helperFunctions"
 
 interface WeaponLineChartProps {
   counts: {
@@ -66,11 +68,8 @@ const WeaponLineChart: React.FC<WeaponLineChartProps> = ({
     )
   }
 
-  const CustomTooltip: React.FC<CustomTooltipProps> = ({
-    active,
-    payload,
-    label,
-  }) => {
+  const CustomTooltip: React.FC<CustomTooltipProps> = ({ active, payload }) => {
+    const { i18n } = useTranslation()
     if (active) {
       return (
         <Flex
@@ -82,7 +81,10 @@ const WeaponLineChart: React.FC<WeaponLineChartProps> = ({
           border="1px solid"
         >
           <Box fontWeight="bolder" fontSize="1.1em">
-            {payload[0].payload.name}
+            {parseAndGetLocalizedMonthYear(
+              payload[0].payload.name,
+              i18n.language
+            )}
           </Box>
           <Box fontWeight="bold">
             <Badge variantColor={themeColor} mr="0.5em">

frontend-react/src/components/xtrends/XTrendsPage.tsx

@@ -22,6 +22,11 @@ import Select from "../elements/Select"
 import WeaponLineChart from "./WeaponLineChart"
 import { Helmet } from "react-helmet-async"
 import Alert from "../elements/Alert"
+import { useTranslation } from "react-i18next"
+import {
+  getLocalizedMonthYearString,
+  parseAndGetLocalizedMonthYear,
+} from "../../utils/helperFunctions"
 
 const tiers = [
   {
@@ -71,7 +76,15 @@ const tiers = [
   },
 ] as const
 
+const modeTranslationKey = new Map([
+  ["SZ", "splatZonesShort"],
+  ["TC", "towerControlShort"],
+  ["RM", "rainMakerShort"],
+  ["CB", "clamBlitzShort"],
+])
+
 const XTrendsPage: React.FC<RouteComponentProps> = () => {
+  const { t, i18n } = useTranslation()
   const { grayWithShade, darkerBgColor, themeColorWithShade } = useContext(
     MyThemeContext
   )
@@ -142,19 +155,25 @@ const XTrendsPage: React.FC<RouteComponentProps> = () => {
     <>
       <PageHeader title="Top 500 Tier Lists" />
       <Helmet>
-        <title>Top 500 Tier Lists | sendou.ink</title>
+        <title>{t("navigation;Top 500 Tier Lists")} | sendou.ink</title>
       </Helmet>
       <Box my="1em">
-        <Alert status="info">
-          Here you can find X Rank Top 500 usage tier lists. For example for a
-          weapon to be in the X tier it needs at least 30 placements in that
-          mode that month.
-        </Alert>
+        <Alert status="info">{t("xtrends;trendsExplanation")}</Alert>
       </Box>
       <Select
-        value={month}
+        value={
+          month
+            ? {
+                label: parseAndGetLocalizedMonthYear(month, i18n.language),
+                value: month,
+              }
+            : null
+        }
         setValue={(value) => setMonth(value)}
-        options={xRankMonths.map((month) => ({ label: month, value: month }))}
+        options={xRankMonths.map((month) => ({
+          label: parseAndGetLocalizedMonthYear(month, i18n.language),
+          value: month,
+        }))}
       />
       <Box my="1em">
         <ModeButtons
@@ -221,7 +240,8 @@ const XTrendsPage: React.FC<RouteComponentProps> = () => {
                         mb="0.5em"
                         textAlign="center"
                       >
-                        {weapon.name} ({mode})
+                        {t("game;" + weapon.name)} (
+                        {t("plans;" + modeTranslationKey.get(mode))})
                       </Box>
                       <WeaponLineChart
                         counts={

frontend-react/src/utils/helperFunctions.ts

@@ -1,3 +1,5 @@
+import { months } from "./lists"
+
 export function choose(choices: any[]) {
   var index = Math.floor(Math.random() * choices.length)
   return choices[index]
@@ -41,3 +43,31 @@ export const getWeek = (dateInput: Date) => {
     )
   )
 }
+
+export const getLocalizedMonthYearString = (
+  month: number,
+  year: number,
+  locale: string
+) => {
+  const dateForLocalization = new Date()
+  dateForLocalization.setDate(1)
+  dateForLocalization.setMonth(month)
+  dateForLocalization.setFullYear(year)
+  const localizedString = dateForLocalization.toLocaleString(locale, {
+    month: "long",
+    year: "numeric",
+  })
+
+  return localizedString.charAt(0).toUpperCase() + localizedString.slice(1)
+}
+
+export const parseAndGetLocalizedMonthYear = (
+  monthYear: string,
+  locale: string
+) => {
+  const [monthToParse, yearToParse] = monthYear.split(" ")
+  const year = parseInt(yearToParse)
+  const month = months.indexOf(monthToParse as any)
+
+  return getLocalizedMonthYearString(month, year, locale)
+}