umami/components/pages/realtime/RealtimeDashboard.js

130 lines
4.4 KiB
JavaScript
Raw Normal View History

2023-02-18 06:42:42 +01:00
import { useState, useEffect, useMemo } from 'react';
import { subMinutes, startOfMinute } from 'date-fns';
import { useRouter } from 'next/router';
import firstBy from 'thenby';
import { GridRow, GridColumn } from 'components/layout/Grid';
2020-10-09 08:26:05 +02:00
import Page from 'components/layout/Page';
2020-10-11 10:33:26 +02:00
import RealtimeChart from 'components/metrics/RealtimeChart';
2023-02-15 11:27:18 +01:00
import PageHeader from 'components/layout/PageHeader';
2020-10-11 10:33:26 +02:00
import WorldMap from 'components/common/WorldMap';
2023-02-18 06:42:42 +01:00
import RealtimeLog from 'components/pages/realtime/RealtimeLog';
import RealtimeHeader from 'components/pages/realtime/RealtimeHeader';
2023-02-15 11:27:18 +01:00
import RealtimeUrls from 'components/pages/realtime/RealtimeUrls';
2023-02-18 06:42:42 +01:00
import RealtimeCountries from 'components/pages/realtime/RealtimeCountries';
import WebsiteSelect from 'components/input/WebsiteSelect';
import useApi from 'hooks/useApi';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
2020-10-11 10:33:26 +02:00
import { percentFilter } from 'lib/filters';
2023-02-15 11:27:18 +01:00
import { REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
2020-10-11 10:33:26 +02:00
import styles from './RealtimeDashboard.module.css';
2020-10-09 11:56:15 +02:00
2023-02-18 06:42:42 +01:00
function mergeData(state = [], data = [], time) {
const ids = state.map(({ __id }) => __id);
return state
.concat(data.filter(({ __id }) => !ids.includes(__id)))
2023-02-18 06:42:42 +01:00
.filter(({ timestamp }) => timestamp >= time);
2020-10-09 08:26:05 +02:00
}
2023-04-21 17:00:42 +02:00
export function RealtimeDashboard({ websiteId }) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
2023-02-15 11:27:18 +01:00
const router = useRouter();
const [currentData, setCurrentData] = useState();
const { get, useQuery } = useApi();
2023-02-24 11:41:02 +01:00
const { data: website } = useQuery(['websites', websiteId], () => get(`/websites/${websiteId}`));
2023-02-15 11:27:18 +01:00
const { data, isLoading, error } = useQuery(
['realtime', websiteId],
2023-02-18 06:42:42 +01:00
() => get(`/realtime/${websiteId}`, { startAt: currentData?.timestamp || 0 }),
{
2023-02-24 11:41:02 +01:00
enabled: !!(websiteId && website),
2023-02-18 06:42:42 +01:00
refetchInterval: REALTIME_INTERVAL,
cache: false,
},
);
2020-10-09 21:39:03 +02:00
2023-02-15 11:27:18 +01:00
useEffect(() => {
if (data) {
2023-02-18 06:42:42 +01:00
const date = subMinutes(startOfMinute(new Date()), REALTIME_RANGE);
const time = date.getTime();
2023-02-15 11:27:18 +01:00
setCurrentData(state => ({
2023-02-18 06:42:42 +01:00
pageviews: mergeData(state?.pageviews, data.pageviews, time),
sessions: mergeData(state?.sessions, data.sessions, time),
events: mergeData(state?.events, data.events, time),
timestamp: data.timestamp,
2023-02-15 11:27:18 +01:00
}));
2020-10-09 21:39:03 +02:00
}
2023-02-15 11:27:18 +01:00
}, [data]);
2023-02-15 11:27:18 +01:00
const realtimeData = useMemo(() => {
if (!currentData) {
2023-02-23 05:59:59 +01:00
return { pageviews: [], sessions: [], events: [], countries: [], visitors: [] };
}
2023-02-15 11:27:18 +01:00
currentData.countries = percentFilter(
currentData.sessions
2023-02-18 06:42:42 +01:00
.reduce((arr, data) => {
if (!arr.find(({ sessionId }) => sessionId === data.sessionId)) {
return arr.concat(data);
}
return arr;
}, [])
2023-02-15 11:27:18 +01:00
.reduce((arr, { country }) => {
if (country) {
const row = arr.find(({ x }) => x === country);
2023-02-15 11:27:18 +01:00
if (!row) {
arr.push({ x: country, y: 1 });
} else {
row.y += 1;
}
2023-02-15 11:27:18 +01:00
}
return arr;
}, [])
.sort(firstBy('y', -1)),
);
2023-02-23 05:59:59 +01:00
currentData.visitors = currentData.sessions.reduce((arr, val) => {
if (!arr.find(({ sessionId }) => sessionId === val.sessionId)) {
return arr.concat(val);
}
return arr;
}, []);
2023-02-15 11:27:18 +01:00
return currentData;
}, [currentData]);
2023-02-15 11:27:18 +01:00
const handleSelect = id => {
router.push(`/realtime/${id}`);
};
2020-10-09 08:26:05 +02:00
return (
2023-02-15 11:27:18 +01:00
<Page loading={isLoading} error={error}>
<PageHeader title={formatMessage(labels.realtime)}>
2023-02-15 11:27:18 +01:00
<WebsiteSelect websiteId={websiteId} onSelect={handleSelect} />
</PageHeader>
2023-03-22 09:53:34 +01:00
<RealtimeHeader websiteId={websiteId} data={currentData} />
2020-10-10 02:58:27 +02:00
<div className={styles.chart}>
<RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
2020-10-10 02:58:27 +02:00
</div>
<GridRow>
<GridColumn xs={12} sm={12} md={12} lg={4} xl={4}>
2023-02-24 11:41:02 +01:00
<RealtimeUrls websiteId={websiteId} websiteDomain={website?.domain} data={realtimeData} />
</GridColumn>
<GridColumn xs={12} sm={12} md={12} lg={8} xl={8}>
2023-02-24 11:41:02 +01:00
<RealtimeLog websiteId={websiteId} websiteDomain={website?.domain} data={realtimeData} />
</GridColumn>
</GridRow>
<GridRow>
<GridColumn xs={12} lg={4}>
2023-02-18 06:42:42 +01:00
<RealtimeCountries data={realtimeData?.countries} />
</GridColumn>
<GridColumn xs={12} lg={8}>
2023-02-15 11:27:18 +01:00
<WorldMap data={realtimeData?.countries} />
</GridColumn>
</GridRow>
</Page>
);
}
2023-04-21 17:00:42 +02:00
export default RealtimeDashboard;