feat: dashboard v2, esm, upgrades (#211)
* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
This commit is contained in:
Carl-Gerhard Lindesvärd
committed by
GitHub
GitHub
parent
436e81ecc9
commit
81a7e5d62e
271
apps/start/src/components/sessions/table/columns.tsx
Normal file
271
apps/start/src/components/sessions/table/columns.tsx
Normal file
@@ -0,0 +1,271 @@
|
||||
import { ProjectLink } from '@/components/links';
|
||||
import { SerieIcon } from '@/components/report-chart/common/serie-icon';
|
||||
import { formatDateTime, formatTimeAgoOrDateTime } from '@/utils/date';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
import { getProfileName } from '@/utils/getters';
|
||||
import { round } from '@openpanel/common';
|
||||
import type { IServiceSession } from '@openpanel/db';
|
||||
|
||||
function formatDuration(milliseconds: number): string {
|
||||
const seconds = milliseconds / 1000;
|
||||
if (seconds < 60) {
|
||||
return `${round(seconds, 1)}s`;
|
||||
}
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
if (minutes < 60) {
|
||||
return remainingSeconds > 0
|
||||
? `${minutes}m ${round(remainingSeconds, 0)}s`
|
||||
: `${minutes}m`;
|
||||
}
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const remainingMinutes = minutes % 60;
|
||||
return `${hours}h ${round(remainingMinutes, 0)}m`;
|
||||
}
|
||||
|
||||
export function useColumns() {
|
||||
const columns: ColumnDef<IServiceSession>[] = [
|
||||
{
|
||||
accessorKey: 'createdAt',
|
||||
header: 'Started',
|
||||
size: 140,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 opacity-0 group-hover/row:opacity-100 transition-opacity duration-100">
|
||||
{formatDateTime(session.createdAt)}
|
||||
</div>
|
||||
<div className="text-muted-foreground group-hover/row:opacity-0 transition-opacity duration-100">
|
||||
{formatTimeAgoOrDateTime(session.createdAt)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'id',
|
||||
header: 'Session ID',
|
||||
size: 120,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<ProjectLink
|
||||
href={`/sessions/${session.id}`}
|
||||
className="font-medium"
|
||||
title={session.id}
|
||||
>
|
||||
{session.id.slice(0, 8)}...
|
||||
</ProjectLink>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'profileId',
|
||||
header: 'Profile',
|
||||
size: 150,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
if (session.profile) {
|
||||
return (
|
||||
<ProjectLink
|
||||
href={`/profiles/${session.profile.id}`}
|
||||
className="font-medium"
|
||||
>
|
||||
{getProfileName(session.profile)}
|
||||
</ProjectLink>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ProjectLink
|
||||
href={`/profiles/${session.profileId}`}
|
||||
className="font-mono font-medium"
|
||||
>
|
||||
{session.profileId}
|
||||
</ProjectLink>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'entryPath',
|
||||
header: 'Entry Page',
|
||||
size: 200,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<span className="font-mono">{session.entryPath || '/'}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'exitPath',
|
||||
header: 'Exit Page',
|
||||
size: 200,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<span className="font-mono">
|
||||
{session.exitPath || session.entryPath || '/'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'duration',
|
||||
header: 'Duration',
|
||||
size: 100,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<div className="font-medium">{formatDuration(session.duration)}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'isBounce',
|
||||
header: 'Bounce',
|
||||
size: 80,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<div className="text-center">
|
||||
{session.isBounce ? (
|
||||
<span className="text-orange-600">Yes</span>
|
||||
) : (
|
||||
<span className="text-green-600">No</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'referrerName',
|
||||
header: 'Referrer',
|
||||
size: 150,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
const ref = session.referrerName || session.referrer || 'Direct';
|
||||
return (
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<SerieIcon name={ref} />
|
||||
<span className="truncate">{ref}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'country',
|
||||
header: 'Location',
|
||||
size: 150,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<SerieIcon name={session.country} />
|
||||
<span className="truncate">{session.city || session.country}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'os',
|
||||
header: 'OS',
|
||||
size: 120,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<SerieIcon name={session.os} />
|
||||
<span className="truncate">{session.os}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'browser',
|
||||
header: 'Browser',
|
||||
size: 120,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<SerieIcon name={session.browser} />
|
||||
<span className="truncate">{session.browser}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'device',
|
||||
header: 'Device',
|
||||
size: 150,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
let deviceInfo =
|
||||
session.brand || session.model
|
||||
? [session.brand, session.model].filter(Boolean).join(' / ')
|
||||
: session.device;
|
||||
if (deviceInfo === 'K') {
|
||||
deviceInfo = session.device;
|
||||
}
|
||||
return (
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<SerieIcon name={session.device} />
|
||||
<span className="truncate">{deviceInfo}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'screenViewCount',
|
||||
header: 'Page views',
|
||||
size: 100,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<div className="text-center font-medium">
|
||||
{session.screenViewCount}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'eventCount',
|
||||
header: 'Events',
|
||||
size: 90,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return (
|
||||
<div className="text-center font-medium">{session.eventCount}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'revenue',
|
||||
header: 'Revenue',
|
||||
size: 100,
|
||||
cell: ({ row }) => {
|
||||
const session = row.original;
|
||||
return session.revenue > 0 ? (
|
||||
<div className="font-medium text-green-600">
|
||||
${session.revenue.toFixed(2)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-muted-foreground">-</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'deviceId',
|
||||
header: 'Device ID',
|
||||
size: 120,
|
||||
},
|
||||
];
|
||||
|
||||
return columns;
|
||||
}
|
||||
Reference in New Issue
Block a user