@@ -42,6 +32,21 @@ function ReportItem({ title, description, url, icon }) {
export function ReportTemplates() {
const { formatMessage, labels } = useMessages();
+ const reports = [
+ {
+ title: formatMessage(labels.insights),
+ description: 'Dive deeper into your data by using segments and filters.',
+ url: '/reports/insights',
+ icon:
,
+ },
+ {
+ title: formatMessage(labels.funnel),
+ description: 'Understand the conversion and drop-off rate of users.',
+ url: '/reports/funnel',
+ icon:
,
+ },
+ ];
+
return (
diff --git a/components/pages/reports/event-data/EventDataParameters.js b/components/pages/reports/event-data/EventDataParameters.js
index 09358be2..8d4dbb62 100644
--- a/components/pages/reports/event-data/EventDataParameters.js
+++ b/components/pages/reports/event-data/EventDataParameters.js
@@ -5,7 +5,7 @@ import { ReportContext } from 'components/pages/reports/Report';
import Empty from 'components/common/Empty';
import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
import Icons from 'components/icons';
-import FieldAddForm from './FieldAddForm';
+import FieldAddForm from '../FieldAddForm';
import BaseParameters from '../BaseParameters';
import ParameterList from '../ParameterList';
import styles from './EventDataParameters.module.css';
@@ -54,9 +54,11 @@ export function EventDataParameters() {
};
const handleAdd = (group, value) => {
- const data = parameterData[group].filter(({ name }) => name !== value.name);
+ const data = parameterData[group];
- updateReport({ parameters: { [group]: data.concat(value) } });
+ if (!data.find(({ name }) => name === value.name)) {
+ updateReport({ parameters: { [group]: data.concat(value) } });
+ }
};
const handleRemove = (group, index) => {
diff --git a/components/pages/reports/insights/FieldAddForm.js b/components/pages/reports/insights/FieldAddForm.js
deleted file mode 100644
index c95fcac3..00000000
--- a/components/pages/reports/insights/FieldAddForm.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
-import { REPORT_PARAMETERS } from 'lib/constants';
-import PopupForm from '../PopupForm';
-import FieldSelectForm from '../FieldSelectForm';
-import FieldAggregateForm from '../FieldAggregateForm';
-import FieldFilterForm from '../FieldFilterForm';
-import styles from './FieldAddForm.module.css';
-
-export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
- const [selected, setSelected] = useState();
-
- const handleSelect = value => {
- const { type } = value;
-
- if (group === REPORT_PARAMETERS.groups || type === 'array' || type === 'boolean') {
- value.value = group === REPORT_PARAMETERS.groups ? '' : 'total';
- handleSave(value);
- return;
- }
-
- setSelected(value);
- };
-
- const handleSave = value => {
- onAdd(group, value);
- onClose();
- };
-
- return createPortal(
-
- {!selected && }
- {selected && group === REPORT_PARAMETERS.fields && (
-
- )}
- {selected && group === REPORT_PARAMETERS.filters && (
-
- )}
- ,
- document.body,
- );
-}
-
-export default FieldAddForm;
diff --git a/components/pages/reports/insights/FieldAddForm.module.css b/components/pages/reports/insights/FieldAddForm.module.css
deleted file mode 100644
index 5c5aaa4f..00000000
--- a/components/pages/reports/insights/FieldAddForm.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.menu {
- width: 360px;
- max-height: 300px;
- overflow: auto;
-}
-
-.item {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- border-radius: var(--border-radius);
-}
-
-.item:hover {
- background: var(--base75);
-}
-
-.type {
- color: var(--font-color300);
-}
-
-.selected {
- font-weight: bold;
-}
-
-.popup {
- display: flex;
-}
-
-.filter {
- display: flex;
- flex-direction: column;
- gap: 20px;
-}
-
-.dropdown {
- min-width: 60px;
-}
diff --git a/components/pages/reports/insights/InsightsParameters.js b/components/pages/reports/insights/InsightsParameters.js
index 39bfc2e8..b87a566d 100644
--- a/components/pages/reports/insights/InsightsParameters.js
+++ b/components/pages/reports/insights/InsightsParameters.js
@@ -1,42 +1,22 @@
import { useContext, useRef } from 'react';
-import { useApi, useMessages } from 'hooks';
+import { useMessages } from 'hooks';
import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
import { ReportContext } from 'components/pages/reports/Report';
-import Empty from 'components/common/Empty';
-import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
+import { REPORT_PARAMETERS, WEBSITE_EVENT_FIELDS } from 'lib/constants';
import Icons from 'components/icons';
-import FieldAddForm from './FieldAddForm';
import BaseParameters from '../BaseParameters';
+import FieldAddForm from '../FieldAddForm';
import ParameterList from '../ParameterList';
import styles from './InsightsParameters.module.css';
-function useFields(websiteId, startDate, endDate) {
- const { get, useQuery } = useApi();
- const { data, error, isLoading } = useQuery(
- ['fields', websiteId, startDate, endDate],
- () =>
- get('/reports/event-data', {
- websiteId,
- startAt: +startDate,
- endAt: +endDate,
- }),
- { enabled: !!(websiteId && startDate && endDate) },
- );
-
- return { data, error, isLoading };
-}
-
export function InsightsParameters() {
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
- const { formatMessage, labels, messages } = useMessages();
+ const { formatMessage, labels } = useMessages();
const ref = useRef(null);
const { parameters } = report || {};
const { websiteId, dateRange, fields, filters, groups } = parameters || {};
- const { startDate, endDate } = dateRange || {};
const queryEnabled = websiteId && dateRange && fields?.length;
- const { data, error } = useFields(websiteId, startDate, endDate);
- const parametersSelected = websiteId && startDate && endDate;
- const hasData = data?.length !== 0;
+ const fieldOptions = Object.keys(WEBSITE_EVENT_FIELDS).map(key => WEBSITE_EVENT_FIELDS[key]);
const parameterGroups = [
{ label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
@@ -78,10 +58,7 @@ export function InsightsParameters() {
{(close, element) => {
return (
({
- name: eventKey,
- type: DATA_TYPES[InsightsType],
- }))}
+ fields={fieldOptions}
group={group}
element={element}
onAdd={handleAdd}
@@ -95,50 +72,43 @@ export function InsightsParameters() {
};
return (
-
) : null;
})}
diff --git a/components/pages/websites/WebsiteEventData.js b/components/pages/websites/WebsiteEventData.js
index 7dc68d41..7f9a6829 100644
--- a/components/pages/websites/WebsiteEventData.js
+++ b/components/pages/websites/WebsiteEventData.js
@@ -5,18 +5,18 @@ import { EventDataMetricsBar } from 'components/pages/event-data/EventDataMetric
import { useDateRange, useApi, usePageQuery } from 'hooks';
import styles from './WebsiteEventData.module.css';
-function useFields(websiteId, field) {
+function useData(websiteId, event) {
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate } = dateRange;
const { get, useQuery } = useApi();
const { data, error, isLoading } = useQuery(
- ['event-data:fields', { websiteId, startDate, endDate, field }],
+ ['event-data:events', { websiteId, startDate, endDate, event }],
() =>
- get('/event-data/fields', {
+ get('/event-data/events', {
websiteId,
startAt: +startDate,
endAt: +endDate,
- field,
+ event,
}),
{ enabled: !!(websiteId && startDate && endDate) },
);
@@ -26,15 +26,15 @@ function useFields(websiteId, field) {
export default function WebsiteEventData({ websiteId }) {
const {
- query: { view },
+ query: { event },
} = usePageQuery();
- const { data } = useFields(websiteId, view);
+ const { data } = useData(websiteId, event);
return (