umami/components/metrics/WebsiteChart.js

131 lines
4.0 KiB
JavaScript
Raw Normal View History

2022-12-10 23:26:52 +01:00
import { useMemo } from 'react';
import { Button, Icon, Text, Row, Column } from 'react-basics';
2023-02-02 03:39:54 +01:00
import Link from 'next/link';
2023-03-22 09:53:34 +01:00
import classNames from 'classnames';
import PageviewsChart from './PageviewsChart';
2020-07-31 05:11:43 +02:00
import MetricsBar from './MetricsBar';
import WebsiteHeader from './WebsiteHeader';
2023-02-15 11:27:18 +01:00
import DateFilter from 'components/input/DateFilter';
2022-01-14 09:04:07 +01:00
import ErrorMessage from 'components/common/ErrorMessage';
import FilterTags from 'components/metrics/FilterTags';
import RefreshButton from 'components/input/RefreshButton';
import useApi from 'hooks/useApi';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
2020-09-26 07:31:18 +02:00
import usePageQuery from 'hooks/usePageQuery';
import { getDateArray, getDateLength } from 'lib/date';
2023-02-02 03:39:54 +01:00
import Icons from 'components/icons';
2023-03-22 22:05:55 +01:00
import useSticky from 'hooks/useSticky';
import useMessages from 'hooks/useMessages';
2023-04-10 05:22:28 +02:00
import styles from './WebsiteChart.module.css';
import useLocale from 'hooks/useLocale';
2020-08-01 04:05:14 +02:00
export default function WebsiteChart({
websiteId,
2023-03-31 14:55:28 +02:00
name,
2020-10-21 15:44:43 +02:00
domain,
stickyHeader = false,
2022-01-14 09:04:07 +01:00
showChart = true,
2023-02-02 03:39:54 +01:00
showDetailsButton = false,
onDataLoad = () => {},
2020-08-01 04:05:14 +02:00
}) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
const [dateRange] = useDateRange(websiteId);
2020-09-01 00:02:32 +02:00
const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();
2020-09-26 07:31:18 +02:00
const {
2023-04-14 07:28:29 +02:00
query: { url, referrer, os, browser, device, country, region, city, title },
2020-09-26 07:31:18 +02:00
} = usePageQuery();
const { get, useQuery } = useApi();
2023-03-22 09:53:34 +01:00
const { ref, isSticky } = useSticky({ enabled: stickyHeader });
2020-08-31 23:11:30 +02:00
const { data, isLoading, error } = useQuery(
2023-04-14 07:28:29 +02:00
[
'websites:pageviews',
{ websiteId, modified, url, referrer, os, browser, device, country, region, city, title },
],
() =>
get(`/websites/${websiteId}/pageviews`, {
2022-12-27 02:36:48 +01:00
startAt: +startDate,
endAt: +endDate,
2020-10-09 21:39:03 +02:00
unit,
timezone,
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,
title,
}),
{ onSuccess: onDataLoad },
);
2020-07-30 10:08:21 +02:00
2020-10-09 08:26:05 +02:00
const chartData = useMemo(() => {
if (data) {
2020-10-09 08:26:05 +02:00
return {
pageviews: getDateArray(data.pageviews, startDate, endDate, unit),
sessions: getDateArray(data.sessions, startDate, endDate, unit),
};
}
2020-10-09 08:26:05 +02:00
return { pageviews: [], sessions: [] };
2023-04-04 02:26:37 +02:00
}, [data, modified]);
const { dir } = useLocale();
return (
2022-12-10 23:26:52 +01:00
<>
2023-03-31 14:55:28 +02:00
<WebsiteHeader websiteId={websiteId} name={name} domain={domain}>
2023-02-02 03:39:54 +01:00
{showDetailsButton && (
<Link href={`/websites/${websiteId}`}>
2023-03-24 00:33:10 +01:00
<Button variant="primary">
<Text>{formatMessage(labels.viewDetails)}</Text>
<Icon>
<Icon rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight />
</Icon>
</Icon>
</Button>
2023-02-02 03:39:54 +01:00
</Link>
)}
2023-02-10 12:26:57 +01:00
</WebsiteHeader>
2023-03-31 14:55:28 +02:00
<FilterTags
websiteId={websiteId}
2023-04-14 07:28:29 +02:00
params={{ url, referrer, os, browser, device, country, region, city, title }}
2023-03-31 14:55:28 +02:00
/>
2023-03-22 09:53:34 +01:00
<Row
ref={ref}
className={classNames(styles.header, {
[styles.sticky]: stickyHeader,
[styles.isSticky]: isSticky,
})}
>
2023-04-10 05:22:28 +02:00
<Column defaultSize={12} xl={8}>
2023-03-22 09:53:34 +01:00
<MetricsBar websiteId={websiteId} />
</Column>
2023-04-10 05:22:28 +02:00
<Column defaultSize={12} xl={4}>
<div className={styles.actions}>
<RefreshButton websiteId={websiteId} isLoading={isLoading} />
<DateFilter websiteId={websiteId} value={value} className={styles.dropdown} />
</div>
2023-03-22 09:53:34 +01:00
</Column>
</Row>
2022-12-10 23:26:52 +01:00
<Row>
<Column className={styles.chart}>
{error && <ErrorMessage />}
2022-01-14 09:04:07 +01:00
{showChart && (
<PageviewsChart
websiteId={websiteId}
data={chartData}
unit={unit}
records={getDateLength(startDate, endDate, unit)}
loading={isLoading}
/>
)}
2022-12-10 23:26:52 +01:00
</Column>
</Row>
</>
);
}