diff --git a/frontend/pages/statistics.tsx b/frontend/pages/statistics.tsx index 20b4741fd..86bc28823 100644 --- a/frontend/pages/statistics.tsx +++ b/frontend/pages/statistics.tsx @@ -8,7 +8,14 @@ import { HiCloudArrowDown, HiCalendar, HiListBullet } from "react-icons/hi2" import ListBox from "../src/components/application/ListBox" import { i18n, useTranslation } from "next-i18next" import { useTheme } from "next-themes" -import { getIntlLocale, registerIsoCountriesLocales } from "../src/localize" +import { + getIntlLocale, + getLanguageFlag, + getLanguageName, + getLocale, + Language, + registerIsoCountriesLocales, +} from "../src/localize" import { Category, categoryToName } from "src/types/Category" import { useRouter } from "next/router" import { useQuery } from "@tanstack/react-query" @@ -26,6 +33,7 @@ import { } from "src/chartComponents" import { useState } from "react" import { ChartContainer, ChartConfig } from "@/components/ui/chart" +import ReactCountryFlag from "react-country-flag" const countries = registerIsoCountriesLocales() @@ -67,7 +75,7 @@ const DownloadsPerCountry = ({ stats }: { stats: StatsResult }) => {

{t("downloads-per-country")}

-
+
{ tooltipTextFunction={getLocalizedText} rtl={i18n.dir() === "rtl"} /> +
+ {country_data + .toSorted((a, b) => b.value - a.value) + .map(({ country, value }, i) => { + const translatedCountryName = countries.getName( + country, + i18n.language, + ) + return ( +
+
{i + 1}.
+
+ +
{translatedCountryName}
+
+
{value.toLocaleString(i18n.language)}
+
+ ) + })} +
)