watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 07:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Unified loading states.

Browse source
This commit is contained in:
Mike Cao 2025-06-13 21:13:11 -07:00
parent 7b5591a3ce
commit da8c7e99c5
52 changed files with 506 additions and 364 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
View file

@ -3,6 +3,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PageviewsChart } from '@/components/metrics/PageviewsChart';
import { useWebsitePageviewsQuery } from '@/components/hooks/queries/useWebsitePageviewsQuery';
import { useDateRange } from '@/components/hooks';
import { Panel } from '@/components/common/Panel';
export function WebsiteChart({
websiteId,
@ -13,10 +14,10 @@ export function WebsiteChart({
}) {
const { dateRange, dateCompare } = useDateRange(websiteId);
const { startDate, endDate, unit, value } = dateRange;
const { data, isLoading, error } = useWebsitePageviewsQuery(
const { data, isLoading, isFetching, error } = useWebsitePageviewsQuery({
websiteId,
compareMode ? dateCompare : undefined,
);
compareMode: compareMode ? dateCompare : undefined,
});
const { pageviews, sessions, compare } = (data || {}) as any;
const chartData = useMemo(() => {
@ -47,14 +48,16 @@ export function WebsiteChart({
}, [data, startDate, endDate, unit]);
return (
<LoadingPanel isLoading={isLoading} error={error}>
<PageviewsChart
key={value}
data={chartData}
minDate={value === 'all' ? undefined : startDate}
maxDate={endDate}
unit={unit}
/>
</LoadingPanel>
<Panel height="520px">
<LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
<PageviewsChart
key={value}
data={chartData}
minDate={value === 'all' ? undefined : startDate}
maxDate={endDate}
unit={unit}
/>
</LoadingPanel>
</Panel>
);
}

5
src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
View file

@ -1,6 +1,5 @@
'use client';
import { Column } from '@umami/react-zen';
import { Panel } from '@/components/common/Panel';
import { useNavigation } from '@/components/hooks';
import { WebsiteChart } from './WebsiteChart';
import { WebsiteExpandedView } from './WebsiteExpandedView';
@ -18,9 +17,7 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
<Column gap>
<WebsiteControls websiteId={websiteId} allowCompare={true} />
<WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
<Panel>
<WebsiteChart websiteId={websiteId} compareMode={compare} />
</Panel>
<WebsiteChart websiteId={websiteId} compareMode={compare} />
{!view && !compare && <WebsiteTableView websiteId={websiteId} />}
{view && !compare && <WebsiteExpandedView websiteId={websiteId} />}
{compare && <WebsiteCompareTables websiteId={websiteId} />}

75
src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
View file

@ -4,6 +4,7 @@ import { MetricsBar } from '@/components/metrics/MetricsBar';
import { formatShortTime, formatLongNumber } from '@/lib/format';
import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery';
import { useWebsites } from '@/store/websites';
import { LoadingPanel } from '@/components/common/LoadingPanel';
export function WebsiteMetricsBar({
websiteId,
@ -18,72 +19,80 @@ export function WebsiteMetricsBar({
const { dateRange } = useDateRange(websiteId);
const { formatMessage, labels } = useMessages();
const dateCompare = useWebsites(state => state[websiteId]?.dateCompare);
const { data, isLoading, isFetched, error } = useWebsiteStatsQuery(
const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(
websiteId,
compareMode && dateCompare,
);
const isAllTime = dateRange.value === 'all';
const { pageviews, visitors, visits, bounces, totaltime } = data || {};
const { pageviews, visitors, visits, bounces, totaltime, previous } = data || {};
const metrics = data
? [
{
...pageviews,
value: pageviews,
label: formatMessage(labels.views),
change: pageviews.value - pageviews.prev,
change: pageviews - previous.pageviews,
formatValue: formatLongNumber,
},
{
...visits,
value: visits,
label: formatMessage(labels.visits),
change: visits.value - visits.prev,
change: visits - previous.visits,
formatValue: formatLongNumber,
},
{
...visitors,
value: visitors,
label: formatMessage(labels.visitors),
change: visitors.value - visitors.prev,
change: visitors - previous.visitors,
formatValue: formatLongNumber,
},
{
label: formatMessage(labels.bounceRate),
value: (Math.min(visits.value, bounces.value) / visits.value) * 100,
prev: (Math.min(visits.prev, bounces.prev) / visits.prev) * 100,
value: (Math.min(visits, bounces) / visits) * 100,
prev: (Math.min(previous.visits, previous.bounces) / previous.visits) * 100,
change:
(Math.min(visits.value, bounces.value) / visits.value) * 100 -
(Math.min(visits.prev, bounces.prev) / visits.prev) * 100,
(Math.min(visits, bounces) / visits) * 100 -
(Math.min(previous.visits, previous.bounces) / previous.visits) * 100,
formatValue: n => Math.round(+n) + '%',
reverseColors: true,
},
{
label: formatMessage(labels.visitDuration),
value: totaltime.value / visits.value,
prev: totaltime.prev / visits.prev,
change: totaltime.value / visits.value - totaltime.prev / visits.prev,
value: totaltime / visits,
prev: previous.totaltime / previous.visits,
change: totaltime / visits - previous.totaltime / previous.visits,
formatValue: n =>
`${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`,
},
]
: [];
: null;
return (
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
{metrics.map(({ label, value, prev, change, formatValue, reverseColors }) => {
return (
<MetricCard
key={label}
value={value}
previousValue={prev}
label={label}
change={change}
formatValue={formatValue}
reverseColors={reverseColors}
showChange={!isAllTime && (compareMode || showChange)}
showPrevious={!isAllTime && compareMode}
/>
);
})}
</MetricsBar>
<LoadingPanel
data={metrics}
isLoading={isLoading}
isFetching={isFetching}
error={error}
minHeight="136px"
>
<MetricsBar>
{metrics?.map(({ label, value, prev, change, formatValue, reverseColors }) => {
return (
<MetricCard
key={label}
value={value}
previousValue={prev}
label={label}
change={change}
formatValue={formatValue}
reverseColors={reverseColors}
showChange={!isAllTime && (compareMode || showChange)}
showPrevious={!isAllTime && compareMode}
/>
);
})}
</MetricsBar>
</LoadingPanel>
);
}

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

@ -3,33 +3,36 @@ import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsi
import { MetricCard } from '@/components/metrics/MetricCard';
import { MetricsBar } from '@/components/metrics/MetricsBar';
import { formatLongNumber } from '@/lib/format';
import { LoadingPanel } from '@/components/common/LoadingPanel';
export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
const { data, isLoading, isFetching, error } = useWebsiteSessionStatsQuery(websiteId);
return (
<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>
<LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
<MetricsBar>
<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>
</LoadingPanel>
);
}

2
src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
View file

@ -8,7 +8,7 @@ export function RealtimeHeader({ data }: { data: RealtimeData }) {
const { totals }: any = data || {};
return (
<MetricsBar isFetched={true}>
<MetricsBar>
<MetricCard label={formatMessage(labels.views)} value={totals.views} />
<MetricCard label={formatMessage(labels.visitors)} value={totals.visitors} />
<MetricCard label={formatMessage(labels.events)} value={totals.events} />

5
src/app/(main)/websites/[websiteId]/reports/attribution/Attribution.tsx
View file

@ -40,7 +40,6 @@ export function Attribution({
step,
},
});
const isEmpty = !Object.keys(data || {}).length;
const { formatMessage, labels } = useMessages();
@ -83,9 +82,9 @@ export function Attribution({
}
return (
<LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Column gap>
<MetricsBar isFetched={data}>
<MetricsBar>
{metrics?.map(({ label, value, formatValue }) => {
return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
})}

2
src/app/(main)/websites/[websiteId]/reports/breakdown/Breakdown.tsx
View file

@ -30,7 +30,7 @@ export function Breakdown({ websiteId, parameters, startDate, endDate }: Breakdo
);
return (
<LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<DataTable data={data}>
{parameters?.fields.map(field => {
return (

2
src/app/(main)/websites/[websiteId]/reports/funnels/Funnel.tsx
View file

@ -29,7 +29,7 @@ export function Funnel({ id, name, type, parameters, websiteId, startDate, endDa
});
return (
<LoadingPanel isEmpty={!data} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Grid gap>
<Grid columns="1fr auto" gap>
<Column gap>

4
src/app/(main)/websites/[websiteId]/reports/funnels/FunnelsPage.tsx
View file

@ -9,7 +9,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Panel } from '@/components/common/Panel';
export function FunnelsPage({ websiteId }: { websiteId: string }) {
const { result } = useReportsQuery({ websiteId, type: 'funnel' });
const { result, query } = useReportsQuery({ websiteId, type: 'funnel' });
const {
dateRange: { startDate, endDate },
} = useDateRange(websiteId);
@ -20,7 +20,7 @@ export function FunnelsPage({ websiteId }: { websiteId: string }) {
<SectionHeader>
<FunnelAddButton websiteId={websiteId} />
</SectionHeader>
<LoadingPanel isEmpty={!result?.data?.length} isLoading={!result}>
<LoadingPanel data={result?.data} isLoading={query?.isLoading} error={query?.error}>
<Grid gap>
{result?.data?.map((report: any) => (
<Panel key={report.id}>

2
src/app/(main)/websites/[websiteId]/reports/goals/Goal.tsx
View file

@ -35,7 +35,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
const isPage = parameters?.type === 'page';
return (
<LoadingPanel isEmpty={!data} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Grid gap>
<Grid columns="1fr auto" gap>
<Column gap>

4
src/app/(main)/websites/[websiteId]/reports/goals/GoalsPage.tsx
View file

@ -9,7 +9,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Panel } from '@/components/common/Panel';
export function GoalsPage({ websiteId }: { websiteId: string }) {
const { result } = useReportsQuery({ websiteId, type: 'goal' });
const { result, query } = useReportsQuery({ websiteId, type: 'goal' });
const {
dateRange: { startDate, endDate },
} = useDateRange(websiteId);
@ -20,7 +20,7 @@ export function GoalsPage({ websiteId }: { websiteId: string }) {
<SectionHeader>
<GoalAddButton websiteId={websiteId} />
</SectionHeader>
<LoadingPanel isEmpty={!result?.data?.length} isLoading={!result}>
<LoadingPanel data={result.data} isLoading={query.isLoading} error={query.error}>
<Grid columns="1fr 1fr" gap>
{result?.data?.map((report: any) => (
<Panel key={report.id}>

2
src/app/(main)/websites/[websiteId]/reports/journeys/Journey.tsx
View file

@ -166,7 +166,7 @@ export function Journey({
};
return (
<LoadingPanel isEmpty={!data} isLoading={isLoading} error={error} height="100%">
<LoadingPanel data={data} isLoading={isLoading} error={error} height="100%">
<div className={styles.container}>
<div className={styles.view}>
{columns.map(({ visitorCount, nodes }, columnIndex) => {

17
src/app/(main)/websites/[websiteId]/reports/retention/Retention.tsx
View file

@ -1,6 +1,5 @@
import { ReactNode } from 'react';
import { Grid, Row, Column, Text, Loading, Icon } from '@umami/react-zen';
import { Empty } from '@/components/common/Empty';
import { Grid, Row, Column, Text, Icon } from '@umami/react-zen';
import { Users } from '@/components/icons';
import { useMessages, useLocale, useResultQuery } from '@/components/hooks';
import { formatDate } from '@/lib/date';
@ -28,14 +27,6 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent
},
});
if (isLoading) {
return <Loading position="page" />;
}
if (!data) {
return <Empty />;
}
const rows = data.reduce((arr: any[], row: { date: any; visitors: any; day: any }) => {
const { date, visitors, day } = row;
if (day === 0) {
@ -44,7 +35,9 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent
visitors,
records: days
.reduce((arr, day) => {
arr[day] = data.find(x => x.date === date && x.day === day);
arr[day] = data.find(
(x: { date: any; day: number }) => x.date === date && x.day === day,
);
return arr;
}, [])
.filter(n => n),
@ -56,7 +49,7 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent
const totalDays = rows.length;
return (
<LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Panel allowFullscreen height="900px">
<Column gap="1" width="100%" overflow="auto">
<Grid

10
src/app/(main)/websites/[websiteId]/reports/revenue/Revenue.tsx
View file

@ -40,7 +40,6 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
currency,
},
});
const isEmpty = !Object.keys(data || {})?.length;
const renderCountryName = useCallback(
({ x: code }) => (
@ -52,7 +51,7 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
[countryNames, locale],
);
const chartData = useMemo(() => {
const chartData: any = useMemo(() => {
if (!data) return [];
const map = (data.chart as any[]).reduce((obj, { x, t, y }) => {
@ -114,9 +113,9 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
<Grid columns="280px" gap>
<CurrencySelect value={currency} onChange={setCurrency} />
</Grid>
<LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Column gap>
<MetricsBar isFetched={!!data} isLoading={isLoading}>
<MetricsBar>
{metrics?.map(({ label, value, formatValue }) => {
return (
<MetricCard key={label} value={value} label={label} formatValue={formatValue} />
@ -125,13 +124,12 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
</MetricsBar>
<Panel>
<BarChart
data={chartData}
chartData={chartData}
minDate={startDate}
maxDate={endDate}
unit={unit}
stacked={true}
currency={currency}
isLoading={isLoading}
renderXLabel={renderDateLabels(unit, locale)}
/>
</Panel>

5
src/app/(main)/websites/[websiteId]/reports/utm/UTM.tsx
View file

@ -23,10 +23,9 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
endDate,
},
});
const isEmpty = !Object.keys(data || {})?.length;
return (
<LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Column gap>
{UTM_PARAMS.map(param => {
const items = toArray(data?.[param]);
@ -61,7 +60,7 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
/>
</Column>
<Column>
<PieChart type="doughnut" data={chartData} />
<PieChart type="doughnut" chartData={chartData} />
</Column>
</Grid>
</Panel>

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

@ -3,33 +3,36 @@ import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsi
import { MetricCard } from '@/components/metrics/MetricCard';
import { MetricsBar } from '@/components/metrics/MetricsBar';
import { formatLongNumber } from '@/lib/format';
import { LoadingPanel } from '@/components/common/LoadingPanel';
export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
const { data, isLoading, isFetching, error } = useWebsiteSessionStatsQuery(websiteId);
return (
<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>
<LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
<MetricsBar>
<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>
</LoadingPanel>
);
}

115
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
View file

@ -36,65 +36,70 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
: [];
return (
<LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Grid columns="repeat(8, 1fr)" gap>
<Grid rows="repeat(25, 20px)" gap="1">
<Row>&nbsp;</Row>
{Array(24)
.fill(null)
.map((_, i) => {
const label = format(addHours(startOfDay(new Date()), i), 'p', { locale: dateLocale })
.replace(/\D00 ?/, '')
.toLowerCase();
return (
<Row key={i} justifyContent="flex-end">
<Text color="muted" weight="bold">
{label}
</Text>
</Row>
);
})}
</Grid>
{data &&
daysOfWeek.map((index: number) => {
const day = data[index];
return (
<Grid
rows="repeat(25, 20px)"
justifyContent="center"
alignItems="center"
key={index}
gap="1"
>
<Row>
<Text weight="bold" align="center">
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
</Text>
</Row>
{day?.map((count: number, j) => {
const pct = count / max;
{data && (
<>
<Grid rows="repeat(25, 20px)" gap="1">
<Row>&nbsp;</Row>
{Array(24)
.fill(null)
.map((_, i) => {
const label = format(addHours(startOfDay(new Date()), i), 'p', {
locale: dateLocale,
})
.replace(/\D00 ?/, '')
.toLowerCase();
return (
<TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
<Focusable>
<Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
<Row
backgroundColor="primary"
width="20px"
height="20px"
borderRadius="full"
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
</Row>
</Focusable>
<Tooltip placement="right">{`${formatMessage(
labels.visitors,
)}: ${count}`}</Tooltip>
</TooltipTrigger>
<Row key={i} justifyContent="flex-end">
<Text color="muted" weight="bold">
{label}
</Text>
</Row>
);
})}
</Grid>
);
})}
</Grid>
{daysOfWeek.map((index: number) => {
const day = data[index];
return (
<Grid
rows="repeat(24, 20px)"
justifyContent="center"
alignItems="center"
key={index}
gap="1"
>
<Row marginBottom="3">
<Text weight="bold" align="center">
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
</Text>
</Row>
{day?.map((count: number, j) => {
const pct = count / max;
return (
<TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
<Focusable>
<Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
<Row
backgroundColor="primary"
width="20px"
height="20px"
borderRadius="full"
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
</Row>
</Focusable>
<Tooltip placement="right">{`${formatMessage(
labels.visitors,
)}: ${count}`}</Tooltip>
</TooltipTrigger>
);
})}
</Grid>
);
})}
</>
)}
</Grid>
</LoadingPanel>
);

45
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
View file

@ -1,8 +1,20 @@
import { isSameDay } from 'date-fns';
import { Icon, StatusLight, Column, Row, Heading, Text, Button } from '@umami/react-zen';
import {
Icon,
StatusLight,
Column,
Row,
Heading,
Text,
Button,
DialogTrigger,
Popover,
Dialog,
} from '@umami/react-zen';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Bolt, Eye, FileText } from '@/components/icons';
import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
import { EventData } from '@/components/metrics/EventData';
export function SessionActivity({
websiteId,
@ -25,7 +37,7 @@ export function SessionActivity({
let lastDay = null;
return (
<LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Column gap>
{data?.map(({ eventId, createdAt, urlPath, eventName, visitId, hasData }) => {
const showHeader = !lastDay || !isSameDay(new Date(lastDay), new Date(createdAt));
@ -41,15 +53,7 @@ export function SessionActivity({
<Row alignItems="center" gap>
<Icon>{eventName ? <Bolt /> : <Eye />}</Icon>
<Text>{eventName || urlPath}</Text>
{hasData > 0 && (
<Button variant="quiet">
<Row alignItems="center" gap>
<Icon>
<FileText />
</Icon>
</Row>
</Button>
)}
{hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
</Row>
</Row>
</Column>
@ -59,3 +63,22 @@ export function SessionActivity({
</LoadingPanel>
);
}
const PropertiesButton = props => {
return (
<DialogTrigger>
<Button variant="quiet">
<Row alignItems="center" gap>
<Icon>
<FileText />
</Icon>
</Row>
</Button>
<Popover placement="right">
<Dialog>
<EventData {...props} />
</Dialog>
</Popover>
</DialogTrigger>
);
};

3
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
View file

@ -6,10 +6,9 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
const { data, isLoading, error } = useSessionDataQuery(websiteId, sessionId);
const isEmpty = !data?.length;
return (
<LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
{!data?.length && <Empty />}
<Column gap="6">
{data?.map(({ dataKey, dataType, stringValue }) => {

3
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
View file

@ -20,7 +20,7 @@ export function SessionDetailsPage({
const { formatMessage, labels } = useMessages();
return (
<LoadingPanel isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Grid columns="260px 1fr" gap>
<Column gap="6">
<Row justifyContent="center">
@ -28,7 +28,6 @@ export function SessionDetailsPage({
</Row>
<SessionInfo data={data} />
</Column>
<Column gap>
<SessionStats data={data} />
<Panel>

2
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
View file

@ -7,7 +7,7 @@ export function SessionStats({ data }) {
const { formatMessage, labels } = useMessages();
return (
<MetricsBar isFetched={true}>
<MetricsBar>
<MetricCard label={formatMessage(labels.visits)} value={data?.visits} />
<MetricCard label={formatMessage(labels.views)} value={data?.views} />
<MetricCard label={formatMessage(labels.events)} value={data?.events} />

1
src/app/Providers.tsx
View file

@ -13,6 +13,7 @@ const client = new QueryClient({
queries: {
retry: false,
refetchOnWindowFocus: false,
staleTime: 1000 * 60,
},
},
});

25
src/app/api/websites/[websiteId]/event-data/[eventId]/route.ts Normal file
View file

@ -0,0 +1,25 @@
import { parseRequest } from '@/lib/request';
import { unauthorized, json } from '@/lib/response';
import { canViewWebsite } from '@/lib/auth';
import { getEventData } from '@/queries/sql/events/getEventData';
export async function GET(
request: Request,
{ params }: { params: Promise<{ websiteId: string; eventId: string }> },
) {
const { auth, error } = await parseRequest(request);
if (error) {
return error();
}
const { websiteId, eventId } = await params;
if (!(await canViewWebsite(auth, websiteId))) {
return unauthorized();
}
const data = await getEventData(eventId);
return json(data);
}

12
src/app/api/websites/[websiteId]/stats/route.ts
View file

@ -45,19 +45,11 @@ export async function GET(
endDate,
});
const prevPeriod = await getWebsiteStats(websiteId, {
const previous = await getWebsiteStats(websiteId, {
...filters,
startDate: compareStartDate,
endDate: compareEndDate,
});
const stats = Object.keys(metrics[0]).reduce((obj, key) => {
obj[key] = {
value: Number(metrics[0][key]) || 0,
prev: Number(prevPeriod[0][key]) || 0,
};
return obj;
}, {});
return json(stats);
return json({ ...metrics, previous });
}

2
src/app/sso/SSOPage.tsx
View file

@ -18,5 +18,5 @@ export function SSOPage() {
}
}, [router, url, token]);
return <Loading />;
return <Loading position="page" />;
}