umami/components/metrics/MetricsTable.js

95 lines
2.8 KiB
JavaScript
Raw Normal View History

import { useMemo } from 'react';
2023-02-09 08:14:11 +01:00
import { Loading, Icon, Text, Button } from 'react-basics';
import Link from 'next/link';
2020-10-22 01:14:51 +02:00
import firstBy from 'thenby';
2020-08-01 04:05:14 +02:00
import classNames from 'classnames';
import useApi from 'hooks/useApi';
2020-08-01 12:34:56 +02:00
import { percentFilter } from 'lib/filters';
import useDateRange from 'hooks/useDateRange';
2020-09-26 08:38:28 +02:00
import usePageQuery from 'hooks/usePageQuery';
import ErrorMessage from 'components/common/ErrorMessage';
import DataTable from './DataTable';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
2023-02-09 08:14:11 +01:00
import Icons from 'components/icons';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
import styles from './MetricsTable.module.css';
import useLocale from 'hooks/useLocale';
2020-08-01 04:05:14 +02:00
export default function MetricsTable({
2020-08-01 04:05:14 +02:00
websiteId,
type,
className,
2020-08-01 05:37:29 +02:00
dataFilter,
filterOptions,
2020-08-10 00:13:38 +02:00
limit,
2020-10-11 10:33:26 +02:00
onDataLoad,
2022-07-22 01:22:43 +02:00
delay = null,
2020-10-11 10:33:26 +02:00
...props
2020-08-01 04:05:14 +02:00
}) {
2022-03-02 06:13:15 +01:00
const [{ startDate, endDate, modified }] = useDateRange(websiteId);
2020-09-26 07:31:18 +02:00
const {
resolveUrl,
2020-09-26 09:26:59 +02:00
router,
2023-04-14 07:28:29 +02:00
query: { url, referrer, os, browser, device, country, region, city },
2020-09-26 07:31:18 +02:00
} = usePageQuery();
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
const { get, useQuery } = useApi();
2020-09-26 07:31:18 +02:00
2023-02-04 17:59:52 +01:00
const { data, isLoading, isFetched, error } = useQuery(
2023-04-07 05:34:02 +02:00
[
'websites:metrics',
2023-04-14 07:28:29 +02:00
{ websiteId, type, modified, url, referrer, os, browser, device, country, region, city },
2023-04-07 05:34:02 +02:00
],
() =>
get(`/websites/${websiteId}/metrics`, {
2020-10-09 21:39:03 +02:00
type,
2022-12-27 02:36:48 +01:00
startAt: +startDate,
endAt: +endDate,
2020-10-09 21:39:03 +02:00
url,
referrer,
2022-04-10 12:51:43 +02:00
os,
browser,
device,
country,
2023-04-14 07:28:29 +02:00
region,
city,
}),
{ onSuccess: onDataLoad, retryDelay: delay || DEFAULT_ANIMATION_DURATION },
);
2020-08-01 04:05:14 +02:00
const filteredData = useMemo(() => {
2020-08-01 06:56:25 +02:00
if (data) {
2022-08-08 10:26:20 +02:00
let items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data);
2020-08-10 00:13:38 +02:00
if (limit) {
2022-08-08 10:26:20 +02:00
items = items.filter((e, i) => i < limit);
}
if (filterOptions?.sort === false) {
return items;
2020-08-10 00:13:38 +02:00
}
2020-10-22 01:14:51 +02:00
return items.sort(firstBy('y', -1).thenBy('x'));
2020-08-01 06:56:25 +02:00
}
return [];
}, [data, error, dataFilter, filterOptions]);
const { dir } = useLocale();
2020-08-01 04:05:14 +02:00
return (
2020-08-10 00:13:38 +02:00
<div className={classNames(styles.container, className)}>
2023-02-04 17:59:52 +01:00
{!data && isLoading && !isFetched && <Loading icon="dots" />}
{error && <ErrorMessage />}
2020-10-13 01:31:51 +02:00
{data && !error && <DataTable {...props} data={filteredData} className={className} />}
<div className={styles.footer}>
2020-10-13 01:31:51 +02:00
{data && !error && limit && (
<Link href={router.pathname} as={resolveUrl({ view: type })}>
<Button variant="quiet">
2023-03-22 22:05:55 +01:00
<Text>{formatMessage(labels.more)}</Text>
<Icon size="sm" rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight />
</Icon>
</Button>
</Link>
)}
2020-08-01 05:37:29 +02:00
</div>
2020-08-01 04:05:14 +02:00
</div>
);
}