Event data report UI.

components/pages/reports/event-data/EventDataParameters.js

@@ -1,17 +1,25 @@
 import { useContext, useRef } from 'react';
 import { useApi, useMessages } from 'hooks';
-import { Form, FormRow, FormButtons, SubmitButton, Loading } from 'react-basics';
+import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
 import { ReportContext } from 'components/pages/reports/Report';
-import NoData from 'components/common/NoData';
-import styles from './EventDataParameters.module.css';
+import Empty from 'components/common/Empty';
 import { DATA_TYPES } from 'lib/constants';
 import BaseParameters from '../BaseParameters';
+import FieldAddForm from './FieldAddForm';
+import ParameterList from '../ParameterList';
+import Icons from 'components/icons';
+import styles from './EventDataParameters.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 }),
+    () =>
+      get('/reports/event-data', {
+        websiteId,
+        startAt: +startDate,
+        endAt: +endDate,
+      }),
     { enabled: !!(websiteId && startDate && endDate) },
   );
 
@@ -19,35 +27,111 @@ function useFields(websiteId, startDate, endDate) {
 }
 
 export function EventDataParameters() {
-  const { report, runReport, isRunning } = useContext(ReportContext);
-  const { formatMessage, labels } = useMessages();
+  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
+  const { formatMessage, labels, messages } = useMessages();
   const ref = useRef(null);
   const { parameters } = report || {};
-  const { websiteId, dateRange } = parameters || {};
+  const { websiteId, dateRange, fields, filters, groups } = parameters || {};
   const { startDate, endDate } = dateRange || {};
   const queryDisabled = !websiteId || !dateRange;
-  const { data, error, isLoading } = useFields(websiteId, startDate, endDate);
+  const { data, error } = useFields(websiteId, startDate, endDate);
+  const parametersSelected = websiteId && startDate && endDate;
+  const hasData = data?.length !== 0;
+
+  const parameterGroups = [
+    { label: formatMessage(labels.fields), type: 'fields' },
+    { label: formatMessage(labels.filters), type: 'filters' },
+    { label: formatMessage(labels.groupBy), type: 'groups' },
+  ];
+
+  const parameterData = {
+    fields,
+    filters,
+    groups,
+  };
 
   const handleSubmit = values => {
     runReport(values);
   };
 
+  const handleAdd = (type, value) => {
+    const data = parameterData[type];
+    updateReport({ parameters: { [type]: data.concat(value) } });
+  };
+
+  const handleRemove = (type, index) => {
+    const data = [...parameterData[type]];
+    data.splice(index, 1);
+    updateReport({ parameters: { [type]: data } });
+  };
+
+  const AddButton = ({ type }) => {
+    return (
+      <PopupTrigger>
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Popup position="bottom" alignment="start">
+          {(close, element) => {
+            return (
+              <FieldAddForm
+                type={type}
+                fields={data.map(({ eventKey, eventDataType }) => ({
+                  name: eventKey,
+                  type: DATA_TYPES[eventDataType],
+                }))}
+                element={element}
+                onAdd={handleAdd}
+                onClose={close}
+              />
+            );
+          }}
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
   return (
     <Form ref={ref} values={parameters} error={error} onSubmit={handleSubmit}>
       <BaseParameters />
-      <FormRow label={formatMessage(labels.fields)}>
-        <div className={styles.fields}>
-          {!data?.length && <NoData />}
-          {data?.map?.(({ eventKey, eventDataType }) => {
-            return (
-              <div className={styles.field} key={eventKey}>
-                <div className={styles.key}>{eventKey}</div>
-                <div className={styles.type}>{DATA_TYPES[eventDataType]}</div>
-              </div>
-            );
-          })}
-        </div>
-      </FormRow>
+      {!hasData && <Empty message={formatMessage(messages.noEventData)} />}
+      {parametersSelected &&
+        hasData &&
+        parameterGroups.map(({ label, type }) => {
+          return (
+            <FormRow key={label} label={label} action={<AddButton type={type} onAdd={handleAdd} />}>
+              <ParameterList
+                items={parameterData[type]}
+                onRemove={index => handleRemove(type, index)}
+              >
+                {({ name, value }) => {
+                  return (
+                    <div className={styles.parameter}>
+                      {type === 'fields' && (
+                        <>
+                          <div className={styles.op}>{value}</div>
+                          <div>{name}</div>
+                        </>
+                      )}
+                      {type === 'filters' && (
+                        <>
+                          <div>{name}</div>
+                          <div className={styles.op}>{value[0]}</div>
+                          <div>{value[1]}</div>
+                        </>
+                      )}
+                      {type === 'groups' && (
+                        <>
+                          <div>{name}</div>
+                        </>
+                      )}
+                    </div>
+                  );
+                }}
+              </ParameterList>
+            </FormRow>
+          );
+        })}
       <FormButtons>
         <SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
           {formatMessage(labels.runQuery)}

components/pages/reports/event-data/EventDataParameters.module.css

@@ -1,27 +1,8 @@
-.fields {
-  max-height: 300px;
-  overflow: auto;
-}
-
-.field {
+.parameter {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  height: 30px;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: var(--border-radius);
+  gap: 10px;
 }
 
-.field:hover {
-  background: var(--base75);
-}
-
-.key {
-  font-weight: 400;
-}
-
-.type {
-  color: var(--font-color300);
+.op {
+  font-weight: bold;
 }

components/pages/reports/event-data/EventDataReport.js

@@ -4,10 +4,11 @@ import ReportMenu from '../ReportMenu';
 import ReportBody from '../ReportBody';
 import EventDataParameters from './EventDataParameters';
 import Nodes from 'assets/nodes.svg';
+import EventDataTable from './EventDataTable';
 
 const defaultParameters = {
   type: 'event-data',
-  parameters: { fields: [], filters: [] },
+  parameters: { fields: [], filters: [], groups: [] },
 };
 
 export default function EventDataReport({ reportId }) {
@@ -17,7 +18,9 @@ export default function EventDataReport({ reportId }) {
       <ReportMenu>
         <EventDataParameters />
       </ReportMenu>
-      <ReportBody>hi.</ReportBody>
+      <ReportBody>
+        <EventDataTable />
+      </ReportBody>
     </Report>
   );
 }

components/pages/reports/event-data/EventDataTable.js

@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import DataTable from 'components/metrics/DataTable';
+import { useMessages } from 'hooks';
+import { ReportContext } from '../Report';
+
+export function EventDataTable() {
+  const { report } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <DataTable
+      data={report?.data}
+      title={formatMessage(labels.eventData)}
+      metric="#"
+      showPercentage={true}
+    />
+  );
+}
+
+export default EventDataTable;

components/pages/reports/event-data/FieldAddForm.js

@@ -1,27 +1,35 @@
-import { useMessages } from 'hooks';
-import { Button, Form, FormButtons, FormRow } from 'react-basics';
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+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({ onClose }) {
-  const { formatMessage, labels } = useMessages();
+export function FieldAddForm({ fields = [], type, element, onAdd, onClose }) {
+  const [selected, setSelected] = useState();
 
-  const handleSave = () => {
+  const handleSelect = value => {
+    if (type === 'groups') {
+      handleSave(value);
+      return;
+    }
+
+    setSelected(value);
+  };
+
+  const handleSave = value => {
+    onAdd(type, value);
     onClose();
   };
 
-  const handleClose = () => {
-    onClose();
-  };
-
-  return (
-    <Form>
-      <FormRow label={formatMessage(labels.url)}></FormRow>
-      <FormButtons align="center" flex>
-        <Button variant="primary" onClick={handleSave}>
-          {formatMessage(labels.save)}
-        </Button>
-        <Button onClick={handleClose}>{formatMessage(labels.cancel)}</Button>
-      </FormButtons>
-    </Form>
+  return createPortal(
+    <PopupForm className={styles.popup} element={element} onClose={onClose}>
+      {!selected && <FieldSelectForm fields={fields} type={type} onSelect={handleSelect} />}
+      {selected && type === 'fields' && <FieldAggregateForm {...selected} onSelect={handleSave} />}
+      {selected && type === 'filters' && <FieldFilterForm {...selected} onSelect={handleSave} />}
+    </PopupForm>,
+    document.body,
   );
 }
 

components/pages/reports/event-data/FieldAddForm.module.css

@@ -0,0 +1,38 @@
+.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;
+}