watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-08 14:47:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Updated events page.

Browse source
This commit is contained in:
Mike Cao 2024-08-07 22:39:36 -07:00
parent 3a97bfe11c
commit c6b8114945
13 changed files with 122 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
View file

@ -5,7 +5,6 @@ import { ReactNode } from 'react';
export default function EventsDataTable({
websiteId,
children,
}: {
websiteId?: string;
teamId?: string;
@ -13,12 +12,8 @@ export default function EventsDataTable({
}) {
const queryResult = useWebsiteEvents(websiteId);
if (queryResult?.result?.data?.length === 0) {
return children;
}
return (
<DataTable queryResult={queryResult} allowSearch={false}>
<DataTable queryResult={queryResult} allowSearch={true}>
{({ data }) => <EventsTable data={data} />}
</DataTable>
);

42
src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx Normal file
View file

@ -0,0 +1,42 @@
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import { Flexbox } from 'react-basics';
import MetricsBar from 'components/metrics/MetricsBar';
import MetricCard from 'components/metrics/MetricCard';
import { useMessages } from 'components/hooks';
import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
import { formatLongNumber } from 'lib/format';
export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
return (
<Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
<MetricCard
value={data?.visitors?.value}
label={formatMessage(labels.visitors)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.visits?.value}
label={formatMessage(labels.visits)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.pageviews?.value}
label={formatMessage(labels.views)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.events?.value}
label={formatMessage(labels.events)}
formatValue={formatLongNumber}
/>
</MetricsBar>
<WebsiteDateFilter websiteId={websiteId} />
</Flexbox>
);
}
export default EventsMetricsBar;

21
src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
View file

@ -1,12 +1,31 @@
'use client';
import WebsiteHeader from '../WebsiteHeader';
import EventsDataTable from './EventsDataTable';
import EventsMetricsBar from './EventsMetricsBar';
import EventsChart from 'components/metrics/EventsChart';
import { GridRow } from 'components/layout/Grid';
import MetricsTable from 'components/metrics/MetricsTable';
import { useMessages } from 'components/hooks';
export default function EventsPage({ websiteId }) {
const { formatMessage, labels } = useMessages();
return (
<>
<WebsiteHeader websiteId={websiteId} />
<EventsDataTable websiteId={websiteId} />
<EventsMetricsBar websiteId={websiteId} />
<GridRow columns="two-one">
<EventsChart websiteId={websiteId} />
<MetricsTable
websiteId={websiteId}
type="event"
title={formatMessage(labels.events)}
metric={formatMessage(labels.actions)}
/>
</GridRow>
<GridRow columns="one">
<EventsDataTable websiteId={websiteId} />
</GridRow>
</>
);
}

52
src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
View file

@ -1,5 +1,6 @@
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import { Flexbox, Loading } from 'react-basics';
import { Flexbox } from 'react-basics';
import MetricsBar from 'components/metrics/MetricsBar';
import MetricCard from 'components/metrics/MetricCard';
import { useMessages } from 'components/hooks';
import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
@ -7,33 +8,32 @@ import { formatLongNumber } from 'lib/format';
export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading } = useWebsiteStats(websiteId);
const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
return (
<Flexbox direction="row" justifyContent="space-between" style={{ height: 120 }}>
<Flexbox direction="row">
{isLoading && <Loading icon="dots" />}
{!isLoading && data && (
<>
<MetricCard
value={data.visitors.value}
label={formatMessage(labels.visitors)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data.visits.value}
label={formatMessage(labels.visits)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data.pageviews.value}
label={formatMessage(labels.views)}
formatValue={formatLongNumber}
/>
<MetricCard value={data?.countries?.value} label={formatMessage(labels.countries)} />
</>
)}
</Flexbox>
<Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
<MetricCard
value={data?.visitors?.value}
label={formatMessage(labels.visitors)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.visits?.value}
label={formatMessage(labels.visits)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.pageviews?.value}
label={formatMessage(labels.views)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.countries?.value}
label={formatMessage(labels.countries)}
formatValue={formatLongNumber}
/>
</MetricsBar>
<WebsiteDateFilter websiteId={websiteId} />
</Flexbox>
);