feat: group analytics

* wip * wip * wip * wip * wip * add buffer * wip * wip * fixes * fix * wip * group validation * fix group issues * docs: add groups
2026-03-20 10:46:09 +01:00
parent 88a2d876ce
commit 11e9ecac1a
99 changed files with 5944 additions and 1432 deletions
--- a/apps/start/src/components/report/ReportSegment.tsx
+++ b/apps/start/src/components/report/ReportSegment.tsx
@@ -1,5 +1,8 @@
+import { chartSegments } from '@openpanel/constants';
+import { type IChartEventSegment, mapKeys } from '@openpanel/validation';
 import {
  ActivityIcon,
+  Building2Icon,
  ClockIcon,
  EqualApproximatelyIcon,
  type LucideIcon,
@@ -10,10 +13,7 @@ import {
  UserCheckIcon,
  UsersIcon,
 } from 'lucide-react';
-
-import { chartSegments } from '@openpanel/constants';
-import { type IChartEventSegment, mapKeys } from '@openpanel/validation';
-
+import { Button } from '../ui/button';
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -25,7 +25,6 @@ import {
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { cn } from '@/utils/cn';
-import { Button } from '../ui/button';

 interface ReportChartTypeProps {
  className?: string;
@@ -46,6 +45,7 @@ export function ReportSegment({
    event: ActivityIcon,
    user: UsersIcon,
    session: ClockIcon,
+    group: Building2Icon,
    user_average: UserCheck2Icon,
    one_event_per_user: UserCheckIcon,
    property_sum: SigmaIcon,
@@ -58,9 +58,9 @@ export function ReportSegment({
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
-          variant="outline"
-          icon={Icons[value]}
          className={cn('justify-start text-sm', className)}
+          icon={Icons[value]}
+          variant="outline"
        >
          {items.find((item) => item.value === value)?.label}
        </Button>
@@ -74,13 +74,13 @@ export function ReportSegment({
            const Icon = Icons[item.value];
            return (
              <DropdownMenuItem
+                className="group"
                key={item.value}
                onClick={() => onChange(item.value)}
-                className="group"
              >
                {item.label}
                <DropdownMenuShortcut>
-                  <Icon className="size-4 group-hover:text-blue-500 group-hover:scale-125 transition-all group-hover:rotate-12" />
+                  <Icon className="size-4 transition-all group-hover:rotate-12 group-hover:scale-125 group-hover:text-blue-500" />
                </DropdownMenuShortcut>
              </DropdownMenuItem>
            );
--- a/apps/start/src/components/report/sidebar/PropertiesCombobox.tsx
+++ b/apps/start/src/components/report/sidebar/PropertiesCombobox.tsx
@@ -1,3 +1,14 @@
+import type { IChartEvent } from '@openpanel/validation';
+import { useQuery } from '@tanstack/react-query';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  ArrowLeftIcon,
+  Building2Icon,
+  DatabaseIcon,
+  UserIcon,
+} from 'lucide-react';
+import VirtualList from 'rc-virtual-list';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import {
  DropdownMenu,
@@ -10,11 +21,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { useAppParams } from '@/hooks/use-app-params';
 import { useEventProperties } from '@/hooks/use-event-properties';
-import type { IChartEvent } from '@openpanel/validation';
-import { AnimatePresence, motion } from 'framer-motion';
-import { ArrowLeftIcon, DatabaseIcon, UserIcon } from 'lucide-react';
-import VirtualList from 'rc-virtual-list';
-import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+import { useTRPC } from '@/integrations/trpc/react';

 interface PropertiesComboboxProps {
  event?: IChartEvent;
@@ -40,15 +47,15 @@ function SearchHeader({
  return (
    <div className="row items-center gap-1">
      {!!onBack && (
-        <Button variant="ghost" size="icon" onClick={onBack}>
+        <Button onClick={onBack} size="icon" variant="ghost">
          <ArrowLeftIcon className="size-4" />
        </Button>
      )}
      <Input
+        autoFocus
+        onChange={(e) => onSearch(e.target.value)}
        placeholder="Search"
        value={value}
-        onChange={(e) => onSearch(e.target.value)}
-        autoFocus
      />
    </div>
  );
@@ -62,18 +69,24 @@ export function PropertiesCombobox({
  exclude = [],
 }: PropertiesComboboxProps) {
  const { projectId } = useAppParams();
+  const trpc = useTRPC();
  const [open, setOpen] = useState(false);
  const properties = useEventProperties({
    event: event?.name,
    projectId,
  });
-  const [state, setState] = useState<'index' | 'event' | 'profile'>('index');
+  const groupPropertiesQuery = useQuery(
+    trpc.group.properties.queryOptions({ projectId })
+  );
+  const [state, setState] = useState<'index' | 'event' | 'profile' | 'group'>(
+    'index'
+  );
  const [search, setSearch] = useState('');
  const [direction, setDirection] = useState<'forward' | 'backward'>('forward');

  useEffect(() => {
    if (!open) {
-      setState(!mode ? 'index' : mode === 'events' ? 'event' : 'profile');
+      setState(mode ? (mode === 'events' ? 'event' : 'profile') : 'index');
    }
  }, [open, mode]);

@@ -86,11 +99,21 @@ export function PropertiesCombobox({
    });
  };

-  // Mock data for the lists
+  // Fixed group properties: name, type, plus dynamic property keys
+  const groupActions = [
+    { value: 'group.name', label: 'name', description: 'group' },
+    { value: 'group.type', label: 'type', description: 'group' },
+    ...(groupPropertiesQuery.data ?? []).map((key) => ({
+      value: `group.properties.${key}`,
+      label: key,
+      description: 'group.properties',
+    })),
+  ].filter((a) => shouldShowProperty(a.value));
+
  const profileActions = properties
    .filter(
      (property) =>
-        property.startsWith('profile') && shouldShowProperty(property),
+        property.startsWith('profile') && shouldShowProperty(property)
    )
    .map((property) => ({
      value: property,
@@ -100,7 +123,7 @@ export function PropertiesCombobox({
  const eventActions = properties
    .filter(
      (property) =>
-        !property.startsWith('profile') && shouldShowProperty(property),
+        !property.startsWith('profile') && shouldShowProperty(property)
    )
    .map((property) => ({
      value: property,
@@ -108,7 +131,9 @@ export function PropertiesCombobox({
      description: property.split('.').slice(0, -1).join('.'),
    }));

-  const handleStateChange = (newState: 'index' | 'event' | 'profile') => {
+  const handleStateChange = (
+    newState: 'index' | 'event' | 'profile' | 'group'
+  ) => {
    setDirection(newState === 'index' ? 'backward' : 'forward');
    setState(newState);
  };
@@ -135,7 +160,7 @@ export function PropertiesCombobox({
          }}
        >
          Event properties
-          <DatabaseIcon className="size-4 group-hover:text-blue-500 group-hover:scale-125 transition-all group-hover:rotate-12" />
+          <DatabaseIcon className="size-4 transition-all group-hover:rotate-12 group-hover:scale-125 group-hover:text-blue-500" />
        </DropdownMenuItem>
        <DropdownMenuItem
          className="group justify-between gap-2"
@@ -145,7 +170,17 @@ export function PropertiesCombobox({
          }}
        >
          Profile properties
-          <UserIcon className="size-4 group-hover:text-blue-500 group-hover:scale-125 transition-all group-hover:rotate-12" />
+          <UserIcon className="size-4 transition-all group-hover:rotate-12 group-hover:scale-125 group-hover:text-blue-500" />
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="group justify-between gap-2"
+          onClick={(e) => {
+            e.preventDefault();
+            handleStateChange('group');
+          }}
+        >
+          Group properties
+          <Building2Icon className="size-4 transition-all group-hover:rotate-12 group-hover:scale-125 group-hover:text-blue-500" />
        </DropdownMenuItem>
      </DropdownMenuGroup>
    );
@@ -155,7 +190,7 @@ export function PropertiesCombobox({
    const filteredActions = eventActions.filter(
      (action) =>
        action.label.toLowerCase().includes(search.toLowerCase()) ||
-        action.description.toLowerCase().includes(search.toLowerCase()),
+        action.description.toLowerCase().includes(search.toLowerCase())
    );

    return (
@@ -169,20 +204,20 @@ export function PropertiesCombobox({
        />
        <DropdownMenuSeparator />
        <VirtualList
-          height={300}
          data={filteredActions}
+          height={300}
          itemHeight={40}
          itemKey="id"
        >
          {(action) => (
            <motion.div
-              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
-              className="p-2 hover:bg-accent cursor-pointer rounded-md col gap-px"
+              className="col cursor-pointer gap-px rounded-md p-2 hover:bg-accent"
+              initial={{ opacity: 0, y: 10 }}
              onClick={() => handleSelect(action)}
            >
              <div className="font-medium">{action.label}</div>
-              <div className="text-sm text-muted-foreground">
+              <div className="text-muted-foreground text-sm">
                {action.description}
              </div>
            </motion.div>
@@ -196,7 +231,7 @@ export function PropertiesCombobox({
    const filteredActions = profileActions.filter(
      (action) =>
        action.label.toLowerCase().includes(search.toLowerCase()) ||
-        action.description.toLowerCase().includes(search.toLowerCase()),
+        action.description.toLowerCase().includes(search.toLowerCase())
    );

    return (
@@ -208,20 +243,59 @@ export function PropertiesCombobox({
        />
        <DropdownMenuSeparator />
        <VirtualList
-          height={300}
          data={filteredActions}
+          height={300}
          itemHeight={40}
          itemKey="id"
        >
          {(action) => (
            <motion.div
-              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
-              className="p-2 hover:bg-accent cursor-pointer rounded-md col gap-px"
+              className="col cursor-pointer gap-px rounded-md p-2 hover:bg-accent"
+              initial={{ opacity: 0, y: 10 }}
              onClick={() => handleSelect(action)}
            >
              <div className="font-medium">{action.label}</div>
-              <div className="text-sm text-muted-foreground">
+              <div className="text-muted-foreground text-sm">
+                {action.description}
+              </div>
+            </motion.div>
+          )}
+        </VirtualList>
+      </div>
+    );
+  };
+
+  const renderGroup = () => {
+    const filteredActions = groupActions.filter(
+      (action) =>
+        action.label.toLowerCase().includes(search.toLowerCase()) ||
+        action.description.toLowerCase().includes(search.toLowerCase())
+    );
+
+    return (
+      <div className="flex flex-col">
+        <SearchHeader
+          onBack={() => handleStateChange('index')}
+          onSearch={setSearch}
+          value={search}
+        />
+        <DropdownMenuSeparator />
+        <VirtualList
+          data={filteredActions}
+          height={Math.min(300, filteredActions.length * 40 + 8)}
+          itemHeight={40}
+          itemKey="value"
+        >
+          {(action) => (
+            <motion.div
+              animate={{ opacity: 1, y: 0 }}
+              className="col cursor-pointer gap-px rounded-md p-2 hover:bg-accent"
+              initial={{ opacity: 0, y: 10 }}
+              onClick={() => handleSelect(action)}
+            >
+              <div className="font-medium">{action.label}</div>
+              <div className="text-muted-foreground text-sm">
                {action.description}
              </div>
            </motion.div>
@@ -233,20 +307,20 @@ export function PropertiesCombobox({

  return (
    <DropdownMenu
-      open={open}
      onOpenChange={(open) => {
        setOpen(open);
      }}
+      open={open}
    >
      <DropdownMenuTrigger asChild>{children(setOpen)}</DropdownMenuTrigger>
-      <DropdownMenuContent className="max-w-80" align="start">
-        <AnimatePresence mode="wait" initial={false}>
+      <DropdownMenuContent align="start" className="max-w-80">
+        <AnimatePresence initial={false} mode="wait">
          {state === 'index' && (
            <motion.div
-              key="index"
-              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
+              initial={{ opacity: 0 }}
+              key="index"
              transition={{ duration: 0.05 }}
            >
              {renderIndex()}
@@ -254,10 +328,10 @@ export function PropertiesCombobox({
          )}
          {state === 'event' && (
            <motion.div
-              key="event"
-              initial={{ opacity: 0, x: direction === 'forward' ? 20 : -20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: direction === 'forward' ? -20 : 20 }}
+              initial={{ opacity: 0, x: direction === 'forward' ? 20 : -20 }}
+              key="event"
              transition={{ duration: 0.05 }}
            >
              {renderEvent()}
@@ -265,15 +339,26 @@ export function PropertiesCombobox({
          )}
          {state === 'profile' && (
            <motion.div
-              key="profile"
-              initial={{ opacity: 0, x: direction === 'forward' ? 20 : -20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: direction === 'forward' ? -20 : 20 }}
+              initial={{ opacity: 0, x: direction === 'forward' ? 20 : -20 }}
+              key="profile"
              transition={{ duration: 0.05 }}
            >
              {renderProfile()}
            </motion.div>
          )}
+          {state === 'group' && (
+            <motion.div
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: direction === 'forward' ? -20 : 20 }}
+              initial={{ opacity: 0, x: direction === 'forward' ? 20 : -20 }}
+              key="group"
+              transition={{ duration: 0.05 }}
+            >
+              {renderGroup()}
+            </motion.div>
+          )}
        </AnimatePresence>
      </DropdownMenuContent>
    </DropdownMenu>