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-chart/funnel/index.tsx
+++ b/apps/start/src/components/report-chart/funnel/index.tsx
@@ -0,0 +1,102 @@
+import { useTRPC } from '@/integrations/trpc/react';
+import type { RouterOutputs } from '@/trpc/client';
+import { useQuery } from '@tanstack/react-query';
+
+import type { IChartInput } from '@openpanel/validation';
+
+import { AspectContainer } from '../aspect-container';
+import { ReportChartEmpty } from '../common/empty';
+import { ReportChartError } from '../common/error';
+import { ReportChartLoading } from '../common/loading';
+import { useReportChartContext } from '../context';
+import { Chart, Summary, Tables } from './chart';
+
+export function ReportFunnelChart() {
+  const {
+    report: {
+      events,
+      range,
+      projectId,
+      funnelWindow,
+      funnelGroup,
+      startDate,
+      endDate,
+      previous,
+      breakdowns,
+    },
+    isLazyLoading,
+  } = useReportChartContext();
+
+  const input: IChartInput = {
+    events,
+    range,
+    projectId,
+    interval: 'day',
+    chartType: 'funnel',
+    breakdowns,
+    funnelWindow,
+    funnelGroup,
+    previous,
+    metric: 'sum',
+    startDate,
+    endDate,
+  };
+  const trpc = useTRPC();
+  const res = useQuery(
+    trpc.chart.funnel.queryOptions(input, {
+      enabled: !isLazyLoading,
+    }),
+  );
+
+  if (isLazyLoading || res.isLoading) {
+    return <Loading />;
+  }
+
+  if (res.isError) {
+    return <Error />;
+  }
+
+  if (!res.data || res.data.current.length === 0) {
+    return <Empty />;
+  }
+
+  return (
+    <div className="col gap-4">
+      {res.data.current.length > 1 && <Summary data={res.data} />}
+      <Chart data={res.data} />
+      {res.data.current.map((item, index) => (
+        <Tables
+          key={item.id}
+          data={{
+            current: item,
+            previous: res.data.previous?.[index] ?? null,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+function Loading() {
+  return (
+    <AspectContainer>
+      <ReportChartLoading />
+    </AspectContainer>
+  );
+}
+
+function Error() {
+  return (
+    <AspectContainer>
+      <ReportChartError />
+    </AspectContainer>
+  );
+}
+
+function Empty() {
+  return (
+    <AspectContainer>
+      <ReportChartEmpty />
+    </AspectContainer>
+  );
+}