Added regions and cities support.

This commit is contained in:
Mike Cao 2023-04-13 22:28:29 -07:00
parent ad3ee5e953
commit f2edd0d604
58 changed files with 293 additions and 70 deletions

View file

@ -0,0 +1,30 @@
import MetricsTable from './MetricsTable';
import { emptyFilter } from 'lib/filters';
import FilterLink from 'components/common/FilterLink';
import useLocale from 'hooks/useLocale';
import useMessages from 'hooks/useMessages';
export default function CitiesTable({ websiteId, ...props }) {
const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
function renderLink({ x }) {
return (
<div className={locale}>
<FilterLink id="city" value={x} />
</div>
);
}
return (
<MetricsTable
{...props}
title={formatMessage(labels.cities)}
type="city"
metric={formatMessage(labels.visitors)}
websiteId={websiteId}
dataFilter={emptyFilter}
renderLabel={renderLink}
/>
);
}

View file

@ -1,11 +1,10 @@
import MetricsTable from './MetricsTable';
import { percentFilter } from 'lib/filters';
import FilterLink from 'components/common/FilterLink';
import useCountryNames from 'hooks/useCountryNames';
import useLocale from 'hooks/useLocale';
import useMessages from 'hooks/useMessages';
export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
export default function CountriesTable({ websiteId, ...props }) {
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
const { formatMessage, labels } = useMessages();
@ -25,7 +24,6 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
type="country"
metric={formatMessage(labels.visitors)}
websiteId={websiteId}
onDataLoad={data => onDataLoad?.(percentFilter(data))}
renderLabel={renderLink}
/>
);

View file

@ -29,7 +29,7 @@ export default function MetricsTable({
const {
resolveUrl,
router,
query: { url, referrer, os, browser, device, country },
query: { url, referrer, os, browser, device, country, region, city },
} = usePageQuery();
const { formatMessage, labels } = useMessages();
const { get, useQuery } = useApi();
@ -37,7 +37,7 @@ export default function MetricsTable({
const { data, isLoading, isFetched, error } = useQuery(
[
'websites:metrics',
{ websiteId, type, modified, url, referrer, os, browser, device, country },
{ websiteId, type, modified, url, referrer, os, browser, device, country, region, city },
],
() =>
get(`/websites/${websiteId}/metrics`, {
@ -50,6 +50,8 @@ export default function MetricsTable({
browser,
device,
country,
region,
city,
}),
{ onSuccess: onDataLoad, retryDelay: delay || DEFAULT_ANIMATION_DURATION },
);

View file

@ -0,0 +1,31 @@
import MetricsTable from './MetricsTable';
import { emptyFilter } from 'lib/filters';
import FilterLink from 'components/common/FilterLink';
import useLocale from 'hooks/useLocale';
import useMessages from 'hooks/useMessages';
import regions from 'public/iso-3166-2.json';
export default function RegionsTable({ websiteId, ...props }) {
const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
function renderLink({ x }) {
return (
<div className={locale}>
<FilterLink id="region" value={x} label={regions[x] || x} />
</div>
);
}
return (
<MetricsTable
{...props}
title={formatMessage(labels.regions)}
type="region"
metric={formatMessage(labels.visitors)}
websiteId={websiteId}
dataFilter={emptyFilter}
renderLabel={renderLink}
/>
);
}

View file

@ -33,13 +33,16 @@ export default function WebsiteChart({
const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();
const {
query: { url, referrer, os, browser, device, country, title },
query: { url, referrer, os, browser, device, country, region, city, title },
} = usePageQuery();
const { get, useQuery } = useApi();
const { ref, isSticky } = useSticky({ enabled: stickyHeader });
const { data, isLoading, error } = useQuery(
['websites:pageviews', { websiteId, modified, url, referrer, os, browser, device, country }],
[
'websites:pageviews',
{ websiteId, modified, url, referrer, os, browser, device, country, region, city, title },
],
() =>
get(`/websites/${websiteId}/pageviews`, {
startAt: +startDate,
@ -52,6 +55,9 @@ export default function WebsiteChart({
browser,
device,
country,
region,
city,
title,
}),
{ onSuccess: onDataLoad },
);
@ -82,7 +88,7 @@ export default function WebsiteChart({
</WebsiteHeader>
<FilterTags
websiteId={websiteId}
params={{ url, referrer, os, browser, device, country, title }}
params={{ url, referrer, os, browser, device, country, region, city, title }}
/>
<Row
ref={ref}