feat: separate your events and all events on overview

apps/dashboard/src/components/overview/overview-latest-events/index.tsx

@@ -1,16 +0,0 @@
-import { getConversionEventNames } from '@openpanel/db';
-
-import type { OverviewLatestEventsProps } from './overview-latest-events';
-import OverviewLatestEvents from './overview-latest-events';
-
-export default async function OverviewLatestEventsServer({
-  projectId,
-}: Omit<OverviewLatestEventsProps, 'conversions'>) {
-  const eventNames = await getConversionEventNames(projectId);
-  return (
-    <OverviewLatestEvents
-      projectId={projectId}
-      conversions={eventNames.map((item) => item.name)}
-    />
-  );
-}

apps/dashboard/src/components/overview/overview-latest-events/overview-latest-events.tsx

@@ -1,130 +0,0 @@
-'use client';
-
-import { LazyChart } from '@/components/report/chart/LazyChart';
-import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
-import { cn } from '@/utils/cn';
-
-import { Widget, WidgetBody } from '../../widget';
-import OverviewDetailsButton from '../overview-details-button';
-import { WidgetButtons, WidgetHead } from '../overview-widget';
-import { useOverviewOptions } from '../useOverviewOptions';
-import { useOverviewWidget } from '../useOverviewWidget';
-
-export interface OverviewLatestEventsProps {
-  projectId: string;
-  conversions: string[];
-}
-export default function OverviewLatestEvents({
-  projectId,
-  conversions,
-}: OverviewLatestEventsProps) {
-  const { interval, range, previous, startDate, endDate } =
-    useOverviewOptions();
-  const [filters] = useEventQueryFilters();
-  const [widget, setWidget, widgets] = useOverviewWidget('ev', {
-    all: {
-      title: 'Top events',
-      btn: 'All',
-      chart: {
-        projectId,
-        startDate,
-        endDate,
-        events: [
-          {
-            segment: 'event',
-            filters: [
-              ...filters,
-              {
-                id: 'ex_session',
-                name: 'name',
-                operator: 'isNot',
-                value: ['session_start', 'session_end'],
-              },
-            ],
-            id: 'A',
-            name: '*',
-          },
-        ],
-        breakdowns: [
-          {
-            id: 'A',
-            name: 'name',
-          },
-        ],
-        chartType: 'bar',
-        lineType: 'monotone',
-        interval: interval,
-        name: 'Top sources',
-        range: range,
-        previous: previous,
-        metric: 'sum',
-      },
-    },
-    conversions: {
-      title: 'Conversions',
-      btn: 'Conversions',
-      hide: conversions.length === 0,
-      chart: {
-        projectId,
-        startDate,
-        endDate,
-        events: [
-          {
-            segment: 'event',
-            filters: [
-              ...filters,
-              {
-                id: 'conversion',
-                name: 'name',
-                operator: 'is',
-                value: conversions,
-              },
-            ],
-            id: 'A',
-            name: '*',
-          },
-        ],
-        breakdowns: [
-          {
-            id: 'A',
-            name: 'name',
-          },
-        ],
-        chartType: 'bar',
-        lineType: 'monotone',
-        interval: interval,
-        name: 'Top sources',
-        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
-                  key={w.key}
-                  onClick={() => setWidget(w.key)}
-                  className={cn(w.key === widget.key && 'active')}
-                >
-                  {w.btn}
-                </button>
-              ))}
-          </WidgetButtons>
-        </WidgetHead>
-        <WidgetBody>
-          <LazyChart hideID {...widget.chart} previous={false} />
-          <OverviewDetailsButton chart={widget.chart} />
-        </WidgetBody>
-      </Widget>
-    </>
-  );
-}

apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx

@@ -27,9 +27,9 @@ export default function OverviewTopEvents({
   const [filters] = useEventQueryFilters();
   const [chartType, setChartType] = useState<IChartType>('bar');
   const [widget, setWidget, widgets] = useOverviewWidget('ev', {
-    all: {
+    your: {
       title: 'Top events',
-      btn: 'All',
+      btn: 'Your',
       chart: {
         projectId,
         startDate,
@@ -43,7 +43,7 @@ export default function OverviewTopEvents({
                 id: 'ex_session',
                 name: 'name',
                 operator: 'isNot',
-                value: ['session_start', 'session_end'],
+                value: ['session_start', 'session_end', 'screen_view'],
               },
             ],
             id: 'A',
@@ -65,6 +65,36 @@ export default function OverviewTopEvents({
         metric: 'sum',
       },
     },
+    all: {
+      title: 'Top events',
+      btn: 'All',
+      chart: {
+        projectId,
+        startDate,
+        endDate,
+        events: [
+          {
+            segment: 'event',
+            filters: [...filters],
+            id: 'A',
+            name: '*',
+          },
+        ],
+        breakdowns: [
+          {
+            id: 'A',
+            name: 'name',
+          },
+        ],
+        chartType,
+        lineType: 'monotone',
+        interval: interval,
+        name: 'Top sources',
+        range: range,
+        previous: previous,
+        metric: 'sum',
+      },
+    },
     conversions: {
       title: 'Conversions',
       btn: 'Conversions',