umami/components/metrics/MetricsBar.js

81 lines
2.6 KiB
JavaScript
Raw Normal View History

import React, { useState } from 'react';
2020-09-06 02:27:01 +02:00
import { FormattedMessage } from 'react-intl';
2020-08-02 06:20:52 +02:00
import classNames from 'classnames';
import Loading from 'components/common/Loading';
import ErrorMessage from 'components/common/ErrorMessage';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
2020-09-26 07:31:18 +02:00
import usePageQuery from 'hooks/usePageQuery';
2020-10-11 11:29:55 +02:00
import useShareToken from 'hooks/useShareToken';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import { TOKEN_HEADER } from 'lib/constants';
2020-09-06 02:27:01 +02:00
import MetricCard from './MetricCard';
2020-07-31 05:11:43 +02:00
import styles from './MetricsBar.module.css';
2020-10-11 11:29:55 +02:00
export default function MetricsBar({ websiteId, className }) {
const shareToken = useShareToken();
const [dateRange] = useDateRange(websiteId);
2020-09-01 00:02:32 +02:00
const { startDate, endDate, modified } = dateRange;
2020-09-26 07:31:18 +02:00
const [format, setFormat] = useState(true);
const {
query: { url },
} = usePageQuery();
const { data, error, loading } = useFetch(
`/api/website/${websiteId}/stats`,
2020-08-31 23:11:30 +02:00
{
2020-10-09 21:39:03 +02:00
params: {
start_at: +startDate,
end_at: +endDate,
url,
},
2020-10-11 11:29:55 +02:00
headers: { [TOKEN_HEADER]: shareToken?.token },
2020-08-31 23:11:30 +02:00
},
2020-10-15 07:09:00 +02:00
[url, modified],
2020-08-31 23:11:30 +02:00
);
2020-07-29 09:16:02 +02:00
2020-08-19 23:35:38 +02:00
const formatFunc = format ? formatLongNumber : formatNumber;
function handleSetFormat() {
setFormat(state => !state);
}
const { pageviews, uniques, bounces, totaltime } = data || {};
return (
2020-08-19 23:35:38 +02:00
<div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
{!data && loading && <Loading />}
{error && <ErrorMessage />}
{data && !error && (
<>
<MetricCard
2020-09-06 02:27:01 +02:00
label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
value={pageviews}
format={formatFunc}
/>
<MetricCard
label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
value={uniques}
format={formatFunc}
/>
<MetricCard
label={<FormattedMessage id="metrics.bounce-rate" defaultMessage="Bounce rate" />}
value={pageviews ? (bounces / pageviews) * 100 : 0}
format={n => Number(n).toFixed(0) + '%'}
/>
<MetricCard
2020-09-06 02:27:01 +02:00
label={
<FormattedMessage
id="metrics.average-visit-time"
defaultMessage="Average visit time"
/>
}
value={totaltime && pageviews ? totaltime / (pageviews - bounces) : 0}
format={n => formatShortTime(n, ['m', 's'], ' ')}
/>
</>
)}
</div>
);
}