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
2025-10-16 12:27:44 +02:00
parent 436e81ecc9
commit 81a7e5d62e
741 changed files with 32695 additions and 16996 deletions
--- a/apps/start/src/components/report/ReportSegment.tsx
+++ b/apps/start/src/components/report/ReportSegment.tsx
@@ -0,0 +1,92 @@
+import {
+  ActivityIcon,
+  ClockIcon,
+  EqualApproximatelyIcon,
+  type LucideIcon,
+  SigmaIcon,
+  TrendingDownIcon,
+  TrendingUpIcon,
+  UserCheck2Icon,
+  UserCheckIcon,
+  UsersIcon,
+} from 'lucide-react';
+
+import { chartSegments } from '@openpanel/constants';
+import { type IChartEventSegment, mapKeys } from '@openpanel/validation';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/utils/cn';
+import { Button } from '../ui/button';
+
+interface ReportChartTypeProps {
+  className?: string;
+  value: IChartEventSegment;
+  onChange: (segment: IChartEventSegment) => void;
+}
+export function ReportSegment({
+  className,
+  value,
+  onChange,
+}: ReportChartTypeProps) {
+  const items = mapKeys(chartSegments).map((key) => ({
+    label: chartSegments[key],
+    value: key,
+  }));
+
+  const Icons: Record<IChartEventSegment, LucideIcon> = {
+    event: ActivityIcon,
+    user: UsersIcon,
+    session: ClockIcon,
+    user_average: UserCheck2Icon,
+    one_event_per_user: UserCheckIcon,
+    property_sum: SigmaIcon,
+    property_average: EqualApproximatelyIcon,
+    property_max: TrendingUpIcon,
+    property_min: TrendingDownIcon,
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          icon={Icons[value]}
+          className={cn('justify-start text-sm', className)}
+        >
+          {items.find((item) => item.value === value)?.label}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Available charts</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+
+        <DropdownMenuGroup>
+          {items.map((item) => {
+            const Icon = Icons[item.value];
+            return (
+              <DropdownMenuItem
+                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" />
+                </DropdownMenuShortcut>
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}