{index + 1}
- {formatMessage(labels.viewedPage)}:
- {url}
+
+ {formatMessage(type === 'url' ? labels.viewedPage : labels.triggeredEvent)}
+
+ {value}
+
+
+
+ {formatLongNumber(visitors)}
+ {formatMessage(labels.visitors)}
+
+
{(remaining * 100).toFixed(2)}%
-
-
- {remaining > 0.1 && `${(remaining * 100).toFixed(2)}%`}
-
-
+
-
-
-
{formatLongNumber(visitors)}
-
{formatMessage(labels.visitors)}
-
({(remaining * 100).toFixed(2)}%)
+ {dropoff > 0 && (
+
+ {formatLongNumber(dropped)} {formatMessage(labels.visitorsDroppedOff)} (
+ {(dropoff * 100).toFixed(2)}%)
- {dropoff > 0 && (
-
- {formatLongNumber(dropped)} {formatMessage(labels.visitorsDroppedOff)} (
- {(dropoff * 100).toFixed(2)}%)
-
- )}
-
+ )}
);
diff --git a/src/app/(main)/reports/funnel/FunnelParameters.module.css b/src/app/(main)/reports/funnel/FunnelParameters.module.css
new file mode 100644
index 000000000..219b98076
--- /dev/null
+++ b/src/app/(main)/reports/funnel/FunnelParameters.module.css
@@ -0,0 +1,16 @@
+.item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+}
+
+.type {
+ color: var(--base700);
+}
+
+.value {
+ display: flex;
+ align-self: center;
+ gap: 20px;
+}
diff --git a/src/app/(main)/reports/funnel/FunnelParameters.tsx b/src/app/(main)/reports/funnel/FunnelParameters.tsx
index 6eefbaae4..7b1fb0c81 100644
--- a/src/app/(main)/reports/funnel/FunnelParameters.tsx
+++ b/src/app/(main)/reports/funnel/FunnelParameters.tsx
@@ -10,50 +10,65 @@ import {
Popup,
SubmitButton,
TextField,
+ Button,
} from 'react-basics';
import Icons from 'components/icons';
-import UrlAddForm from './UrlAddForm';
+import FunnelStepAddForm from './FunnelStepAddForm';
import { ReportContext } from '../[reportId]/Report';
import BaseParameters from '../[reportId]/BaseParameters';
import ParameterList from '../[reportId]/ParameterList';
import PopupForm from '../[reportId]/PopupForm';
+import styles from './FunnelParameters.module.css';
export function FunnelParameters() {
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const { id, parameters } = report || {};
- const { websiteId, dateRange, urls } = parameters || {};
- const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
+ const { websiteId, dateRange, steps } = parameters || {};
+ const queryDisabled = !websiteId || !dateRange || steps?.length < 2;
const handleSubmit = (data: any, e: any) => {
e.stopPropagation();
e.preventDefault();
+
if (!queryDisabled) {
runReport(data);
}
};
- const handleAddUrl = (url: string) => {
- updateReport({ parameters: { urls: parameters.urls.concat(url) } });
+ const handleAddStep = (step: { type: string; value: string }) => {
+ updateReport({ parameters: { steps: parameters.steps.concat(step) } });
};
- const handleRemoveUrl = (index: number, e: any) => {
- e.stopPropagation();
- const urls = [...parameters.urls];
- urls.splice(index, 1);
- updateReport({ parameters: { urls } });
+ const handleUpdateStep = (
+ close: () => void,
+ index: number,
+ step: { type: string; value: string },
+ ) => {
+ const steps = [...parameters.steps];
+ steps[index] = step;
+ updateReport({ parameters: { steps } });
+ close();
};
- const AddUrlButton = () => {
+ const handleRemoveStep = (index: number) => {
+ const steps = [...parameters.steps];
+ delete steps[index];
+ updateReport({ parameters: { steps: steps.filter(n => n) } });
+ };
+
+ const AddStepButton = () => {
return (
-
-
-
-
+
+
-
+
@@ -71,11 +86,37 @@ export function FunnelParameters() {
-
}>
-
handleRemoveUrl(index, e)}
- />
+ }>
+
+ {steps.map((step: { type: string; value: string }, index: number) => {
+ return (
+
+ handleRemoveStep(index)}
+ >
+
+
+ {step.type === 'url' ? : }
+
+
{step.value}
+
- {label}
;
+ }}
+
+
+
+
+
+
+
+
+ );
+}
+
+export default FunnelStepAddForm;
diff --git a/src/app/(main)/reports/funnel/UrlAddForm.module.css b/src/app/(main)/reports/funnel/UrlAddForm.module.css
deleted file mode 100644
index 6a3e03b5e..000000000
--- a/src/app/(main)/reports/funnel/UrlAddForm.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.form {
- position: absolute;
- background: var(--base50);
- width: 300px;
- padding: 30px;
- margin-top: 10px;
- border: 1px solid var(--base400);
- border-radius: var(--border-radius);
- box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.input {
- width: 100%;
-}
diff --git a/src/app/(main)/reports/funnel/UrlAddForm.tsx b/src/app/(main)/reports/funnel/UrlAddForm.tsx
deleted file mode 100644
index 88c27ae91..000000000
--- a/src/app/(main)/reports/funnel/UrlAddForm.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState } from 'react';
-import { useMessages } from 'components/hooks';
-import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
-import styles from './UrlAddForm.module.css';
-
-export interface UrlAddFormProps {
- defaultValue?: string;
- onAdd?: (url: string) => void;
-}
-
-export function UrlAddForm({ defaultValue = '', onAdd }: UrlAddFormProps) {
- const [url, setUrl] = useState(defaultValue);
- const { formatMessage, labels } = useMessages();
-
- const handleSave = () => {
- onAdd(url);
- setUrl('');
- };
-
- const handleChange = e => {
- setUrl(e.target.value);
- };
-
- const handleKeyDown = e => {
- if (e.key === 'Enter') {
- e.stopPropagation();
- handleSave();
- }
- };
-
- return (
-
- );
-}
-
-export default UrlAddForm;
diff --git a/src/app/(main)/reports/insights/InsightsFilterParameters.tsx b/src/app/(main)/reports/insights/InsightsFilterParameters.tsx
deleted file mode 100644
index 47554469c..000000000
--- a/src/app/(main)/reports/insights/InsightsFilterParameters.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useMessages, useFormat, useFilters } from 'components/hooks';
-import Icons from 'components/icons';
-import { useContext } from 'react';
-import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
-import FilterSelectForm from '../[reportId]/FilterSelectForm';
-import ParameterList from '../[reportId]/ParameterList';
-import PopupForm from '../[reportId]/PopupForm';
-import { ReportContext } from '../[reportId]/Report';
-import styles from './InsightsFilterParameters.module.css';
-import { safeDecodeURIComponent } from 'next-basics';
-import { OPERATORS } from 'lib/constants';
-
-export function InsightsFilterParameters() {
- const { report, updateReport } = useContext(ReportContext);
- const { formatMessage, labels } = useMessages();
- const { formatValue } = useFormat();
- const { filterLabels } = useFilters();
- const { parameters } = report || {};
- const { websiteId, filters } = parameters || {};
-
- const fieldOptions = [
- { name: 'url', type: 'string', label: formatMessage(labels.url) },
- { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
- { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
- { name: 'query', type: 'string', label: formatMessage(labels.query) },
- { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
- { name: 'os', type: 'string', label: formatMessage(labels.os) },
- { name: 'device', type: 'string', label: formatMessage(labels.device) },
- { name: 'country', type: 'string', label: formatMessage(labels.country) },
- { name: 'region', type: 'string', label: formatMessage(labels.region) },
- { name: 'city', type: 'string', label: formatMessage(labels.city) },
- ];
-
- const handleAdd = (value: { name: any }) => {
- if (!filters.find(({ name }) => name === value.name)) {
- updateReport({ parameters: { filters: filters.concat(value) } });
- }
- };
-
- const handleRemove = (name: string) => {
- updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } });
- };
-
- const AddButton = () => {
- return (
-
-
-
-
- !filters.find(f => f.name === name))}
- onSelect={handleAdd}
- />
-
-
-
- );
- };
-
- return (
- }>
-
- {filters.map(({ name, filter, value }) => {
- const label = fieldOptions.find(f => f.name === name)?.label;
- const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter);
- return (
- handleRemove(name)}>
-
-
{label}
-
{filterLabels[filter]}
-
- {safeDecodeURIComponent(isEquals ? formatValue(value, name) : value)}
-
-