umami/components/metrics/MetricsTable.js

99 lines
2.4 KiB
JavaScript
Raw Normal View History

import React, { useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
2020-08-01 04:05:14 +02:00
import classNames from 'classnames';
2020-09-26 08:38:28 +02:00
import Link from 'components/common/Link';
import Loading from 'components/common/Loading';
import useFetch from 'hooks/useFetch';
2020-08-09 12:04:48 +02:00
import Arrow from 'assets/arrow-right.svg';
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';
import styles from './MetricsTable.module.css';
2020-08-01 04:05:14 +02:00
export default function MetricsTable({
2020-08-01 04:05:14 +02:00
websiteId,
websiteDomain,
token,
2020-08-31 23:11:30 +02:00
title,
metric,
2020-08-01 04:05:14 +02:00
type,
className,
2020-08-01 05:37:29 +02:00
dataFilter,
filterOptions,
2020-08-10 00:13:38 +02:00
limit,
2020-08-25 08:49:14 +02:00
renderLabel,
2020-10-10 10:16:28 +02:00
height,
2020-08-01 12:34:56 +02:00
onDataLoad = () => {},
2020-08-01 04:05:14 +02:00
}) {
const [dateRange] = useDateRange(websiteId);
2020-09-01 00:02:32 +02:00
const { startDate, endDate, modified } = dateRange;
2020-09-26 07:31:18 +02:00
const {
2020-09-26 08:38:28 +02:00
resolve,
2020-09-26 09:26:59 +02:00
router,
2020-09-26 07:31:18 +02:00
query: { url },
} = usePageQuery();
const { data, loading, error } = useFetch(
`/api/website/${websiteId}/metrics`,
{
2020-10-09 21:39:03 +02:00
params: {
type,
start_at: +startDate,
end_at: +endDate,
domain: websiteDomain,
url,
token,
},
onDataLoad,
delay: DEFAULT_ANIMATION_DURATION,
},
2020-10-09 21:39:03 +02:00
[modified],
);
2020-08-01 04:05:14 +02:00
const filteredData = useMemo(() => {
2020-08-01 06:56:25 +02:00
if (data) {
const items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data);
2020-08-10 00:13:38 +02:00
if (limit) {
return items.filter((e, i) => i < limit);
}
return items;
2020-08-01 06:56:25 +02:00
}
return [];
}, [data, error, dataFilter, filterOptions]);
2020-08-01 04:05:14 +02:00
return (
2020-08-10 00:13:38 +02:00
<div className={classNames(styles.container, className)}>
{!data && loading && <Loading />}
{error && <ErrorMessage />}
{data && !error && (
<DataTable
title={title}
data={filteredData}
metric={metric}
className={className}
renderLabel={renderLabel}
limit={limit}
2020-10-10 10:16:28 +02:00
height={height}
animate={limit > 0}
2020-08-04 03:12:28 +02:00
/>
)}
<div className={styles.footer}>
{limit && (
<Link
icon={<Arrow />}
href={router.pathname}
as={resolve({ view: type })}
size="small"
iconRight
>
<FormattedMessage id="button.more" defaultMessage="More" />
</Link>
)}
2020-08-01 05:37:29 +02:00
</div>
2020-08-01 04:05:14 +02:00
</div>
);
}