watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 07:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Typescript refactor.

Browse source
This commit is contained in:
Mike Cao 2023-12-03 03:07:03 -08:00
parent b578162cb6
commit 7c42f0da82
173 changed files with 968 additions and 549 deletions
Download patch file Download diff file Expand all files Collapse all files

120
src/components/metrics/MetricsTable.js
View file

@ -1,120 +0,0 @@
import { useMemo } from 'react';
import { Loading, Icon, Text } from 'react-basics';
import firstBy from 'thenby';
import classNames from 'classnames';
import useApi from 'components/hooks/useApi';
import { percentFilter } from 'lib/filters';
import useDateRange from 'components/hooks/useDateRange';
import useNavigation from 'components/hooks/useNavigation';
import ErrorMessage from 'components/common/ErrorMessage';
import LinkButton from 'components/common/LinkButton';
import ListTable from './ListTable';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import Icons from 'components/icons';
import useMessages from 'components/hooks/useMessages';
import useLocale from 'components/hooks/useLocale';
import styles from './MetricsTable.module.css';
export function MetricsTable({
websiteId,
type,
className,
dataFilter,
filterOptions,
limit,
onDataLoad,
delay = null,
...props
}) {
const [{ startDate, endDate, modified }] = useDateRange(websiteId);
const {
makeUrl,
query: { url, referrer, title, os, browser, device, country, region, city },
} = useNavigation();
const { formatMessage, labels } = useMessages();
const { get, useQuery } = useApi();
const { dir } = useLocale();
const { data, isLoading, isFetched, error } = useQuery({
queryKey: [
'websites:metrics',
{
websiteId,
type,
modified,
url,
referrer,
os,
title,
browser,
device,
country,
region,
city,
},
],
queryFn: () => {
const filters = { url, title, referrer, os, browser, device, country, region, city };
filters[type] = undefined;
onDataLoad?.();
return get(`/websites/${websiteId}/metrics`, {
type,
startAt: +startDate,
endAt: +endDate,
...filters,
});
},
retryDelay: delay || DEFAULT_ANIMATION_DURATION,
});
const filteredData = useMemo(() => {
if (data) {
let items = data;
if (dataFilter) {
if (Array.isArray(dataFilter)) {
items = dataFilter.reduce((arr, filter) => {
return filter(arr);
}, items);
} else {
items = dataFilter(data);
}
}
items = percentFilter(items);
if (limit) {
items = items.filter((e, i) => i < limit);
}
if (filterOptions?.sort === false) {
return items;
}
return items.sort(firstBy('y', -1).thenBy('x'));
}
return [];
}, [data, error, dataFilter, filterOptions, limit]);
return (
<div className={classNames(styles.container, className)}>
{!data && isLoading && !isFetched && <Loading icon="dots" />}
{error && <ErrorMessage />}
{data && !error && <ListTable {...props} data={filteredData} className={className} />}
<div className={styles.footer}>
{data && !error && limit && (
<LinkButton href={makeUrl({ view: type })} variant="quiet">
<Text>{formatMessage(labels.more)}</Text>
<Icon size="sm" rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight />
</Icon>
</LinkButton>
)}
</div>
</div>
);
}
export default MetricsTable;