feat: add properties & activity to event filtering

src/app/(main)/websites/[websiteId]/events/EventProperties.tsx

@@ -6,12 +6,13 @@ import { useState } from 'react';
 import { CHART_COLORS } from '@/lib/constants';
 import styles from './EventProperties.module.css';
 
-export function EventProperties({ websiteId }: { websiteId: string }) {
+export function EventProperties({ websiteId, label }: { websiteId: string; label: string }) {
   const [propertyName, setPropertyName] = useState('');
   const [eventName, setEventName] = useState('');
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useEventDataProperties(websiteId);
+  const { data: eventData = [], isLoading, isFetched, error } = useEventDataProperties(websiteId);
   const { data: values } = useEventDataValues(websiteId, eventName, propertyName);
+  const data = label ? eventData.filter(({ eventName }) => eventName === label) : eventData;
   const chartData =
     propertyName && values
       ? {

src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx

@@ -5,8 +5,10 @@ import { ReactNode } from 'react';
 
 export default function EventsDataTable({
   websiteId,
+  label,
 }: {
   websiteId?: string;
+  label?: string;
   teamId?: string;
   children?: ReactNode;
 }) {
@@ -14,7 +16,10 @@ export default function EventsDataTable({
 
   return (
     <DataTable queryResult={queryResult} allowSearch={true} autoFocus={false}>
-      {({ data }) => <EventsTable data={data} />}
+      {({ data: eventData = [] }) => {
+        const data = label ? eventData.filter(({ eventName }) => eventName === label) : eventData;
+        return <EventsTable data={data} />;
+      }}
     </DataTable>
   );
 }

src/app/(main)/websites/[websiteId]/events/EventsPage.tsx

@@ -42,8 +42,8 @@ export default function EventsPage({ websiteId }) {
           <Item key="activity">{formatMessage(labels.activity)}</Item>
           <Item key="properties">{formatMessage(labels.properties)}</Item>
         </Tabs>
-        {tab === 'activity' && <EventsDataTable websiteId={websiteId} />}
+        {tab === 'activity' && <EventsDataTable websiteId={websiteId} label={label} />}
-        {tab === 'properties' && <EventProperties websiteId={websiteId} />}
+        {tab === 'properties' && <EventProperties websiteId={websiteId} label={label} />}
       </div>
     </>
   );