Merge pull request #873 from cywio/languages-table

Add languages to website details page
This commit is contained in:
Mike Cao 2021-12-19 23:05:17 -08:00 committed by GitHub
commit c531072a4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 269 additions and 2 deletions

View File

@ -0,0 +1,31 @@
import React from 'react';
import MetricsTable from './MetricsTable';
import { percentFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl';
import useLanguageNames from 'hooks/useLanguageNames';
import useLocale from 'hooks/useLocale';
export default function LanguagesTable({ websiteId, onDataLoad, ...props }) {
const { locale } = useLocale();
const languageNames = useLanguageNames(locale);
function renderLabel({ x }) {
return (
<div className={locale}>
{languageNames[x] ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />}{' '}
</div>
);
}
return (
<MetricsTable
{...props}
title={<FormattedMessage id="metrics.languages" defaultMessage="Languages" />}
type="language"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId}
onDataLoad={data => onDataLoad?.(percentFilter(data))}
renderLabel={renderLabel}
/>
);
}

View File

@ -16,6 +16,7 @@ import BrowsersTable from '../metrics/BrowsersTable';
import OSTable from '../metrics/OSTable'; import OSTable from '../metrics/OSTable';
import DevicesTable from '../metrics/DevicesTable'; import DevicesTable from '../metrics/DevicesTable';
import CountriesTable from '../metrics/CountriesTable'; import CountriesTable from '../metrics/CountriesTable';
import LanguagesTable from '../metrics/LanguagesTable';
import EventsTable from '../metrics/EventsTable'; import EventsTable from '../metrics/EventsTable';
import EventsChart from '../metrics/EventsChart'; import EventsChart from '../metrics/EventsChart';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
@ -30,6 +31,7 @@ const views = {
os: OSTable, os: OSTable,
device: DevicesTable, device: DevicesTable,
country: CountriesTable, country: CountriesTable,
language: LanguagesTable,
event: EventsTable, event: EventsTable,
}; };
@ -82,6 +84,10 @@ export default function WebsiteDetails({ websiteId }) {
label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />, label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
value: resolve({ view: 'country' }), value: resolve({ view: 'country' }),
}, },
{
label: <FormattedMessage id="metrics.languages" defaultMessage="Languages" />,
value: resolve({ view: 'language' }),
},
{ {
label: <FormattedMessage id="metrics.events" defaultMessage="Events" />, label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
value: resolve({ view: 'event' }), value: resolve({ view: 'event' }),

34
hooks/useLanguageNames.js Normal file
View File

@ -0,0 +1,34 @@
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { get } from 'lib/web';
import enUS from 'public/language/en-US.json';
const languageNames = {
'en-US': enUS,
};
export default function useLanguageNames(locale) {
const [list, setList] = useState(languageNames[locale] || enUS);
const { basePath } = useRouter();
async function loadData(locale) {
const { ok, data } = await get(`${basePath}/language/${locale}.json`);
if (ok) {
languageNames[locale] = data;
setList(languageNames[locale]);
} else {
setList(enUS);
}
}
useEffect(() => {
if (!languageNames[locale]) {
loadData(locale);
} else {
setList(languageNames[locale]);
}
}, [locale]);
return list;
}

View File

@ -2,7 +2,7 @@ import { getPageviewMetrics, getSessionMetrics, getWebsiteById } from 'lib/queri
import { ok, methodNotAllowed, unauthorized, badRequest } from 'lib/response'; import { ok, methodNotAllowed, unauthorized, badRequest } from 'lib/response';
import { allowQuery } from 'lib/auth'; import { allowQuery } from 'lib/auth';
const sessionColumns = ['browser', 'os', 'device', 'country']; const sessionColumns = ['browser', 'os', 'device', 'country', 'language'];
const pageviewColumns = ['url', 'referrer']; const pageviewColumns = ['url', 'referrer'];
function getTable(type) { function getTable(type) {
@ -37,7 +37,19 @@ export default async (req, res) => {
const endDate = new Date(+end_at); const endDate = new Date(+end_at);
if (sessionColumns.includes(type)) { if (sessionColumns.includes(type)) {
const data = await getSessionMetrics(websiteId, startDate, endDate, type, { url }); let data = await getSessionMetrics(websiteId, startDate, endDate, type, { url });
if (type === 'language') {
let combined = {};
for (let { x, y } of data) {
x = String(x).toLowerCase().split('-')[0];
if (!combined[x]) combined[x] = { x, y };
else combined[x].y += y;
}
data = Object.values(combined);
}
return ok(res, data); return ok(res, data);
} }

184
public/language/en-US.json Normal file
View File

@ -0,0 +1,184 @@
{
"ab": "Abkhaz",
"aa": "Afar",
"af": "Afrikaans",
"ak": "Akan",
"sq": "Albanian",
"am": "Amharic",
"ar": "Arabic",
"an": "Aragonese",
"hy": "Armenian",
"as": "Assamese",
"av": "Avaric",
"ae": "Avestan",
"ay": "Aymara",
"az": "Azerbaijani",
"bm": "Bambara",
"ba": "Bashkir",
"eu": "Basque",
"be": "Belarusian",
"bn": "Bengali",
"bh": "Bihari",
"bi": "Bislama",
"bs": "Bosnian",
"br": "Breton",
"bg": "Bulgarian",
"my": "Burmese",
"ca": "Catalan; Valencian",
"ch": "Chamorro",
"ce": "Chechen",
"ny": "Chichewa; Chewa; Nyanja",
"zh": "Chinese",
"cv": "Chuvash",
"kw": "Cornish",
"co": "Corsican",
"cr": "Cree",
"hr": "Croatian",
"cs": "Czech",
"da": "Danish",
"dv": "Divehi; Dhivehi; Maldivian;",
"nl": "Dutch",
"en": "English",
"eo": "Esperanto",
"et": "Estonian",
"ee": "Ewe",
"fo": "Faroese",
"fj": "Fijian",
"fi": "Finnish",
"fr": "French",
"ff": "Fula; Fulah; Pulaar; Pular",
"gl": "Galician",
"ka": "Georgian",
"de": "German",
"el": "Greek, Modern",
"gn": "Guaraní",
"gu": "Gujarati",
"ht": "Haitian; Haitian Creole",
"ha": "Hausa",
"he": "Hebrew (modern)",
"hz": "Herero",
"hi": "Hindi",
"ho": "Hiri Motu",
"hu": "Hungarian",
"ia": "Interlingua",
"id": "Indonesian",
"ie": "Interlingue",
"ga": "Irish",
"ig": "Igbo",
"ik": "Inupiaq",
"io": "Ido",
"is": "Icelandic",
"it": "Italian",
"iu": "Inuktitut",
"ja": "Japanese",
"jv": "Javanese",
"kl": "Kalaallisut, Greenlandic",
"kn": "Kannada",
"kr": "Kanuri",
"ks": "Kashmiri",
"kk": "Kazakh",
"km": "Khmer",
"ki": "Kikuyu, Gikuyu",
"rw": "Kinyarwanda",
"ky": "Kirghiz, Kyrgyz",
"kv": "Komi",
"kg": "Kongo",
"ko": "Korean",
"ku": "Kurdish",
"kj": "Kwanyama, Kuanyama",
"la": "Latin",
"lb": "Luxembourgish, Letzeburgesch",
"lg": "Luganda",
"li": "Limburgish, Limburgan, Limburger",
"ln": "Lingala",
"lo": "Lao",
"lt": "Lithuanian",
"lu": "Luba-Katanga",
"lv": "Latvian",
"gv": "Manx",
"mk": "Macedonian",
"mg": "Malagasy",
"ms": "Malay",
"ml": "Malayalam",
"mt": "Maltese",
"mi": "Māori",
"mr": "Marathi (Marāṭhī)",
"mh": "Marshallese",
"mn": "Mongolian",
"na": "Nauru",
"nv": "Navajo, Navaho",
"nb": "Norwegian Bokmål",
"nd": "North Ndebele",
"ne": "Nepali",
"ng": "Ndonga",
"nn": "Norwegian Nynorsk",
"no": "Norwegian",
"ii": "Nuosu",
"nr": "South Ndebele",
"oc": "Occitan",
"oj": "Ojibwe, Ojibwa",
"cu": "Old Church Slavonic, Church Slavic, Church Slavonic, Old Bulgarian, Old Slavonic",
"om": "Oromo",
"or": "Oriya",
"os": "Ossetian, Ossetic",
"pa": "Panjabi, Punjabi",
"pi": "Pāli",
"fa": "Persian",
"pl": "Polish",
"ps": "Pashto, Pushto",
"pt": "Portuguese",
"qu": "Quechua",
"rm": "Romansh",
"rn": "Kirundi",
"ro": "Romanian, Moldavian, Moldovan",
"ru": "Russian",
"sa": "Sanskrit (Saṁskṛta)",
"sc": "Sardinian",
"sd": "Sindhi",
"se": "Northern Sami",
"sm": "Samoan",
"sg": "Sango",
"sr": "Serbian",
"gd": "Scottish Gaelic; Gaelic",
"sn": "Shona",
"si": "Sinhala, Sinhalese",
"sk": "Slovak",
"sl": "Slovene",
"so": "Somali",
"st": "Southern Sotho",
"es": "Spanish; Castilian",
"su": "Sundanese",
"sw": "Swahili",
"ss": "Swati",
"sv": "Swedish",
"ta": "Tamil",
"te": "Telugu",
"tg": "Tajik",
"th": "Thai",
"ti": "Tigrinya",
"bo": "Tibetan Standard, Tibetan, Central",
"tk": "Turkmen",
"tl": "Tagalog",
"tn": "Tswana",
"to": "Tonga (Tonga Islands)",
"tr": "Turkish",
"ts": "Tsonga",
"tt": "Tatar",
"tw": "Twi",
"ty": "Tahitian",
"ug": "Uighur, Uyghur",
"uk": "Ukrainian",
"ur": "Urdu",
"uz": "Uzbek",
"ve": "Venda",
"vi": "Vietnamese",
"vo": "Volapük",
"wa": "Walloon",
"cy": "Welsh",
"wo": "Wolof",
"fy": "Western Frisian",
"xh": "Xhosa",
"yi": "Yiddish",
"yo": "Yoruba",
"za": "Zhuang, Chuang"
}