watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 12:47:13 +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" />;
}

16
src/components/common/DataGrid.tsx
View file

@ -1,7 +1,6 @@
import { ReactNode } from 'react';
import { Loading, SearchField, Row, Column } from '@umami/react-zen';
import { SearchField, Row, Column } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { Pager } from '@/components/common/Pager';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PagedQueryResult } from '@/lib/types';
@ -24,16 +23,14 @@ export function DataGrid({
allowSearch = true,
allowPaging = true,
autoFocus,
renderEmpty,
children,
}: DataTableProps) {
const { formatMessage, labels, messages } = useMessages();
const { formatMessage, labels } = useMessages();
const { result, params, setParams, query } = queryResult || {};
const { error, isLoading, isFetched } = query || {};
const { error, isLoading, isFetching } = query || {};
const { page, pageSize, count, data } = result || {};
const { search } = params || {};
const hasData = Boolean(!isLoading && data?.length);
const noResults = Boolean(search && !hasData);
const { router, renderUrl } = useNavigation();
const handleSearch = (search: string) => {
@ -46,7 +43,7 @@ export function DataGrid({
};
return (
<Column gap="4">
<Column gap="4" minHeight="300px">
{allowSearch && (hasData || search) && (
<Row width="280px" alignItems="center">
<SearchField
@ -58,12 +55,9 @@ export function DataGrid({
/>
</Row>
)}
<LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
<LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
<Column>
{hasData ? (typeof children === 'function' ? children(result) : children) : null}
{isLoading && <Loading position="page" />}
{!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
{!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
</Column>
{allowPaging && hasData && (
<Row marginTop="6">

57
src/components/common/LoadingPanel.tsx
View file

@ -1,32 +1,59 @@
import { ReactNode } from 'react';
import { Spinner, Dots, Column, type ColumnProps } from '@umami/react-zen';
import { Loading, Column, type ColumnProps } from '@umami/react-zen';
import { ErrorMessage } from '@/components/common/ErrorMessage';
import { Empty } from '@/components/common/Empty';
export interface LoadingPanelProps extends ColumnProps {
data?: any;
error?: Error;
isEmpty?: boolean;
isLoading?: boolean;
isFetching?: boolean;
loadingIcon?: 'dots' | 'spinner';
renderEmpty?: () => ReactNode;
children: ReactNode;
}
export function LoadingPanel({
data,
error,
isEmpty,
isFetched,
isLoading,
isFetching,
loadingIcon = 'dots',
renderEmpty = () => <Empty />,
children,
...props
}: {
error?: Error;
isEmpty?: boolean;
isFetched?: boolean;
isLoading?: boolean;
loadingIcon?: 'dots' | 'spinner';
renderEmpty?: () => ReactNode;
children: ReactNode;
} & ColumnProps) {
}: LoadingPanelProps) {
const empty = isEmpty ?? checkEmpty(data);
return (
<Column {...props}>
{isLoading && !isFetched && (loadingIcon === 'dots' ? <Dots /> : <Spinner />)}
<Column position="relative" flexGrow={1} {...props}>
{/* Show loading spinner only if no data exists */}
{(isLoading || isFetching) && !data && <Loading icon={loadingIcon} position="page" />}
{/* Show error */}
{error && <ErrorMessage />}
{!error && !isLoading && isEmpty && renderEmpty()}
{!error && !isLoading && !isEmpty && children}
{/* Show empty state (once loaded) */}
{!error && !isLoading && !isFetching && empty && renderEmpty()}
{/* Show main content when data exists */}
{!error && !empty && children}
</Column>
);
}
function checkEmpty(data: any) {
if (!data) return false;
if (Array.isArray(data)) {
return data.length <= 0;
}
if (typeof data === 'object') {
return Object.keys(data).length <= 0;
}
return !!data;
}

2
src/components/hooks/index.ts
View file

@ -1,5 +1,6 @@
'use client';
export * from './queries/useActiveUsersQuery';
export * from './queries/useEventDataQuery';
export * from './queries/useEventDataEventsQuery';
export * from './queries/useEventDataPropertiesQuery';
export * from './queries/useEventDataValuesQuery';
@ -22,7 +23,6 @@ export * from './queries/useTeamWebsitesQuery';
export * from './queries/useTeamMembersQuery';
export * from './queries/useUserQuery';
export * from './queries/useUsersQuery';
export * from './queries/useUTMQuery';
export * from './queries/useWebsiteQuery';
export * from './queries/useWebsites';
export * from './queries/useWebsiteEventsQuery';

7
src/components/hooks/queries/useActiveUsersQuery.ts
View file

@ -1,10 +1,7 @@
import { useApi } from '../useApi';
import { UseQueryOptions } from '@tanstack/react-query';
import { ReactQueryOptions } from '@/lib/types';
export function useActyiveUsersQuery(
websiteId: string,
options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
) {
export function useActyiveUsersQuery(websiteId: string, options?: ReactQueryOptions<any>) {
const { get, useQuery } = useApi();
return useQuery<any>({
queryKey: ['websites:active', websiteId],

7
src/components/hooks/queries/useEventDataEventsQuery.ts
View file

@ -1,11 +1,8 @@
import { useApi } from '../useApi';
import { UseQueryOptions } from '@tanstack/react-query';
import { useFilterParams } from '../useFilterParams';
import { ReactQueryOptions } from '@/lib/types';
export function useEventDataEventsQuery(
websiteId: string,
options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
) {
export function useEventDataEventsQuery(websiteId: string, options?: ReactQueryOptions<any>) {
const { get, useQuery } = useApi();
const params = useFilterParams(websiteId);

7
src/components/hooks/queries/useEventDataPropertiesQuery.ts
View file

@ -1,11 +1,8 @@
import { UseQueryOptions } from '@tanstack/react-query';
import { useApi } from '../useApi';
import { useFilterParams } from '../useFilterParams';
import { ReactQueryOptions } from '@/lib/types';
export function useEventDataPropertiesQuery(
websiteId: string,
options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
) {
export function useEventDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
const { get, useQuery } = useApi();
const params = useFilterParams(websiteId);

19
src/components/hooks/queries/useEventDataQuery.ts Normal file
View file

@ -0,0 +1,19 @@
import { useApi } from '../useApi';
import { useFilterParams } from '../useFilterParams';
import { ReactQueryOptions } from '@/lib/types';
export function useEventDataQuery(
websiteId: string,
eventId: string,
options?: ReactQueryOptions<any>,
) {
const { get, useQuery } = useApi();
const params = useFilterParams(websiteId);
return useQuery({
queryKey: ['websites:event-data', { websiteId, eventId, ...params }],
queryFn: () => get(`/websites/${websiteId}/event-data/${eventId}`, { ...params }),
enabled: !!(websiteId && eventId),
...options,
});
}

4
src/components/hooks/queries/useEventDataValuesQuery.ts
View file

@ -1,12 +1,12 @@
import { UseQueryOptions } from '@tanstack/react-query';
import { useApi } from '../useApi';
import { useFilterParams } from '../useFilterParams';
import { ReactQueryOptions } from '@/lib/types';
export function useEventDataValuesQuery(
websiteId: string,
eventName: string,
propertyName: string,
options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
options?: ReactQueryOptions<any>,
) {
const { get, useQuery } = useApi();
const params = useFilterParams(websiteId);

3
src/components/hooks/queries/useLoginQuery.ts
View file

@ -1,4 +1,3 @@
import { UseQueryResult } from '@tanstack/react-query';
import { useApp, setUser } from '@/store/app';
import { useApi } from '../useApi';
@ -7,7 +6,7 @@ const selector = (state: { user: any }) => state.user;
export function useLoginQuery(): {
user: any;
setUser: (data: any) => void;
} & UseQueryResult {
} {
const { post, useQuery } = useApi();
const user = useApp(selector);

7
src/components/hooks/queries/useReportsQuery.ts
View file

@ -1,8 +1,12 @@
import { useApi } from '../useApi';
import { usePagedQuery } from '../usePagedQuery';
import { useModified } from '../useModified';
import { ReactQueryOptions } from '@/lib/types';
export function useReportsQuery({ websiteId, type }: { websiteId: string; type?: string }) {
export function useReportsQuery(
{ websiteId, type }: { websiteId: string; type?: string },
options?: ReactQueryOptions<any>,
) {
const { modified } = useModified(`reports:${type}`);
const { get } = useApi();
@ -10,5 +14,6 @@ export function useReportsQuery({ websiteId, type }: { websiteId: string; type?:
queryKey: ['reports', { websiteId, type, modified }],
queryFn: async () => get('/reports', { websiteId, type }),
enabled: !!websiteId && !!type,
...options,
});
}

4
src/components/hooks/queries/useResultQuery.ts
View file

@ -1,10 +1,10 @@
import { useApi } from '@/components/hooks';
import { UseQueryOptions, QueryKey } from '@tanstack/react-query';
import { ReactQueryOptions } from '@/lib/types';
export function useResultQuery<T>(
type: string,
params?: { [key: string]: any },
options?: Omit<UseQueryOptions<T, Error, T, QueryKey>, 'queryKey' | 'queryFn'>,
options?: ReactQueryOptions<T>,
) {
const { post, useQuery } = useApi();

7
src/components/hooks/queries/useSessionDataPropertiesQuery.ts
View file

@ -1,11 +1,8 @@
import { useApi } from '../useApi';
import { UseQueryOptions } from '@tanstack/react-query';
import { useFilterParams } from '../useFilterParams';
import { ReactQueryOptions } from '@/lib/types';
export function useSessionDataPropertiesQuery(
websiteId: string,
options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
) {
export function useSessionDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
const { get, useQuery } = useApi();
const params = useFilterParams(websiteId);

4
src/components/hooks/queries/useSessionDataValuesQuery.ts
View file

@ -1,11 +1,11 @@
import { useApi } from '../useApi';
import { UseQueryOptions } from '@tanstack/react-query';
import { useFilterParams } from '../useFilterParams';
import { ReactQueryOptions } from '@/lib/types';
export function useSessionDataValuesQuery(
websiteId: string,
propertyName: string,
options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
options?: ReactQueryOptions<any>,
) {
const { get, useQuery } = useApi();
const params = useFilterParams(websiteId);

20
src/components/hooks/queries/useUTMQuery.ts
View file

@ -1,20 +0,0 @@
import { useApi } from '../useApi';
import { useFilterParams } from '../useFilterParams';
import { UseQueryOptions } from '@tanstack/react-query';
export function useUTMQuery(
websiteId: string,
queryParams?: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
) {
const { get, useQuery } = useApi();
const filterParams = useFilterParams(websiteId);
return useQuery({
queryKey: ['utm', websiteId, { ...filterParams, ...queryParams }],
queryFn: () =>
get(`/websites/${websiteId}/utm`, { websiteId, ...filterParams, ...queryParams }),
enabled: !!websiteId,
...options,
});
}

7
src/components/hooks/queries/useWebsiteEventsQuery.ts
View file

@ -1,12 +1,9 @@
import { useApi } from '../useApi';
import { UseQueryOptions } from '@tanstack/react-query';
import { useFilterParams } from '../useFilterParams';
import { usePagedQuery } from '../usePagedQuery';
import { ReactQueryOptions } from '@/lib/types';
export function useWebsiteEventsQuery(
websiteId: string,
options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
) {
export function useWebsiteEventsQuery(websiteId: string, options?: ReactQueryOptions<any>) {
const { get } = useApi();
const params = useFilterParams(websiteId);

7
src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts
View file

@ -1,11 +1,8 @@
import { useApi } from '../useApi';
import { UseQueryOptions } from '@tanstack/react-query';
import { useFilterParams } from '../useFilterParams';
import { ReactQueryOptions } from '@/lib/types';
export function useWebsiteEventsSeriesQuery(
websiteId: string,
options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
) {
export function useWebsiteEventsSeriesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
const { get, useQuery } = useApi();
const params = useFilterParams(websiteId);

24
src/components/hooks/queries/useWebsiteMetricsQuery.ts
View file

@ -1,18 +1,24 @@
import { UseQueryOptions } from '@tanstack/react-query';
import { keepPreviousData } from '@tanstack/react-query';
import { useApi } from '../useApi';
import { useFilterParams } from '../useFilterParams';
import { useSearchParams } from 'next/navigation';
import { ReactQueryOptions } from '@/lib/types';
export type WebsiteMetricsData = {
x: string;
y: number;
}[];
export function useWebsiteMetricsQuery(
websiteId: string,
queryParams: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
options?: ReactQueryOptions<WebsiteMetricsData>,
) {
const { get, useQuery } = useApi();
const filterParams = useFilterParams(websiteId);
const searchParams = useSearchParams();
return useQuery({
return useQuery<WebsiteMetricsData>({
queryKey: [
'websites:metrics',
{
@ -21,18 +27,14 @@ export function useWebsiteMetricsQuery(
...queryParams,
},
],
queryFn: async () => {
const data = await get(`/websites/${websiteId}/metrics`, {
queryFn: async () =>
get(`/websites/${websiteId}/metrics`, {
...filterParams,
[searchParams.get('view')]: undefined,
...queryParams,
});
options?.onDataLoad?.(data);
return data;
},
}),
enabled: !!websiteId,
placeholderData: keepPreviousData,
...options,
});
}

20
src/components/hooks/queries/useWebsitePageviewsQuery.ts
View file

@ -1,18 +1,22 @@
import { UseQueryOptions } from '@tanstack/react-query';
import { useApi } from '../useApi';
import { useFilterParams } from '../useFilterParams';
import { ReactQueryOptions } from '@/lib/types';
export interface WebsitePageviewsData {
pageviews: { x: string; y: number }[];
sessions: { x: string; y: number }[];
}
export function useWebsitePageviewsQuery(
websiteId: string,
compare?: string,
options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
{ websiteId, compareMode }: { websiteId: string; compareMode?: string },
options?: ReactQueryOptions<WebsitePageviewsData>,
) {
const { get, useQuery } = useApi();
const params = useFilterParams(websiteId);
const filterParams = useFilterParams(websiteId);
return useQuery({
queryKey: ['websites:pageviews', { websiteId, ...params, compare }],
queryFn: () => get(`/websites/${websiteId}/pageviews`, { ...params, compare }),
return useQuery<WebsitePageviewsData>({
queryKey: ['websites:pageviews', { websiteId, compareMode, ...filterParams }],
queryFn: () => get(`/websites/${websiteId}/pageviews`, { compareMode, ...filterParams }),
enabled: !!websiteId,
...options,
});

20
src/components/hooks/queries/useWebsiteStatsQuery.ts
View file

@ -1,15 +1,31 @@
import { UseQueryOptions } from '@tanstack/react-query';
import { useApi } from '../useApi';
import { useFilterParams } from '../useFilterParams';
export interface WebsiteStatsData {
pageviews: number;
visitors: number;
visits: number;
bounces: number;
totaltime: number;
previous: {
pageviews: number;
visitors: number;
visits: number;
bounces: number;
totaltime: number;
};
}
export function useWebsiteStatsQuery(
websiteId: string,
compare?: string,
options?: { [key: string]: string },
options?: UseQueryOptions<WebsiteStatsData, Error, WebsiteStatsData>,
) {
const { get, useQuery } = useApi();
const params = useFilterParams(websiteId);
return useQuery({
return useQuery<WebsiteStatsData>({
queryKey: ['websites:stats', { websiteId, ...params, compare }],
queryFn: () => get(`/websites/${websiteId}/stats`, { ...params, compare }),
enabled: !!websiteId,

4
src/components/input/DateFilter.tsx
View file

@ -100,13 +100,13 @@ export function DateFilter({
};
return (
<Row width="200px">
<Row width="280px">
<Select
value={value}
placeholder={formatMessage(labels.selectDate)}
onChange={handleChange}
renderValue={renderValue}
popoverProps={{ placement: 'top', style: { width: 200 } }}
popoverProps={{ placement: 'bottom' }}
>
{options.map(({ label, value, divider }: any) => {
return (

22
src/components/metrics/EventData.tsx Normal file
View file

@ -0,0 +1,22 @@
import { Grid, Column, Text, Label } from '@umami/react-zen';
import { useEventDataQuery } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
export function EventData({ websiteId, eventId }: { websiteId: string; eventId: string }) {
const { data, isLoading, error } = useEventDataQuery(websiteId, eventId);
return (
<LoadingPanel isLoading={isLoading} error={error}>
<Grid columns="1fr 1fr" gap="5">
{data?.map(({ dataKey, stringValue }) => {
return (
<Column key={dataKey}>
<Label>{dataKey}</Label>
<Text>{stringValue}</Text>
</Column>
);
})}
</Grid>
</LoadingPanel>
);
}

7
src/components/metrics/LanguagesTable.tsx
View file

@ -1,13 +1,9 @@
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { percentFilter } from '@/lib/filters';
import { useLocale } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { useFormat } from '@/components/hooks';
export function LanguagesTable({
onDataLoad,
...props
}: { onDataLoad: (data: any) => void } & MetricsTableProps) {
export function LanguagesTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const { formatLanguage } = useFormat();
@ -22,7 +18,6 @@ export function LanguagesTable({
title={formatMessage(labels.languages)}
type="language"
metric={formatMessage(labels.visitors)}
onDataLoad={data => onDataLoad?.(percentFilter(data))}
renderLabel={renderLabel}
searchFormattedValues={true}
/>

20
src/components/metrics/MetricsBar.tsx
View file

@ -1,22 +1,14 @@
import { ReactNode } from 'react';
import { Grid } from '@umami/react-zen';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Grid, GridProps } from '@umami/react-zen';
export interface MetricsBarProps {
isLoading?: boolean;
isFetched?: boolean;
error?: Error;
export interface MetricsBarProps extends GridProps {
children?: ReactNode;
}
export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBarProps) {
export function MetricsBar({ children, ...props }: MetricsBarProps) {
return (
<LoadingPanel isLoading={isLoading} isFetched={isFetched} error={error}>
{!isLoading && !error && isFetched && (
<Grid columns="repeat(auto-fit, minmax(200px, 1fr))" width="100%" gap>
{children}
</Grid>
)}
</LoadingPanel>
<Grid columns="repeat(auto-fit, minmax(200px, 1fr))" gap {...props}>
{children}
</Grid>
);
}

45
src/components/metrics/MetricsTable.tsx
View file

@ -1,12 +1,12 @@
import { ReactNode, useMemo, useState } from 'react';
import { Loading, Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
import { ErrorMessage } from '@/components/common/ErrorMessage';
import { Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
import { percentFilter } from '@/lib/filters';
import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
import { Arrow } from '@/components/icons';
import { ListTable, ListTableProps } from './ListTable';
import { LoadingPanel } from '@/components/common/LoadingPanel';
export interface MetricsTableProps extends ListTableProps {
websiteId: string;
@ -15,7 +15,6 @@ export interface MetricsTableProps extends ListTableProps {
dataFilter?: (data: any) => any;
limit?: number;
delay?: number;
onDataLoad?: (data: any) => void;
onSearch?: (search: string) => void;
allowSearch?: boolean;
searchFormattedValues?: boolean;
@ -30,7 +29,6 @@ export function MetricsTable({
className,
dataFilter,
limit,
onDataLoad,
delay = null,
allowSearch = false,
searchFormattedValues = false,
@ -44,12 +42,11 @@ export function MetricsTable({
const { renderUrl } = useNavigation();
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useWebsiteMetricsQuery(
const { data, isLoading, isFetching, error } = useWebsiteMetricsQuery(
websiteId,
{ type, limit, search: searchFormattedValues ? undefined : search, ...params },
{
retryDelay: delay || DEFAULT_ANIMATION_DURATION,
onDataLoad,
},
);
@ -84,25 +81,25 @@ export function MetricsTable({
return (
<Column gap="3" justifyContent="space-between">
{error && <ErrorMessage />}
<Row alignItems="center" justifyContent="space-between">
{allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
{children}
</Row>
{data && !error && (
<ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
)}
{!data && isLoading && !isFetched && <Loading icon="dots" />}
<Row justifyContent="center">
{showMore && data && !error && limit && (
<LinkButton href={renderUrl({ view: type })} variant="quiet">
<Text>{formatMessage(labels.more)}</Text>
<Icon size="sm">
<Arrow />
</Icon>
</LinkButton>
<LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
<Row alignItems="center" justifyContent="space-between">
{allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
{children}
</Row>
{data && (
<ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
)}
</Row>
<Row justifyContent="center">
{showMore && data && !error && limit && (
<LinkButton href={renderUrl({ view: type })} variant="quiet">
<Text>{formatMessage(labels.more)}</Text>
<Icon size="sm">
<Arrow />
</Icon>
</LinkButton>
)}
</Row>
</LoadingPanel>
</Column>
);
}

3
src/lib/types.ts
View file

@ -1,4 +1,5 @@
import { Dispatch, SetStateAction } from 'react';
import { UseQueryOptions } from '@tanstack/react-query';
import {
COLLECTION_TYPE,
DATA_TYPE,
@ -208,3 +209,5 @@ export interface InputItem {
icon: any;
seperator?: boolean;
}
export type ReactQueryOptions<T> = Omit<UseQueryOptions<T, Error, T>, 'queryKey' | 'queryFn'>;

57
src/queries/sql/events/getEventData.ts Normal file
View file

@ -0,0 +1,57 @@
import { EventData } from '@/generated/prisma';
import prisma from '@/lib/prisma';
import clickhouse from '@/lib/clickhouse';
import { CLICKHOUSE, PRISMA, runQuery } from '@/lib/db';
export async function getEventData(...args: [eventId: string]): Promise<EventData[]> {
return runQuery({
[PRISMA]: () => relationalQuery(...args),
[CLICKHOUSE]: () => clickhouseQuery(...args),
});
}
async function relationalQuery(eventId: string) {
const { rawQuery } = prisma;
return rawQuery(
`
select website_id as websiteId,
session_id as sessionId,
event_id as eventId,
url_path as urlPath,
event_name as eventName,
data_key as dataKey,
string_value as stringValue,
number_value as numberValue,
date_value as dateValue,
data_type as dataType,
created_at as createdAt
from event_data
where event_id = {{eventId::uuid}}
`,
{ eventId },
);
}
async function clickhouseQuery(eventId: string): Promise<EventData[]> {
const { rawQuery } = clickhouse;
return rawQuery(
`
select website_id as websiteId,
session_id as sessionId,
event_id as eventId,
url_path as urlPath,
event_name as eventName,
data_key as dataKey,
string_value as stringValue,
number_value as numberValue,
date_value as dateValue,
data_type as dataType,
created_at as createdAt
from event_data
where event_id = {eventId:UUID}
`,
{ eventId },
);
}

2
src/queries/sql/getWebsiteStats.ts
View file

@ -117,5 +117,5 @@ async function clickhouseQuery(
`;
}
return rawQuery(sql, params);
return rawQuery(sql, params).then(result => result?.[0]);
}