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/profiles/profile-charts.tsx
+++ b/apps/start/src/components/profiles/profile-charts.tsx
@@ -0,0 +1,105 @@
+import { ReportChart } from '@/components/report-chart';
+import { Widget, WidgetBody } from '@/components/widget';
+import { memo } from 'react';
+
+import type { IChartProps } from '@openpanel/validation';
+import { WidgetHead } from '../overview/overview-widget';
+
+type Props = {
+  profileId: string;
+  projectId: string;
+};
+
+export const ProfileCharts = memo(
+  ({ profileId, projectId }: Props) => {
+    const pageViewsChart: IChartProps = {
+      projectId,
+      chartType: 'linear',
+      events: [
+        {
+          segment: 'event',
+          filters: [
+            {
+              id: 'profile_id',
+              name: 'profile_id',
+              operator: 'is',
+              value: [profileId],
+            },
+          ],
+          id: 'A',
+          name: 'screen_view',
+          displayName: 'Events',
+        },
+      ],
+      breakdowns: [
+        {
+          id: 'path',
+          name: 'path',
+        },
+      ],
+      lineType: 'monotone',
+      interval: 'day',
+      name: 'Events',
+      range: '30d',
+      previous: false,
+      metric: 'sum',
+    };
+
+    const eventsChart: IChartProps = {
+      projectId,
+      chartType: 'linear',
+      events: [
+        {
+          segment: 'event',
+          filters: [
+            {
+              id: 'profile_id',
+              name: 'profile_id',
+              operator: 'is',
+              value: [profileId],
+            },
+          ],
+          id: 'A',
+          name: '*',
+          displayName: 'Events',
+        },
+      ],
+      breakdowns: [
+        {
+          id: 'name',
+          name: 'name',
+        },
+      ],
+      lineType: 'monotone',
+      interval: 'day',
+      name: 'Events',
+      range: '30d',
+      previous: false,
+      metric: 'sum',
+    };
+
+    return (
+      <>
+        <Widget className="col-span-6 md:col-span-3">
+          <WidgetHead>
+            <span className="title">Page views</span>
+          </WidgetHead>
+          <WidgetBody>
+            <ReportChart report={pageViewsChart} />
+          </WidgetBody>
+        </Widget>
+        <Widget className="col-span-6 md:col-span-3">
+          <WidgetHead>
+            <span className="title">Events per day</span>
+          </WidgetHead>
+          <WidgetBody>
+            <ReportChart report={eventsChart} />
+          </WidgetBody>
+        </Widget>
+      </>
+    );
+  },
+  (a, b) => {
+    return a.profileId === b.profileId && a.projectId === b.projectId;
+  },
+);