umami/components/metrics/WebsiteChart.js

125 lines
3.6 KiB
JavaScript
Raw Normal View History

2020-08-31 23:11:30 +02:00
import React, { useMemo } from 'react';
2020-08-02 06:20:52 +02: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';
import DateFilter from 'components/common/DateFilter';
import StickyHeader from 'components/helpers/StickyHeader';
2022-01-14 09:04:07 +01:00
import ErrorMessage from 'components/common/ErrorMessage';
import FilterTags from 'components/metrics/FilterTags';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
2020-09-26 07:31:18 +02:00
import usePageQuery from 'hooks/usePageQuery';
2022-03-02 06:13:15 +01:00
import { getDateArray, getDateLength, getDateRangeValues } from 'lib/date';
import useApi from 'hooks/useApi';
2020-08-04 03:12:28 +02:00
import styles from './WebsiteChart.module.css';
2020-08-01 04:05:14 +02:00
export default function WebsiteChart({
websiteId,
2020-08-31 23:11:30 +02:00
title,
2020-10-21 15:44:43 +02:00
domain,
stickyHeader = false,
2020-08-31 23:11:30 +02:00
showLink = false,
2022-01-14 09:04:07 +01:00
showChart = true,
onDataLoad = () => {},
2020-08-01 04:05:14 +02:00
}) {
const [dateRange, setDateRange] = 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 {
router,
resolve,
2022-04-10 12:51:43 +02:00
query: { url, referrer, os, browser, device, country },
2020-09-26 07:31:18 +02:00
} = usePageQuery();
2022-03-02 06:13:15 +01:00
const { get } = useApi();
2020-08-31 23:11:30 +02:00
const { data, loading, error } = useFetch(
2022-02-23 08:52:31 +01:00
`/website/${websiteId}/pageviews`,
{
2020-10-09 21:39:03 +02:00
params: {
start_at: +startDate,
end_at: +endDate,
unit,
tz: timezone,
url,
referrer,
2022-04-10 12:51:43 +02:00
os,
browser,
device,
country,
2020-10-09 21:39:03 +02:00
},
onDataLoad,
},
2022-04-10 12:51:43 +02:00
[modified, url, referrer, os, browser, device, country],
);
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: [] };
}, [data, startDate, endDate, unit]);
2021-11-22 07:00:14 +01:00
function handleCloseFilter(param) {
router.push(resolve({ [param]: undefined }));
2020-09-26 07:31:18 +02:00
}
2022-01-14 09:04:07 +01:00
async function handleDateChange(value) {
if (value === 'all') {
2022-03-02 06:13:15 +01:00
const { data, ok } = await get(`/website/${websiteId}`);
2022-01-14 09:04:07 +01:00
if (ok) {
setDateRange({ value, ...getDateRangeValues(new Date(data.created_at), Date.now()) });
}
} else {
setDateRange(value);
2022-01-14 09:04:07 +01:00
}
}
return (
2020-09-27 09:51:29 +02:00
<div className={styles.container}>
2020-10-21 15:44:43 +02:00
<WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
2020-08-10 00:13:38 +02:00
<div className={classNames(styles.header, 'row')}>
<StickyHeader
className={classNames(styles.metrics, 'col row')}
stickyClassName={styles.sticky}
enabled={stickyHeader}
>
2022-04-10 12:51:43 +02:00
<FilterTags
params={{ url, referrer, os, browser, device, country }}
onClick={handleCloseFilter}
/>
<div className="col-12 col-lg-9">
2020-10-11 11:29:55 +02:00
<MetricsBar websiteId={websiteId} />
</div>
<div className={classNames(styles.filter, 'col-12 col-lg-3')}>
<DateFilter
value={value}
startDate={startDate}
endDate={endDate}
2022-01-14 09:04:07 +01:00
onChange={handleDateChange}
/>
</div>
2020-08-10 00:13:38 +02:00
</StickyHeader>
</div>
2020-08-02 06:20:52 +02:00
<div className="row">
2021-11-22 07:00:14 +01:00
<div className={classNames(styles.chart, 'col')}>
{error && <ErrorMessage />}
2022-01-14 09:04:07 +01:00
{showChart && (
<PageviewsChart
websiteId={websiteId}
data={chartData}
unit={unit}
records={getDateLength(startDate, endDate, unit)}
loading={loading}
/>
)}
</div>
2020-07-30 10:08:21 +02:00
</div>
2020-09-27 09:51:29 +02:00
</div>
);
}