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/overview/overview-top-events.tsx
+++ b/apps/start/src/components/overview/overview-top-events.tsx
@@ -0,0 +1,184 @@
+import { ReportChart } from '@/components/report-chart';
+import { useEventQueryFilters } from '@/hooks/use-event-query-filters';
+import { cn } from '@/utils/cn';
+import { useState } from 'react';
+
+import type { IChartType } from '@openpanel/validation';
+
+import { useTRPC } from '@/integrations/trpc/react';
+import { useQuery } from '@tanstack/react-query';
+import { Widget, WidgetBody } from '../widget';
+import { OverviewChartToggle } from './overview-chart-toggle';
+import { WidgetButtons, WidgetFooter, WidgetHead } from './overview-widget';
+import { useOverviewOptions } from './useOverviewOptions';
+import { useOverviewWidget } from './useOverviewWidget';
+
+export interface OverviewTopEventsProps {
+  projectId: string;
+}
+export default function OverviewTopEvents({
+  projectId,
+}: OverviewTopEventsProps) {
+  const { interval, range, previous, startDate, endDate } =
+    useOverviewOptions();
+  const [filters] = useEventQueryFilters();
+  const trpc = useTRPC();
+  const { data: conversions } = useQuery(
+    trpc.event.conversionNames.queryOptions({ projectId }),
+  );
+  const [chartType, setChartType] = useState<IChartType>('bar');
+  const [widget, setWidget, widgets] = useOverviewWidget('ev', {
+    your: {
+      title: 'Top events',
+      btn: 'Your',
+      chart: {
+        report: {
+          limit: 10,
+          projectId,
+          startDate,
+          endDate,
+          events: [
+            {
+              segment: 'event',
+              filters: [
+                ...filters,
+                {
+                  id: 'ex_session',
+                  name: 'name',
+                  operator: 'isNot',
+                  value: ['session_start', 'session_end', 'screen_view'],
+                },
+              ],
+              id: 'A',
+              name: '*',
+            },
+          ],
+          breakdowns: [
+            {
+              id: 'A',
+              name: 'name',
+            },
+          ],
+          chartType,
+          lineType: 'monotone',
+          interval: interval,
+          name: 'Your top events',
+          range: range,
+          previous: previous,
+          metric: 'sum',
+        },
+      },
+    },
+    all: {
+      title: 'Top events',
+      btn: 'All',
+      chart: {
+        report: {
+          limit: 10,
+          projectId,
+          startDate,
+          endDate,
+          events: [
+            {
+              segment: 'event',
+              filters: [...filters],
+              id: 'A',
+              name: '*',
+            },
+          ],
+          breakdowns: [
+            {
+              id: 'A',
+              name: 'name',
+            },
+          ],
+          chartType,
+          lineType: 'monotone',
+          interval: interval,
+          name: 'All top events',
+          range: range,
+          previous: previous,
+          metric: 'sum',
+        },
+      },
+    },
+    conversions: {
+      title: 'Conversions',
+      btn: 'Conversions',
+      hide: !conversions || conversions.length === 0,
+      chart: {
+        report: {
+          limit: 10,
+          projectId,
+          startDate,
+          endDate,
+          events: [
+            {
+              segment: 'event',
+              filters: [
+                ...filters,
+                {
+                  id: 'conversion',
+                  name: 'name',
+                  operator: 'is',
+                  value: conversions?.map((c) => c.name) ?? [],
+                },
+              ],
+              id: 'A',
+              name: '*',
+            },
+          ],
+          breakdowns: [
+            {
+              id: 'A',
+              name: 'name',
+            },
+          ],
+          chartType,
+          lineType: 'monotone',
+          interval: interval,
+          name: 'Conversions',
+          range: range,
+          previous: previous,
+          metric: 'sum',
+        },
+      },
+    },
+  });
+
+  return (
+    <>
+      <Widget className="col-span-6 md:col-span-3">
+        <WidgetHead>
+          <div className="title">{widget.title}</div>
+          <WidgetButtons>
+            {widgets
+              .filter((item) => item.hide !== true)
+              .map((w) => (
+                <button
+                  type="button"
+                  key={w.key}
+                  onClick={() => setWidget(w.key)}
+                  className={cn(w.key === widget.key && 'active')}
+                >
+                  {w.btn}
+                </button>
+              ))}
+          </WidgetButtons>
+        </WidgetHead>
+        <WidgetBody className="p-3">
+          <ReportChart
+            options={{ hideID: true, columns: ['Event', 'Count'] }}
+            report={{
+              ...widget.chart.report,
+              previous: false,
+            }}
+          />
+        </WidgetBody>
+        <WidgetFooter>
+          <OverviewChartToggle {...{ chartType, setChartType }} />
+        </WidgetFooter>
+      </Widget>
+    </>
+  );
+}