m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-14 21:10:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

localize visitors in map tooltip

Browse Source
This commit is contained in:
Maxime-J 2023-09-02 08:58:25 +00:00
parent ee6fcae152
commit f4f869f919
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/WorldMap.js
View File

@ -8,6 +8,7 @@ import { ISO_COUNTRIES, MAP_FILE } from 'lib/constants';
import useTheme from 'components/hooks/useTheme'; import useTheme from 'components/hooks/useTheme';
import useCountryNames from 'components/hooks/useCountryNames'; import useCountryNames from 'components/hooks/useCountryNames';
import useLocale from 'components/hooks/useLocale'; import useLocale from 'components/hooks/useLocale';
import useMessages from 'components/hooks/useMessages';
import { formatLongNumber } from 'lib/format'; import { formatLongNumber } from 'lib/format';
import { percentFilter } from 'lib/filters'; import { percentFilter } from 'lib/filters';
import styles from './WorldMap.module.css'; import styles from './WorldMap.module.css';
@ -17,7 +18,9 @@ export function WorldMap({ data, className }) {
const [tooltip, setTooltipPopup] = useState(); const [tooltip, setTooltipPopup] = useState();
const { theme, colors } = useTheme(); const { theme, colors } = useTheme();
const { locale } = useLocale(); const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
const countryNames = useCountryNames(locale); const countryNames = useCountryNames(locale);
const visitorsLabel = formatMessage(labels.visitors).toLocaleLowerCase(locale);
const metrics = useMemo(() => (data ? percentFilter(data) : []), [data]); const metrics = useMemo(() => (data ? percentFilter(data) : []), [data]);
function getFillColor(code) { function getFillColor(code) {
@ -40,7 +43,7 @@ export function WorldMap({ data, className }) {
function handleHover(code) { function handleHover(code) {
if (code === 'AQ') return; if (code === 'AQ') return;
const country = metrics?.find(({ x }) => x === code); const country = metrics?.find(({ x }) => x === code);
setTooltipPopup(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} visitors`); setTooltipPopup(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} ${visitorsLabel}`);
} }
return ( return (