umami/components/metrics/WebsiteChart.js

119 lines
3.4 KiB
JavaScript

import React, { useMemo } from 'react';
import classNames from 'classnames';
import PageviewsChart from './PageviewsChart';
import MetricsBar from './MetricsBar';
import WebsiteHeader from './WebsiteHeader';
import DateFilter from 'components/common/DateFilter';
import StickyHeader from 'components/helpers/StickyHeader';
import Button from 'components/common/Button';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
import usePageQuery from 'hooks/usePageQuery';
import { getDateArray, getDateLength } from 'lib/date';
import Times from 'assets/times.svg';
import styles from './WebsiteChart.module.css';
import ErrorMessage from '../common/ErrorMessage';
import useShareToken from '../../hooks/useShareToken';
import { TOKEN_HEADER } from '../../lib/constants';
export default function WebsiteChart({
websiteId,
title,
domain,
stickyHeader = false,
showLink = false,
hideChart = false,
onDataLoad = () => {},
}) {
const shareToken = useShareToken();
const [dateRange, setDateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();
const {
router,
resolve,
query: { url },
} = usePageQuery();
const { data, loading, error } = useFetch(
`/api/website/${websiteId}/pageviews`,
{
params: {
start_at: +startDate,
end_at: +endDate,
unit,
tz: timezone,
url,
},
onDataLoad,
headers: { [TOKEN_HEADER]: shareToken?.token },
},
[url, modified],
);
const chartData = useMemo(() => {
if (data) {
return {
pageviews: getDateArray(data.pageviews, startDate, endDate, unit),
sessions: getDateArray(data.sessions, startDate, endDate, unit),
};
}
return { pageviews: [], sessions: [] };
}, [data]);
function handleCloseFilter() {
router.push(resolve({ url: undefined }));
}
return (
<div className={styles.container}>
<WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
<div className={classNames(styles.header, 'row')}>
<StickyHeader
className={classNames(styles.metrics, 'col row')}
stickyClassName={styles.sticky}
enabled={stickyHeader}
>
{url && <PageFilter url={url} onClick={handleCloseFilter} />}
<div className="col-12 col-lg-9">
<MetricsBar websiteId={websiteId} />
</div>
<div className={classNames(styles.filter, 'col-12 col-lg-3')}>
<DateFilter
value={value}
startDate={startDate}
endDate={endDate}
onChange={setDateRange}
/>
</div>
</StickyHeader>
</div>
<div className="row">
<div className="col">
{error && <ErrorMessage />}
{!hideChart && (
<PageviewsChart
websiteId={websiteId}
data={chartData}
unit={unit}
records={getDateLength(startDate, endDate, unit)}
loading={loading}
/>
)}
</div>
</div>
</div>
);
}
const PageFilter = ({ url, onClick }) => {
return (
<div className={classNames(styles.url, 'col-12')}>
<Button icon={<Times />} onClick={onClick} variant="action" iconRight>
{url}
</Button>
</div>
);
};