umami/components/metrics/CountriesTable.js

38 lines
1003 B
JavaScript
Raw Normal View History

import MetricsTable from './MetricsTable';
2022-04-10 12:51:43 +02:00
import FilterLink from 'components/common/FilterLink';
2020-10-01 01:27:27 +02:00
import useCountryNames from 'hooks/useCountryNames';
import useLocale from 'hooks/useLocale';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
2023-04-21 17:00:42 +02:00
export function CountriesTable({ websiteId, ...props }) {
const { locale } = useLocale();
2020-10-01 01:27:27 +02:00
const countryNames = useCountryNames(locale);
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
2020-10-01 01:27:27 +02:00
2022-04-10 12:51:43 +02:00
function renderLink({ x: code }) {
return (
2023-04-24 04:52:44 +02:00
<FilterLink
id="country"
className={locale}
value={countryNames[code] && code}
label={countryNames[code]}
>
<img src={`/images/flags/${code.toLowerCase()}.png`} alt={code} />
</FilterLink>
);
2020-10-01 01:27:27 +02:00
}
return (
<MetricsTable
2020-10-11 10:33:26 +02:00
{...props}
2023-03-22 22:05:55 +01:00
title={formatMessage(labels.countries)}
type="country"
2023-03-22 22:05:55 +01:00
metric={formatMessage(labels.visitors)}
websiteId={websiteId}
2022-04-10 12:51:43 +02:00
renderLabel={renderLink}
/>
);
}
2023-04-21 17:00:42 +02:00
export default CountriesTable;