add event type filter button and implementation to journeys Close #2803

src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx

@@ -21,9 +21,15 @@ export interface JourneyProps {
   steps: number;
   startStep?: string;
   endStep?: string;
+  view: string;
 }
 
-export function Journey({ websiteId, steps, startStep, endStep }: JourneyProps) {
+const EVENT_TYPES = {
+  views: 1,
+  events: 2,
+};
+
+export function Journey({ websiteId, steps, startStep, endStep, view }: JourneyProps) {
   const [selectedNode, setSelectedNode] = useState(null);
   const [activeNode, setActiveNode] = useState(null);
   const { formatMessage, labels } = useMessages();
@@ -32,6 +38,8 @@ export function Journey({ websiteId, steps, startStep, endStep }: JourneyProps)
     steps,
     startStep,
     endStep,
+    view,
+    eventType: EVENT_TYPES[view],
   });
 
   useEscapeKey(() => setSelectedNode(null));

src/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage.tsx

@@ -1,5 +1,6 @@
 'use client';
-import { Column, Grid, ListItem, SearchField, Select } from '@umami/react-zen';
+import { Column, Grid, ListItem, Row, SearchField, Select } from '@umami/react-zen';
+import { FilterButtons } from 'dist';
 import { useState } from 'react';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { Panel } from '@/components/common/Panel';
@@ -14,10 +15,26 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
   const {
     dateRange: { startDate, endDate },
   } = useDateRange();
+  const [view, setView] = useState('all');
   const [steps, setSteps] = useState(DEFAULT_STEP);
   const [startStep, setStartStep] = useState('');
   const [endStep, setEndStep] = useState('');
 
+  const buttons = [
+    {
+      id: 'all',
+      label: formatMessage(labels.all),
+    },
+    {
+      id: 'views',
+      label: formatMessage(labels.views),
+    },
+    {
+      id: 'events',
+      label: formatMessage(labels.events),
+    },
+  ];
+
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
@@ -52,6 +69,9 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
           />
         </Column>
       </Grid>
+      <Row justifyContent="flex-end">
+        <FilterButtons items={buttons} value={view} onChange={setView} />
+      </Row>
       <Panel height="900px" allowFullscreen>
         <Journey
           websiteId={websiteId}
@@ -60,6 +80,7 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
           steps={steps}
           startStep={startStep}
           endStep={endStep}
+          view={view}
         />
       </Panel>
     </Column>

src/app/api/reports/journey/route.ts

@@ -12,11 +12,16 @@ export async function POST(request: Request) {
   }
 
   const { websiteId, parameters, filters } = body;
+  const { eventType } = parameters;
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
+  if (eventType) {
+    filters.eventType = eventType;
+  }
+
   const queryFilters = await getQueryFilters(filters, websiteId);
 
   const data = await getJourney(websiteId, parameters, queryFilters);

src/lib/schema.ts

@@ -166,6 +166,7 @@ export const journeyReportSchema = z.object({
     steps: z.coerce.number().min(2).max(7),
     startStep: z.string().optional(),
     endStep: z.string().optional(),
+    eventType: z.coerce.number().int().positive().optional(),
   }),
 });
 

src/queries/sql/reports/getJourney.ts

@@ -60,7 +60,7 @@ async function relationalQuery(
     endStepQuery: string;
     params: Record<string, string>;
   } {
-    const params = {};
+    const params: { startStep?: string; endStep?: string } = {};
     let sequenceQuery = '';
     let startStepQuery = '';
     let endStepQuery = '';
@@ -172,7 +172,7 @@ async function clickhouseQuery(
     endStepQuery: string;
     params: Record<string, string>;
   } {
-    const params = {};
+    const params: { startStep?: string; endStep?: string } = {};
     let sequenceQuery = '';
     let startStepQuery = '';
     let endStepQuery = '';