Fixed issue with realtime page rendering.

This commit is contained in:
Mike Cao 2022-10-25 09:24:20 -07:00
parent 2290be7ca4
commit 994cf950c8
4 changed files with 28 additions and 29 deletions

View File

@ -9,11 +9,14 @@ import styles from './RealtimeHeader.module.css';
export default function RealtimeHeader({ websites, data, websiteId, onSelect }) { export default function RealtimeHeader({ websites, data, websiteId, onSelect }) {
const options = [ const options = [
{ label: <FormattedMessage id="label.all-websites" defaultMessage="All websites" />, value: 0 }, {
label: <FormattedMessage id="label.all-websites" defaultMessage="All websites" />,
value: null,
},
].concat( ].concat(
websites.map(({ name, id }, index) => ({ websites.map(({ name, websiteUuid }, index) => ({
label: name, label: name,
value: id, value: websiteUuid,
divider: index === 0, divider: index === 0,
})), })),
); );

View File

@ -32,7 +32,7 @@ export default function RealtimeDashboard() {
const { locale } = useLocale(); const { locale } = useLocale();
const countryNames = useCountryNames(locale); const countryNames = useCountryNames(locale);
const [data, setData] = useState(); const [data, setData] = useState();
const [websiteId, setWebsiteId] = useState(0); const [websiteUuid, setWebsiteUuid] = useState(null);
const { data: init, loading } = useFetch('/realtime/init'); const { data: init, loading } = useFetch('/realtime/init');
const { data: updates } = useFetch('/realtime/update', { const { data: updates } = useFetch('/realtime/update', {
params: { start_at: data?.timestamp }, params: { start_at: data?.timestamp },
@ -50,17 +50,18 @@ export default function RealtimeDashboard() {
if (data) { if (data) {
const { pageviews, sessions, events } = data; const { pageviews, sessions, events } = data;
if (websiteId) { if (websiteUuid) {
const { id } = init.websites.find(n => n.websiteUuid === websiteUuid);
return { return {
pageviews: filterWebsite(pageviews, websiteId), pageviews: filterWebsite(pageviews, id),
sessions: filterWebsite(sessions, websiteId), sessions: filterWebsite(sessions, id),
events: filterWebsite(events, websiteId), events: filterWebsite(events, id),
}; };
} }
} }
return data; return data;
}, [data, websiteId]); }, [data, websiteUuid]);
const countries = useMemo(() => { const countries = useMemo(() => {
if (realtimeData?.sessions) { if (realtimeData?.sessions) {
@ -117,25 +118,20 @@ export default function RealtimeDashboard() {
<Page> <Page>
<RealtimeHeader <RealtimeHeader
websites={websites} websites={websites}
websiteId={websiteId} websiteId={websiteUuid}
data={{ ...realtimeData, countries }} data={{ ...realtimeData, countries }}
onSelect={setWebsiteId} onSelect={setWebsiteUuid}
/> />
<div className={styles.chart}> <div className={styles.chart}>
<RealtimeChart <RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
websiteId={websiteId}
data={realtimeData}
unit="minute"
records={REALTIME_RANGE}
/>
</div> </div>
<GridLayout> <GridLayout>
<GridRow> <GridRow>
<GridColumn xs={12} lg={4}> <GridColumn xs={12} lg={4}>
<RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} /> <RealtimeViews websiteId={websiteUuid} data={realtimeData} websites={websites} />
</GridColumn> </GridColumn>
<GridColumn xs={12} lg={8}> <GridColumn xs={12} lg={8}>
<RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} /> <RealtimeLog websiteId={websiteUuid} data={realtimeData} websites={websites} />
</GridColumn> </GridColumn>
</GridRow> </GridRow>
<GridRow> <GridRow>

View File

@ -1,6 +1,6 @@
{ {
"name": "umami", "name": "umami",
"version": "1.39.1", "version": "1.39.2",
"description": "A simple, fast, privacy-focused alternative to Google Analytics.", "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
"author": "Mike Cao <mike@mikecao.com>", "author": "Mike Cao <mike@mikecao.com>",
"license": "MIT", "license": "MIT",

View File

@ -10,19 +10,19 @@ export async function getRealtimeData(websites, time) {
]); ]);
return { return {
pageviews: pageviews.map(({ pageviewId, ...props }) => ({ pageviews: pageviews.map(({ id, ...props }) => ({
__id: `p${pageviewId}`, __id: `p${id}`,
pageviewId, pageviewId: id,
...props, ...props,
})), })),
sessions: sessions.map(({ sessionId, ...props }) => ({ sessions: sessions.map(({ id, ...props }) => ({
__id: `s${sessionId}`, __id: `s${id}`,
sessionId, sessionId: id,
...props, ...props,
})), })),
events: events.map(({ eventId, ...props }) => ({ events: events.map(({ id, ...props }) => ({
__id: `e${eventId}`, __id: `e${id}`,
eventId, eventId: id,
...props, ...props,
})), })),
timestamp: Date.now(), timestamp: Date.now(),