feat: group analytics
* wip * wip * wip * wip * wip * add buffer * wip * wip * fixes * fix * wip * group validation * fix group issues * docs: add groups
This commit is contained in:
Carl-Gerhard Lindesvärd
committed by
GitHub
GitHub
parent
88a2d876ce
commit
11e9ecac1a
130
apps/start/src/components/groups/group-member-growth.tsx
Normal file
130
apps/start/src/components/groups/group-member-growth.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import { TrendingUpIcon } from 'lucide-react';
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
CartesianGrid,
|
||||
Tooltip as RechartTooltip,
|
||||
ResponsiveContainer,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from 'recharts';
|
||||
import { WidgetHead, WidgetTitle } from '../overview/overview-widget';
|
||||
import {
|
||||
useXAxisProps,
|
||||
useYAxisProps,
|
||||
} from '@/components/report-chart/common/axis';
|
||||
import { Widget, WidgetBody } from '@/components/widget';
|
||||
import { useFormatDateInterval } from '@/hooks/use-format-date-interval';
|
||||
import { useNumber } from '@/hooks/use-numer-formatter';
|
||||
import { getChartColor } from '@/utils/theme';
|
||||
|
||||
type Props = {
|
||||
data: { date: string; count: number }[];
|
||||
};
|
||||
|
||||
function Tooltip(props: any) {
|
||||
const number = useNumber();
|
||||
const formatDate = useFormatDateInterval({ interval: 'day', short: false });
|
||||
const payload = props.payload?.[0]?.payload;
|
||||
|
||||
if (!payload) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-w-[160px] flex-col gap-2 rounded-xl border bg-card p-3 shadow-xl">
|
||||
<div className="text-muted-foreground text-sm">
|
||||
{formatDate(new Date(payload.timestamp))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="h-10 w-1 rounded-full"
|
||||
style={{ background: getChartColor(0) }}
|
||||
/>
|
||||
<div className="col gap-1">
|
||||
<div className="text-muted-foreground text-sm">Total members</div>
|
||||
<div
|
||||
className="font-semibold text-lg"
|
||||
style={{ color: getChartColor(0) }}
|
||||
>
|
||||
{number.format(payload.cumulative)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{payload.count > 0 && (
|
||||
<div className="text-muted-foreground text-xs">
|
||||
+{number.format(payload.count)} new
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function GroupMemberGrowth({ data }: Props) {
|
||||
const xAxisProps = useXAxisProps({ interval: 'day' });
|
||||
const yAxisProps = useYAxisProps({});
|
||||
const color = getChartColor(0);
|
||||
|
||||
let cumulative = 0;
|
||||
const chartData = data.map((item) => {
|
||||
cumulative += item.count;
|
||||
return {
|
||||
date: item.date,
|
||||
timestamp: new Date(item.date).getTime(),
|
||||
count: item.count,
|
||||
cumulative,
|
||||
};
|
||||
});
|
||||
|
||||
const gradientId = 'memberGrowthGradient';
|
||||
|
||||
return (
|
||||
<Widget className="w-full">
|
||||
<WidgetHead>
|
||||
<WidgetTitle icon={TrendingUpIcon}>Member growth</WidgetTitle>
|
||||
</WidgetHead>
|
||||
<WidgetBody>
|
||||
{data.length === 0 ? (
|
||||
<p className="py-4 text-center text-muted-foreground text-sm">
|
||||
No data yet
|
||||
</p>
|
||||
) : (
|
||||
<div className="h-[200px] w-full">
|
||||
<ResponsiveContainer>
|
||||
<AreaChart data={chartData}>
|
||||
<defs>
|
||||
<linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="5%" stopColor={color} stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor={color} stopOpacity={0.02} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<RechartTooltip
|
||||
content={<Tooltip />}
|
||||
cursor={{ stroke: color, strokeOpacity: 0.3 }}
|
||||
/>
|
||||
<Area
|
||||
dataKey="cumulative"
|
||||
dot={false}
|
||||
fill={`url(#${gradientId})`}
|
||||
isAnimationActive={false}
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
type="monotone"
|
||||
/>
|
||||
<XAxis {...xAxisProps} />
|
||||
<YAxis {...yAxisProps} />
|
||||
<CartesianGrid
|
||||
className="stroke-border"
|
||||
horizontal={true}
|
||||
strokeDasharray="3 3"
|
||||
strokeOpacity={0.5}
|
||||
vertical={false}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</WidgetBody>
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
76
apps/start/src/components/groups/table/columns.tsx
Normal file
76
apps/start/src/components/groups/table/columns.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { useAppParams } from '@/hooks/use-app-params';
|
||||
import { ColumnCreatedAt } from '@/components/column-created-at';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Link } from '@tanstack/react-router';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import type { IServiceGroup } from '@openpanel/db';
|
||||
|
||||
export type IServiceGroupWithStats = IServiceGroup & {
|
||||
memberCount: number;
|
||||
lastActiveAt: Date | null;
|
||||
};
|
||||
|
||||
export function useGroupColumns(): ColumnDef<IServiceGroupWithStats>[] {
|
||||
const { organizationId, projectId } = useAppParams();
|
||||
|
||||
return [
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name',
|
||||
cell: ({ row }) => {
|
||||
const group = row.original;
|
||||
return (
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
params={{ organizationId, projectId, groupId: group.id }}
|
||||
to="/$organizationId/$projectId/groups/$groupId"
|
||||
>
|
||||
{group.name}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'id',
|
||||
header: 'ID',
|
||||
cell: ({ row }) => (
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
{row.original.id}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'type',
|
||||
header: 'Type',
|
||||
cell: ({ row }) => (
|
||||
<Badge variant="outline">{row.original.type}</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'memberCount',
|
||||
header: 'Members',
|
||||
cell: ({ row }) => (
|
||||
<span className="tabular-nums">{row.original.memberCount}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'lastActiveAt',
|
||||
header: 'Last active',
|
||||
size: ColumnCreatedAt.size,
|
||||
cell: ({ row }) =>
|
||||
row.original.lastActiveAt ? (
|
||||
<ColumnCreatedAt>{row.original.lastActiveAt}</ColumnCreatedAt>
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'createdAt',
|
||||
header: 'Created',
|
||||
size: ColumnCreatedAt.size,
|
||||
cell: ({ row }) => (
|
||||
<ColumnCreatedAt>{row.original.createdAt}</ColumnCreatedAt>
|
||||
),
|
||||
},
|
||||
];
|
||||
}
|
||||
114
apps/start/src/components/groups/table/index.tsx
Normal file
114
apps/start/src/components/groups/table/index.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import type { IServiceGroup } from '@openpanel/db';
|
||||
import type { UseQueryResult } from '@tanstack/react-query';
|
||||
import type { PaginationState, Table, Updater } from '@tanstack/react-table';
|
||||
import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
|
||||
import { memo } from 'react';
|
||||
import { type IServiceGroupWithStats, useGroupColumns } from './columns';
|
||||
import { DataTable } from '@/components/ui/data-table/data-table';
|
||||
import {
|
||||
useDataTableColumnVisibility,
|
||||
useDataTablePagination,
|
||||
} from '@/components/ui/data-table/data-table-hooks';
|
||||
import {
|
||||
AnimatedSearchInput,
|
||||
DataTableToolbarContainer,
|
||||
} from '@/components/ui/data-table/data-table-toolbar';
|
||||
import { DataTableViewOptions } from '@/components/ui/data-table/data-table-view-options';
|
||||
import { useSearchQueryState } from '@/hooks/use-search-query-state';
|
||||
import type { RouterOutputs } from '@/trpc/client';
|
||||
import { arePropsEqual } from '@/utils/are-props-equal';
|
||||
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
interface Props {
|
||||
query: UseQueryResult<RouterOutputs['group']['list'], unknown>;
|
||||
pageSize?: number;
|
||||
toolbarLeft?: React.ReactNode;
|
||||
}
|
||||
|
||||
const LOADING_DATA = [{}, {}, {}, {}, {}, {}, {}, {}, {}] as IServiceGroupWithStats[];
|
||||
|
||||
export const GroupsTable = memo(
|
||||
({ query, pageSize = PAGE_SIZE, toolbarLeft }: Props) => {
|
||||
const { data, isLoading } = query;
|
||||
const columns = useGroupColumns();
|
||||
|
||||
const { setPage, state: pagination } = useDataTablePagination(pageSize);
|
||||
const {
|
||||
columnVisibility,
|
||||
setColumnVisibility,
|
||||
columnOrder,
|
||||
setColumnOrder,
|
||||
} = useDataTableColumnVisibility(columns, 'groups');
|
||||
|
||||
const table = useReactTable({
|
||||
data: isLoading ? LOADING_DATA : (data?.data ?? []),
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
manualPagination: true,
|
||||
manualFiltering: true,
|
||||
manualSorting: true,
|
||||
columns,
|
||||
rowCount: data?.meta.count,
|
||||
pageCount: Math.ceil(
|
||||
(data?.meta.count || 0) / (pagination.pageSize || 1)
|
||||
),
|
||||
filterFns: {
|
||||
isWithinRange: () => true,
|
||||
},
|
||||
state: {
|
||||
pagination,
|
||||
columnVisibility,
|
||||
columnOrder,
|
||||
},
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
onColumnOrderChange: setColumnOrder,
|
||||
onPaginationChange: (updaterOrValue: Updater<PaginationState>) => {
|
||||
const nextPagination =
|
||||
typeof updaterOrValue === 'function'
|
||||
? updaterOrValue(pagination)
|
||||
: updaterOrValue;
|
||||
setPage(nextPagination.pageIndex + 1);
|
||||
},
|
||||
getRowId: (row, index) => row.id ?? `loading-${index}`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<GroupsTableToolbar table={table} toolbarLeft={toolbarLeft} />
|
||||
<DataTable
|
||||
empty={{
|
||||
title: 'No groups found',
|
||||
description:
|
||||
'Groups represent companies, teams, or other entities that events belong to.',
|
||||
}}
|
||||
loading={isLoading}
|
||||
table={table}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
},
|
||||
arePropsEqual(['query.isLoading', 'query.data', 'pageSize', 'toolbarLeft'])
|
||||
);
|
||||
|
||||
function GroupsTableToolbar({
|
||||
table,
|
||||
toolbarLeft,
|
||||
}: {
|
||||
table: Table<IServiceGroupWithStats>;
|
||||
toolbarLeft?: React.ReactNode;
|
||||
}) {
|
||||
const { search, setSearch } = useSearchQueryState();
|
||||
return (
|
||||
<DataTableToolbarContainer>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{toolbarLeft}
|
||||
<AnimatedSearchInput
|
||||
onChange={setSearch}
|
||||
placeholder="Search groups..."
|
||||
value={search}
|
||||
/>
|
||||
</div>
|
||||
<DataTableViewOptions table={table} />
|
||||
</DataTableToolbarContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user