finish clickhouse journeys query

src/app/(main)/reports/[reportId]/ReportPage.tsx

@@ -1,11 +1,12 @@
 'use client';
-import FunnelReport from '../funnel/FunnelReport';
+import { useReport } from 'components/hooks';
 import EventDataReport from '../event-data/EventDataReport';
+import FunnelReport from '../funnel/FunnelReport';
+import GoalReport from '../goals/GoalsReport';
 import InsightsReport from '../insights/InsightsReport';
+import JourneyReport from '../journey/JourneyReport';
 import RetentionReport from '../retention/RetentionReport';
 import UTMReport from '../utm/UTMReport';
-import GoalReport from '../goals/GoalsReport';
-import { useReport } from 'components/hooks';
 
 const reports = {
   funnel: FunnelReport,
@@ -14,6 +15,7 @@ const reports = {
   retention: RetentionReport,
   utm: UTMReport,
   goals: GoalReport,
+  journey: JourneyReport,
 };
 
 export default function ReportPage({ reportId }: { reportId: string }) {

src/app/(main)/reports/journey/JourneyParameters.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { useMessages } from 'components/hooks';
-import { Form, FormButtons, SubmitButton } from 'react-basics';
+import { Form, FormButtons, FormInput, FormRow, SubmitButton, TextField } from 'react-basics';
 import { ReportContext } from '../[reportId]/Report';
 import BaseParameters from '../[reportId]/BaseParameters';
 
@@ -9,8 +9,8 @@ export function JourneyParameters() {
   const { formatMessage, labels } = useMessages();
 
   const { id, parameters } = report || {};
-  const { websiteId, dateRange } = parameters || {};
-  const queryDisabled = !websiteId || !dateRange;
+  const { websiteId, dateRange, steps } = parameters || {};
+  const queryDisabled = !websiteId || !dateRange || !steps;
 
   const handleSubmit = (data: any, e: any) => {
     e.stopPropagation();
@@ -24,6 +24,24 @@ export function JourneyParameters() {
   return (
     <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
       <BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
+      <FormRow label={`${formatMessage(labels.steps)} (3 to 7)`}>
+        <FormInput
+          name="steps"
+          rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/, min: 3, max: 7 }}
+        >
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.startStep)}>
+        <FormInput name="startStep">
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.endStep)}>
+        <FormInput name="endStep">
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
       <FormButtons>
         <SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>
           {formatMessage(labels.runQuery)}

src/app/(main)/reports/journey/JourneyReport.tsx

@@ -10,7 +10,7 @@ import { REPORT_TYPES } from 'lib/constants';
 
 const defaultParameters = {
   type: REPORT_TYPES.journey,
-  parameters: {},
+  parameters: { steps: 5 },
 };
 
 export default function JourneyReport({ reportId }: { reportId?: string }) {

src/app/(main)/reports/journey/JourneyView.tsx

@@ -8,14 +8,13 @@ import { useEscapeKey } from 'components/hooks';
 export default function JourneyView() {
   const [selected, setSelected] = useState(null);
   const { report } = useContext(ReportContext);
-  const { data } = report || {};
+  const { data, parameters } = report || {};
   useEscapeKey(() => setSelected(null));
-
   const columns = useMemo(() => {
     if (!data) {
       return [];
     }
-    return Array(data[0].items.length)
+    return Array(Number(parameters.steps))
       .fill(undefined)
       .map((col = {}, index) => {
         data.forEach(({ items, count }) => {