umami/components/metrics/MetricsBar.js

117 lines
3.7 KiB
JavaScript
Raw Normal View History

import { useState } from 'react';
import { Loading } from 'react-basics';
import ErrorMessage from 'components/common/ErrorMessage';
import useApi from 'hooks/useApi';
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 { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
2020-09-06 02:27:01 +02:00
import MetricCard from './MetricCard';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
2023-04-10 05:22:28 +02:00
import styles from './MetricsBar.module.css';
2023-04-21 17:00:42 +02:00
export function MetricsBar({ websiteId }) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
const { get, useQuery } = useApi();
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 {
2023-04-26 08:25:51 +02:00
query: { url, referrer, title, os, browser, device, country, region, city },
2020-09-26 07:31:18 +02:00
} = usePageQuery();
2023-02-04 17:59:52 +01:00
const { data, error, isLoading, isFetched } = useQuery(
2023-04-17 09:10:51 +02:00
[
'websites:stats',
2023-04-26 08:25:51 +02:00
{ websiteId, modified, url, referrer, title, os, browser, device, country, region, city },
2023-04-17 09:10:51 +02:00
],
() =>
get(`/websites/${websiteId}/stats`, {
2022-12-27 02:36:48 +01:00
startAt: +startDate,
endAt: +endDate,
2020-10-09 21:39:03 +02:00
url,
2022-04-07 11:46:39 +02:00
referrer,
2023-04-26 08:25:51 +02:00
title,
2022-04-10 12:51:43 +02:00
os,
browser,
device,
country,
2023-04-17 09:10:51 +02:00
region,
city,
}),
2020-08-31 23:11:30 +02:00
);
2020-07-29 09:16:02 +02:00
const formatFunc = format
? n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`)
: formatNumber;
2020-08-19 23:35:38 +02:00
function handleSetFormat() {
setFormat(state => !state);
}
const { pageviews, uniques, bounces, totaltime } = data || {};
const num = Math.min(data && uniques.value, data && bounces.value);
const diffs = data && {
pageviews: pageviews.value - pageviews.change,
uniques: uniques.value - uniques.change,
bounces: bounces.value - bounces.change,
totaltime: totaltime.value - totaltime.change,
};
return (
<div className={styles.bar} onClick={handleSetFormat}>
2023-02-04 17:59:52 +01:00
{isLoading && !isFetched && <Loading icon="dots" />}
{error && <ErrorMessage />}
2023-02-04 17:59:52 +01:00
{data && !error && isFetched && (
<>
<MetricCard
2023-04-10 05:22:28 +02:00
className={styles.card}
label={formatMessage(labels.views)}
value={pageviews.value}
change={pageviews.change}
2020-09-06 02:27:01 +02:00
format={formatFunc}
/>
<MetricCard
2023-04-10 05:22:28 +02:00
className={styles.card}
label={formatMessage(labels.visitors)}
value={uniques.value}
change={uniques.change}
2020-09-06 02:27:01 +02:00
format={formatFunc}
/>
<MetricCard
2023-04-10 05:22:28 +02:00
className={styles.card}
label={formatMessage(labels.bounceRate)}
value={uniques.value ? (num / uniques.value) * 100 : 0}
change={
uniques.value && uniques.change
? (num / uniques.value) * 100 -
(Math.min(diffs.uniques, diffs.bounces) / diffs.uniques) * 100 || 0
: 0
}
format={n => Number(n).toFixed(0) + '%'}
reverseColors
/>
<MetricCard
2023-04-10 05:22:28 +02:00
className={styles.card}
label={formatMessage(labels.averageVisitTime)}
value={
totaltime.value && pageviews.value
? totaltime.value / (pageviews.value - bounces.value)
: 0
}
change={
totaltime.value && pageviews.value
? (diffs.totaltime / (diffs.pageviews - diffs.bounces) -
totaltime.value / (pageviews.value - bounces.value)) *
-1 || 0
: 0
}
format={n => `${n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`}
/>
</>
)}
</div>
);
}
2023-04-21 17:00:42 +02:00
export default MetricsBar;