zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2026-03-11 23:28:20 +01:00
parent bc08566cd4
commit a672b73947
11 changed files with 196 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/start/src/components/events/event-listener.tsx
View File

@@ -1,3 +1,4 @@
import { AnimatedNumber } from '../animated-number';
import {
Tooltip,
TooltipContent,
@@ -8,71 +9,53 @@ import { useDebounceState } from '@/hooks/use-debounce-state';
import useWS from '@/hooks/use-ws';
import { cn } from '@/utils/cn';
import type { IServiceEvent, IServiceEventMinimal } from '@openpanel/db';
import { useParams } from '@tanstack/react-router';
import { AnimatedNumber } from '../animated-number';
export default function EventListener({
onRefresh,
}: {
onRefresh: () => void;
}) {
const params = useParams({
strict: false,
});
const { projectId } = useAppParams();
const counter = useDebounceState(0, 1000);
useWS<IServiceEventMinimal | IServiceEvent>(
useWS<{ count: number }>(
`/live/events/${projectId}`,
(event) => {
if (event) {
const isProfilePage = !!params?.profileId;
if (isProfilePage) {
const profile = 'profile' in event ? event.profile : null;
if (profile?.id === params?.profileId) {
counter.set((prev) => prev + 1);
}
return;
}
counter.set((prev) => prev + 1);
}
({ count }) => {
counter.set((prev) => prev + count);
},
{
debounce: {
delay: 1000,
maxWait: 5000,
},
},
}
);
return (
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
className="flex h-8 items-center gap-2 rounded-md border border-border bg-card px-3 font-medium leading-none"
onClick={() => {
counter.set(0);
onRefresh();
}}
className="flex h-8 items-center gap-2 rounded-md border border-border bg-card px-3 font-medium leading-none"
type="button"
>
<div className="relative">
<div
className={cn(
'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all',
'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all'
)}
/>
<div
className={cn(
'absolute left-0 top-0 h-3 w-3 rounded-full bg-emerald-500 transition-all',
'absolute top-0 left-0 h-3 w-3 rounded-full bg-emerald-500 transition-all'
)}
/>
</div>
{counter.debounced === 0 ? (
'Listening'
) : (
<AnimatedNumber value={counter.debounced} suffix=" new events" />
<AnimatedNumber suffix=" new events" value={counter.debounced} />
)}
</button>
</TooltipTrigger>

9
apps/start/src/components/events/table/index.tsx
View File

@@ -35,6 +35,7 @@ type Props = {
>,
unknown
>;
showEventListener?: boolean;
};
const LOADING_DATA = [{}, {}, {}, {}, {}, {}, {}, {}, {}] as IServiceEvent[];
@@ -215,7 +216,7 @@ const VirtualizedEventsTable = ({
);
};
export const EventsTable = ({ query }: Props) => {
export const EventsTable = ({ query, showEventListener = false }: Props) => {
const { isLoading } = query;
const columns = useColumns();
@@ -272,7 +273,7 @@ export const EventsTable = ({ query }: Props) => {
return (
<>
<EventsTableToolbar query={query} table={table} />
<EventsTableToolbar query={query} table={table} showEventListener={showEventListener} />
<VirtualizedEventsTable table={table} data={data} isLoading={isLoading} />
<div className="w-full h-10 center-center pt-4" ref={inViewportRef}>
<div
@@ -291,9 +292,11 @@ export const EventsTable = ({ query }: Props) => {
function EventsTableToolbar({
query,
table,
showEventListener,
}: {
query: Props['query'];
table: Table<IServiceEvent>;
showEventListener: boolean;
}) {
const { projectId } = useAppParams();
const [startDate, setStartDate] = useQueryState(
@@ -305,7 +308,7 @@ function EventsTableToolbar({
return (
<DataTableToolbarContainer>
<div className="flex flex-1 flex-wrap items-center gap-2">
<EventListener onRefresh={() => query.refetch()} />
{showEventListener && <EventListener onRefresh={() => query.refetch()} />}
<Button
variant="outline"
size="sm"

32
apps/start/src/components/onboarding/onboarding-verify-listener.tsx
View File

@@ -1,31 +1,13 @@
import type {
IServiceClient,
IServiceEvent,
IServiceProject,
} from '@openpanel/db';
import type { IServiceEvent } from '@openpanel/db';
import { CheckCircle2Icon, CheckIcon, Loader2 } from 'lucide-react';
import { useState } from 'react';
import useWS from '@/hooks/use-ws';
import { cn } from '@/utils/cn';
import { timeAgo } from '@/utils/date';
interface Props {
project: IServiceProject;
client: IServiceClient | null;
events: IServiceEvent[];
onVerified: (verified: boolean) => void;
}
const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
const [events, setEvents] = useState<IServiceEvent[]>(_events ?? []);
useWS<IServiceEvent>(
`/live/events/${client?.projectId}?type=received`,
(data) => {
setEvents((prev) => [...prev, data]);
onVerified(true);
}
);
const VerifyListener = ({ events }: Props) => {
const isConnected = events.length > 0;
const renderIcon = () => {
@@ -49,16 +31,18 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
<div
className={cn(
'flex gap-6 rounded-xl p-4 md:p-6',
isConnected ? 'bg-emerald-100 dark:bg-emerald-700' : 'bg-blue-500/10'
isConnected
? 'bg-emerald-100 dark:bg-emerald-700/10'
: 'bg-blue-500/10'
)}
>
{renderIcon()}
<div className="flex-1">
<div className="font-semibold text-foreground/90 text-lg leading-normal">
{isConnected ? 'Success' : 'Waiting for events'}
{isConnected ? 'Successfully connected' : 'Waiting for events'}
</div>
{isConnected ? (
<div className="flex flex-col-reverse">
<div className="mt-2 flex flex-col-reverse gap-1">
{events.length > 5 && (
<div className="flex items-center gap-2">
<CheckIcon size={14} />{' '}
@@ -69,7 +53,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
<div className="flex items-center gap-2" key={event.id}>
<CheckIcon size={14} />{' '}
<span className="font-medium">{event.name}</span>{' '}
<span className="ml-auto text-emerald-800">
<span className="ml-auto text-foreground/50 text-sm">
{timeAgo(event.createdAt, 'round')}
</span>
</div>

98
apps/start/src/components/realtime/realtime-active-sessions.tsx
View File

@@ -1,11 +1,9 @@
import { useTRPC } from '@/integrations/trpc/react';
import { useQuery } from '@tanstack/react-query';
import { AnimatePresence, motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import useWS from '@/hooks/use-ws';
import type { IServiceEvent } from '@openpanel/db';
import { EventItem } from '../events/table/item';
import { ProjectLink } from '../links';
import { SerieIcon } from '../report-chart/common/serie-icon';
import { useTRPC } from '@/integrations/trpc/react';
import { formatTimeAgoOrDateTime } from '@/utils/date';
interface RealtimeActiveSessionsProps {
projectId: string;
@@ -17,64 +15,52 @@ export function RealtimeActiveSessions({
limit = 10,
}: RealtimeActiveSessionsProps) {
const trpc = useTRPC();
const activeSessionsQuery = useQuery(
trpc.realtime.activeSessions.queryOptions({
projectId,
}),
const { data: sessions = [] } = useQuery(
trpc.realtime.activeSessions.queryOptions(
{ projectId },
{ refetchInterval: 5000 }
)
);
const [state, setState] = useState<IServiceEvent[]>([]);
// Update state when initial data loads
useEffect(() => {
if (activeSessionsQuery.data && state.length === 0) {
setState(activeSessionsQuery.data);
}
}, [activeSessionsQuery.data, state]);
// Set up WebSocket connection for real-time updates
useWS<IServiceEvent>(
`/live/events/${projectId}`,
(session) => {
setState((prev) => {
// Add new session and remove duplicates, keeping most recent
const filtered = prev.filter((s) => s.id !== session.id);
return [session, ...filtered].slice(0, limit);
});
},
{
debounce: {
delay: 1000,
maxWait: 5000,
},
},
);
const sessions = state.length > 0 ? state : (activeSessionsQuery.data ?? []);
return (
<div className="col h-full max-md:hidden">
<div className="hide-scrollbar h-full overflow-y-auto pb-10">
<AnimatePresence mode="popLayout" initial={false}>
<div className="col gap-4">
{sessions.map((session) => (
<div className="col card h-full max-md:hidden">
<div className="hide-scrollbar h-full overflow-y-auto">
<AnimatePresence initial={false} mode="popLayout">
<div className="col divide-y">
{sessions.slice(0, limit).map((session) => (
<motion.div
key={session.id}
layout
// initial={{ opacity: 0, x: -200, scale: 0.8 }}
animate={{ opacity: 1, x: 0, scale: 1 }}
exit={{ opacity: 0, x: 200, scale: 0.8 }}
key={session.id}
layout
transition={{ duration: 0.4, type: 'spring', stiffness: 300 }}
>
<EventItem
event={session}
viewOptions={{
properties: false,
origin: false,
queryString: false,
}}
className="w-full"
/>
<ProjectLink
className="relative block p-4 py-3 pr-14"
href={`/sessions/${session.sessionId}`}
>
<div className="col flex-1 gap-1">
{session.name === 'screen_view' && (
<span className="text-muted-foreground text-xs leading-normal/80">
{session.origin}
</span>
)}
<span className="font-medium text-sm leading-normal">
{session.name === 'screen_view'
? session.path
: session.name}
</span>
<span className="text-muted-foreground text-xs">
{formatTimeAgoOrDateTime(session.createdAt)}
</span>
</div>
<div className="row absolute top-1/2 right-4 origin-right -translate-y-1/2 scale-50 gap-2">
<SerieIcon name={session.referrerName} />
<SerieIcon name={session.os} />
<SerieIcon name={session.browser} />
<SerieIcon name={session.device} />
</div>
</ProjectLink>
</motion.div>
))}
</div>

2
apps/start/src/routes/_app.$organizationId.$projectId.events._tabs.events.tsx
View File

@@ -42,5 +42,5 @@ function Component() {
),
);
return <EventsTable query={query} />;
return <EventsTable query={query} showEventListener />;
}

23
apps/start/src/routes/_app.$organizationId.$projectId.realtime.tsx
View File

@@ -1,3 +1,5 @@
import { keepPreviousData, useQuery } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
import { Fullscreen, FullscreenClose } from '@/components/fullscreen-toggle';
import RealtimeMap from '@/components/realtime/map';
import { RealtimeActiveSessions } from '@/components/realtime/realtime-active-sessions';
@@ -7,12 +9,10 @@ import { RealtimePaths } from '@/components/realtime/realtime-paths';
import { RealtimeReferrals } from '@/components/realtime/realtime-referrals';
import RealtimeReloader from '@/components/realtime/realtime-reloader';
import { useTRPC } from '@/integrations/trpc/react';
import { PAGE_TITLES, createProjectTitle } from '@/utils/title';
import { keepPreviousData, useQuery } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
import { createProjectTitle, PAGE_TITLES } from '@/utils/title';
export const Route = createFileRoute(
'/_app/$organizationId/$projectId/realtime',
'/_app/$organizationId/$projectId/realtime'
)({
component: Component,
head: () => {
@@ -36,8 +36,8 @@ function Component() {
},
{
placeholderData: keepPreviousData,
},
),
}
)
);
return (
@@ -47,7 +47,7 @@ function Component() {
<RealtimeReloader projectId={projectId} />
<div className="row relative">
<div className="overflow-hidden aspect-[4/2] w-full">
<div className="aspect-[4/2] w-full overflow-hidden">
<RealtimeMap
markers={coordinatesQuery.data ?? []}
sidebarConfig={{
@@ -56,18 +56,17 @@ function Component() {
}}
/>
</div>
<div className="absolute top-8 left-8 bottom-0 col gap-4">
<div className="card p-4 w-72 bg-background/90">
<div className="col absolute top-8 bottom-4 left-8 gap-4">
<div className="card w-72 bg-background/90 p-4">
<RealtimeLiveHistogram projectId={projectId} />
</div>
<div className="w-72 flex-1 min-h-0 relative">
<div className="relative min-h-0 w-72 flex-1">
<RealtimeActiveSessions projectId={projectId} />
<div className="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-def-100 to-transparent" />
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-4 pt-4 md:p-8 md:pt-0">
<div className="grid grid-cols-1 gap-4 p-4 pt-4 md:grid-cols-2 md:p-8 md:pt-0 xl:grid-cols-3">
<div>
<RealtimeGeo projectId={projectId} />
</div>

28
apps/start/src/routes/_steps.onboarding.$projectId.verify.tsx
View File

@@ -1,7 +1,6 @@
import { useQuery } from '@tanstack/react-query';
import { createFileRoute, Link, redirect } from '@tanstack/react-router';
import { BoxSelectIcon } from 'lucide-react';
import { useEffect, useState } from 'react';
import { ButtonContainer } from '@/components/button-container';
import { FullPageEmptyState } from '@/components/full-page-empty-state';
import FullPageLoadingState from '@/components/full-page-loading-state';
@@ -33,22 +32,21 @@ export const Route = createFileRoute('/_steps/onboarding/$projectId/verify')({
});
function Component() {
const [isVerified, setIsVerified] = useState(false);
const { projectId } = Route.useParams();
const trpc = useTRPC();
const { data: events, refetch } = useQuery(
trpc.event.events.queryOptions({ projectId })
const { data: events } = useQuery(
trpc.event.events.queryOptions(
{ projectId },
{
refetchInterval: 2500,
}
)
);
const isVerified = events?.data && events.data.length > 0;
const { data: project } = useQuery(
trpc.project.getProjectWithClients.queryOptions({ projectId })
);
useEffect(() => {
if (events && events.data.length > 0) {
setIsVerified(true);
}
}, [events]);
if (!project) {
return (
<FullPageEmptyState icon={BoxSelectIcon} title="Project not found" />
@@ -64,15 +62,7 @@ function Component() {
<div className="flex min-h-0 flex-1 flex-col">
<div className="scrollbar-thin flex-1 overflow-y-auto">
<div className="col gap-8 p-4">
<VerifyListener
client={client}
events={events?.data ?? []}
onVerified={() => {
refetch();
setIsVerified(true);
}}
project={project}
/>
<VerifyListener events={events?.data ?? []} />
<VerifyFaq project={project} />
</div>