Changed steps to dropdown.

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

@@ -1,6 +1,15 @@
 import { useContext } from 'react';
 import { useMessages } from 'components/hooks';
-import { Form, FormButtons, FormInput, FormRow, SubmitButton, TextField } from 'react-basics';
+import {
+  Dropdown,
+  Form,
+  FormButtons,
+  FormInput,
+  FormRow,
+  Item,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
 import { ReportContext } from '../[reportId]/Report';
 import BaseParameters from '../[reportId]/BaseParameters';
 
@@ -24,12 +33,12 @@ export function JourneyParameters() {
   return (
     <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
       <BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
-      <FormRow label={`${formatMessage(labels.steps)} (3 to 7)`}>
+      <FormRow label={formatMessage(labels.steps)}>
         <FormInput
           name="steps"
           rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/, min: 3, max: 7 }}
         >
-          <TextField autoComplete="off" />
+          <Dropdown items={[3, 4, 5, 6, 7]}>{item => <Item key={item}>{item}</Item>}</Dropdown>
         </FormInput>
       </FormRow>
       <FormRow label={formatMessage(labels.startStep)}>

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

@@ -31,8 +31,8 @@ export default function JourneyView() {
           const selectedNodes = selectedNode?.paths ?? [];
 
           if (name) {
-            if (!column[name]) {
             const selected = !!selectedNodes.find(a => a.items[index] === name);
+            if (!column[name]) {
               const paths = data.filter((d, i) => {
                 return i !== index && d.items[index] === name;
               });
@@ -43,23 +43,26 @@ export default function JourneyView() {
                   const { items, count } = path;
                   const name = items[index - 1];
                   if (!obj[name]) {
-                    obj[name] = { name, count: +count };
+                    obj[name] = { name, count };
                   } else {
-                    obj[name].count += +count;
+                    obj[name].count += count;
                   }
                   return obj;
                 }, {});
 
               column[name] = {
                 name,
-                total: +count,
+                count,
+                total: count,
                 columnIndex: index,
                 selected,
+                selectedCount: count,
                 paths,
                 from: objectToArray(from),
               };
             } else {
-              column[name].total += +count;
+              column[name].selectedCount += selected ? count : 0;
+              column[name].total += count;
             }
           }
         });
@@ -97,7 +100,8 @@ export default function JourneyView() {
                 <div className={styles.num}>{columnIndex + 1}</div>
               </div>
               <div className={styles.nodes}>
-                {column.nodes.map(({ name, total, selected, paths, from }, nodeIndex) => {
+                {column.nodes.map(
+                  ({ name, total, selected, paths, from, selectedCount }, nodeIndex) => {
                     const active =
                       selected && activeNode?.paths.find(path => path.items[columnIndex] === name);
 
@@ -125,7 +129,9 @@ export default function JourneyView() {
                         onMouseLeave={() => selected && setActiveNode(null)}
                       >
                         <div className={styles.name}>{name}</div>
-                      <div className={styles.count}>{total}</div>
+                        <div className={styles.count}>
+                          {selected || active ? selectedCount : total}
+                        </div>
                         {columnIndex < columns.length &&
                           lines.map(([fromIndex, nodeIndex], i) => {
                             const height =
@@ -167,7 +173,8 @@ export default function JourneyView() {
                           })}
                       </div>
                     );
-                })}
+                  },
+                )}
               </div>
             </div>
           );

src/queries/analytics/reports/getJourney.ts

@@ -10,7 +10,7 @@ interface JourneyResult {
   e5: string;
   e6: string;
   e7: string;
-  count: string;
+  count: number;
 }
 
 export async function getJourney(
@@ -267,6 +267,6 @@ function combineSequentialDuplicates(array: any) {
 function parseResult(data: any) {
   return data.map(({ e1, e2, e3, e4, e5, e6, e7, count }) => ({
     items: combineSequentialDuplicates([e1, e2, e3, e4, e5, e6, e7]),
-    count,
+    count: +count,
   }));
 }