umami/components/metrics/WebsiteChart.js

84 lines
2.4 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';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
import { getDateArray, getDateLength } from 'lib/date';
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,
token,
2020-08-31 23:11:30 +02:00
title,
stickyHeader = false,
2020-08-31 23:11:30 +02:00
showLink = false,
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-08-31 23:11:30 +02:00
const { data, loading } = useFetch(
`/api/website/${websiteId}/pageviews`,
{
start_at: +startDate,
end_at: +endDate,
unit,
tz: timezone,
token,
},
2020-08-31 23:11:30 +02:00
{ onDataLoad, update: [modified] },
);
2020-07-30 10:08:21 +02:00
const [pageviews, uniques] = useMemo(() => {
if (data) {
return [
getDateArray(data.pageviews, startDate, endDate, unit),
getDateArray(data.uniques, startDate, endDate, unit),
];
}
return [[], []];
}, [data]);
return (
2020-08-06 04:04:02 +02:00
<>
<WebsiteHeader websiteId={websiteId} token={token} title={title} 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}
>
<div className="col-12 col-lg-9">
<MetricsBar websiteId={websiteId} token={token} />
</div>
<div className={classNames(styles.filter, 'col-12 col-lg-3')}>
<DateFilter
value={value}
startDate={startDate}
endDate={endDate}
onChange={setDateRange}
/>
</div>
2020-08-10 00:13:38 +02:00
</StickyHeader>
</div>
2020-08-02 06:20:52 +02:00
<div className="row">
<div className="col">
2020-08-31 23:11:30 +02:00
<PageviewsChart
websiteId={websiteId}
data={{ pageviews, uniques }}
unit={unit}
records={getDateLength(startDate, endDate, unit)}
loading={loading}
2020-08-31 23:11:30 +02:00
/>
</div>
2020-07-30 10:08:21 +02:00
</div>
2020-08-06 04:04:02 +02:00
</>
);
}