add funnels

apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx

@@ -2,7 +2,7 @@
 
 import { WidgetHead } from '@/components/overview/overview-widget';
 import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
-import { Chart } from '@/components/report/chart';
+import { ChartSwitch } from '@/components/report/chart';
 import { Widget, WidgetBody } from '@/components/Widget';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
@@ -186,7 +186,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
             setMetric(index);
           }}
         >
-          <Chart hideID {...report} />
+          <ChartSwitch hideID {...report} />
           <div
             className={cn(
               'transition-opacity top-0 left-0 right-0 bottom-0 absolute rounded-md w-full h-full border ring-1 border-chart-0 ring-chart-0',
@@ -201,7 +201,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
           <div className="title">{selectedMetric.events[0]?.displayName}</div>
         </WidgetHead>
         <WidgetBody>
-          <Chart
+          <ChartSwitch
             key={selectedMetric.id}
             hideID
             {...selectedMetric}

apps/web/src/app/(app)/[organizationId]/[projectId]/profiles/[profileId]/page.tsx

@@ -3,7 +3,7 @@ import { ListProperties } from '@/components/events/ListProperties';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
 import { ProfileAvatar } from '@/components/profiles/ProfileAvatar';
-import { Chart } from '@/components/report/chart';
+import { ChartSwitch } from '@/components/report/chart';
 import { GradientBackground } from '@/components/ui/gradient-background';
 import { KeyValue } from '@/components/ui/key-value';
 import { Widget, WidgetBody, WidgetHead } from '@/components/Widget';
@@ -162,7 +162,7 @@ export default async function Page({
               <span className="title">Events per day</span>
             </WidgetHead>
             <WidgetBody className="flex gap-2">
-              <Chart {...profileChart} />
+              <ChartSwitch {...profileChart} />
             </WidgetBody>
           </Widget>
         </div>

apps/web/src/app/(app)/[organizationId]/[projectId]/reports/report-editor.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 import { StickyBelowHeader } from '@/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header';
-import { Chart } from '@/components/report/chart';
+import { ChartSwitch } from '@/components/report/chart';
 import { ReportChartType } from '@/components/report/ReportChartType';
 import { ReportInterval } from '@/components/report/ReportInterval';
 import { ReportLineType } from '@/components/report/ReportLineType';
@@ -74,7 +74,9 @@ export default function ReportEditor({
         </div>
       </StickyBelowHeader>
       <div className="flex flex-col gap-4 p-4">
-        {report.ready && <Chart {...report} projectId={projectId} editMode />}
+        {report.ready && (
+          <ChartSwitch {...report} projectId={projectId} editMode />
+        )}
       </div>
       <SheetContent className="!max-w-lg w-full" side="left">
         <ReportSidebar />

apps/web/src/app/(app)/[organizationId]/[projectId]/test/page.tsx

@@ -0,0 +1,21 @@
+import { Funnel } from '@/components/report/funnel';
+
+import PageLayout from '../page-layout';
+
+export const metadata = {
+  title: 'Funnel - Openpanel.dev',
+};
+
+interface PageProps {
+  params: {
+    organizationId: string;
+  };
+}
+
+export default function Page({ params: { organizationId } }: PageProps) {
+  return (
+    <PageLayout title="Funnel" organizationSlug={organizationId}>
+      <Funnel />
+    </PageLayout>
+  );
+}