diff --git a/src/app/(main)/reports/[reportId]/BaseParameters.module.css b/src/app/(main)/reports/[reportId]/BaseParameters.module.css new file mode 100644 index 00000000..4750c7d7 --- /dev/null +++ b/src/app/(main)/reports/[reportId]/BaseParameters.module.css @@ -0,0 +1,3 @@ +.dropdown div { + max-height: 300px; +} diff --git a/src/app/(main)/reports/[reportId]/BaseParameters.tsx b/src/app/(main)/reports/[reportId]/BaseParameters.tsx index 49c3347e..77de51f3 100644 --- a/src/app/(main)/reports/[reportId]/BaseParameters.tsx +++ b/src/app/(main)/reports/[reportId]/BaseParameters.tsx @@ -5,6 +5,7 @@ import DateFilter from 'components/input/DateFilter'; import WebsiteSelect from 'components/input/WebsiteSelect'; import { useMessages, useTeamUrl, useWebsite } from 'components/hooks'; import { ReportContext } from './Report'; +import styles from './BaseParameters.module.css'; export interface BaseParametersProps { showWebsiteSelect?: boolean; @@ -48,7 +49,7 @@ export function BaseParameters({ )} {showDateSelect && ( - + {allowDateSelect && ( { const { startDate, endDate, steps, startStep, endStep } = filters; const { rawQuery } = prisma; - const { sequenceQuery, startStepQuery, endStepQuery, params } = getJourneyQuery( + const { sequenceQuery, startStepQuery, endStepQuery, finalSelectQuery, params } = getJourneyQuery( steps, startStep, endStep, @@ -57,12 +57,14 @@ async function relationalQuery( sequenceQuery: string; startStepQuery: string; endStepQuery: string; + finalSelectQuery: string; params: { [key: string]: string }; } { const params = {}; let sequenceQuery = ''; let startStepQuery = ''; let endStepQuery = ''; + let finalSelectQuery = ''; // create sequence query let selectQuery = ''; @@ -104,10 +106,18 @@ async function relationalQuery( params['endStep'] = endStep; } + // create final select query + for (let i = 1; i < steps; i++) { + finalSelectQuery += `\nCASE WHEN e${i} IS NOT NULL and e${ + i + 1 + } IS NULL THEN 'dropped off' ELSE e${i + 1} END AS e${i + 1},`; + } + return { sequenceQuery, startStepQuery, endStepQuery, + finalSelectQuery, params, }; } @@ -124,7 +134,9 @@ async function relationalQuery( where website_id = {{websiteId::uuid}} and created_at between {{startDate}} and {{endDate}}), ${sequenceQuery} - select * + select e1, + ${finalSelectQuery} + count from sequences where 1 = 1 ${startStepQuery} @@ -153,7 +165,7 @@ async function clickhouseQuery( ): Promise { const { startDate, endDate, steps, startStep, endStep } = filters; const { rawQuery } = clickhouse; - const { sequenceQuery, startStepQuery, endStepQuery, params } = getJourneyQuery( + const { sequenceQuery, startStepQuery, endStepQuery, finalSelectQuery, params } = getJourneyQuery( steps, startStep, endStep, @@ -167,12 +179,14 @@ async function clickhouseQuery( sequenceQuery: string; startStepQuery: string; endStepQuery: string; + finalSelectQuery: string; params: { [key: string]: string }; } { const params = {}; let sequenceQuery = ''; let startStepQuery = ''; let endStepQuery = ''; + let finalSelectQuery = ''; // create sequence query let selectQuery = ''; @@ -207,17 +221,25 @@ async function clickhouseQuery( if (endStep) { for (let i = 1; i < steps; i++) { const startQuery = i === 1 ? 'and (' : '\nor '; - endStepQuery += `${startQuery}(e${i} = {endStep:String} and e${i + 1} is null) `; + endStepQuery += `${startQuery}(e${i} = {endStep:String} and e${i + 1} = 'dropped off') `; } endStepQuery += `\nor (e${steps} = {endStep:String}))`; params['endStep'] = endStep; } + // create final select query + for (let i = 1; i < steps; i++) { + finalSelectQuery += `\nCASE WHEN e${i} IS NOT NULL and e${ + i + 1 + } IS NULL THEN 'dropped off' ELSE e${i + 1} END AS e${i + 1},`; + } + return { sequenceQuery, startStepQuery, endStepQuery, + finalSelectQuery, params, }; } @@ -233,7 +255,9 @@ async function clickhouseQuery( where website_id = {websiteId:UUID} and created_at between {startDate:DateTime64} and {endDate:DateTime64}), ${sequenceQuery} - select * + select e1, + ${finalSelectQuery} + count from sequences where 1 = 1 ${startStepQuery}