umami/components/pages/RealtimeDashboard.js

158 lines
4.8 KiB
JavaScript
Raw Normal View History

import React, { useState, useEffect, useMemo, useCallback } from 'react';
2020-10-11 10:33:26 +02:00
import { FormattedMessage } from 'react-intl';
2020-10-09 11:56:15 +02:00
import { subMinutes, startOfMinute } from 'date-fns';
import firstBy from 'thenby';
2020-10-09 08:26:05 +02:00
import Page from 'components/layout/Page';
2020-10-10 05:37:24 +02:00
import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
2020-10-11 10:33:26 +02:00
import RealtimeChart from 'components/metrics/RealtimeChart';
import RealtimeLog from 'components/metrics/RealtimeLog';
import RealtimeHeader from 'components/metrics/RealtimeHeader';
import WorldMap from 'components/common/WorldMap';
import DataTable from 'components/metrics/DataTable';
2020-10-13 01:31:51 +02:00
import RealtimeViews from 'components/metrics/RealtimeViews';
2020-10-10 05:37:24 +02:00
import useFetch from 'hooks/useFetch';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
2020-10-11 10:33:26 +02:00
import { percentFilter } from 'lib/filters';
import { SHARE_TOKEN_HEADER, 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
function mergeData(state, data, time) {
const ids = state.map(({ __id }) => __id);
return state
.concat(data.filter(({ __id }) => !ids.includes(__id)))
.filter(({ created_at }) => new Date(created_at).getTime() >= time);
2020-10-09 08:26:05 +02:00
}
2020-10-09 21:39:03 +02:00
function filterWebsite(data, id) {
return data.filter(({ website_id }) => website_id === id);
}
2020-10-09 08:26:05 +02:00
export default function RealtimeDashboard() {
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
2020-10-09 08:26:05 +02:00
const [data, setData] = useState();
2020-10-10 02:58:27 +02:00
const [websiteId, setWebsiteId] = useState(0);
2022-02-23 08:52:31 +01:00
const { data: init, loading } = useFetch('/realtime/init');
const { data: updates } = useFetch('/realtime/update', {
params: { start_at: data?.timestamp },
2020-10-10 02:58:27 +02:00
disabled: !init?.websites?.length || !data,
2020-10-09 21:39:03 +02:00
interval: REALTIME_INTERVAL,
headers: { [SHARE_TOKEN_HEADER]: init?.token },
2020-10-09 21:39:03 +02:00
});
2020-10-13 01:31:51 +02:00
const renderCountryName = useCallback(
({ x }) => <span className={locale}>{countryNames[x]}</span>,
[countryNames],
);
2020-10-09 21:39:03 +02:00
const realtimeData = useMemo(() => {
if (data) {
const { pageviews, sessions, events } = data;
if (websiteId) {
return {
pageviews: filterWebsite(pageviews, websiteId),
sessions: filterWebsite(sessions, websiteId),
events: filterWebsite(events, websiteId),
};
}
2020-10-09 21:39:03 +02:00
}
2020-10-09 21:39:03 +02:00
return data;
2020-10-10 02:58:27 +02:00
}, [data, websiteId]);
2020-10-09 08:26:05 +02:00
const countries = useMemo(() => {
if (realtimeData?.sessions) {
return percentFilter(
realtimeData.sessions
.reduce((arr, { country }) => {
if (country) {
const row = arr.find(({ x }) => x === country);
if (!row) {
arr.push({ x: country, y: 1 });
} else {
row.y += 1;
}
}
return arr;
}, [])
.sort(firstBy('y', -1)),
);
}
return [];
2020-10-11 07:36:55 +02:00
}, [realtimeData?.sessions]);
2020-10-09 08:26:05 +02:00
useEffect(() => {
if (init && !data) {
const { websites, data } = init;
2020-10-13 01:31:51 +02:00
setData({ websites, ...data });
2020-10-11 07:36:55 +02:00
}
}, [init]);
useEffect(() => {
if (updates) {
const { pageviews, sessions, events, timestamp } = updates;
const time = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime();
2020-10-09 08:26:05 +02:00
setData(state => ({
...state,
pageviews: mergeData(state.pageviews, pageviews, time),
sessions: mergeData(state.sessions, sessions, time),
events: mergeData(state.events, events, time),
timestamp,
2020-10-09 08:26:05 +02:00
}));
}
2020-10-11 07:36:55 +02:00
}, [updates]);
2020-10-09 08:26:05 +02:00
2020-10-11 07:36:55 +02:00
if (!init || !data || loading) {
return null;
}
const { websites } = data;
return (
<Page>
2020-10-10 02:58:27 +02:00
<RealtimeHeader
websites={websites}
websiteId={websiteId}
data={{ ...realtimeData, countries }}
2020-10-10 02:58:27 +02:00
onSelect={setWebsiteId}
2020-10-09 21:39:03 +02:00
/>
2020-10-10 02:58:27 +02:00
<div className={styles.chart}>
<RealtimeChart
websiteId={websiteId}
data={realtimeData}
unit="minute"
records={REALTIME_RANGE}
/>
</div>
2020-10-10 05:37:24 +02:00
<GridLayout>
<GridRow>
<GridColumn xs={12} lg={4}>
2020-10-13 01:31:51 +02:00
<RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
2020-10-10 05:37:24 +02:00
</GridColumn>
2020-10-10 10:16:28 +02:00
<GridColumn xs={12} lg={8}>
2020-11-07 02:43:04 +01:00
<RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} />
2020-10-10 10:16:28 +02:00
</GridColumn>
2020-10-10 05:37:24 +02:00
</GridRow>
<GridRow>
<GridColumn xs={12} lg={4}>
<DataTable
title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
data={countries}
renderLabel={renderCountryName}
/>
2020-10-10 05:37:24 +02:00
</GridColumn>
<GridColumn xs={12} lg={8}>
<WorldMap data={countries} />
2020-10-10 05:37:24 +02:00
</GridColumn>
</GridRow>
</GridLayout>
</Page>
);
}