More updates to event data report.

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

@@ -3,11 +3,11 @@ import { useApi, 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 } from 'lib/constants';
-import BaseParameters from '../BaseParameters';
-import FieldAddForm from './FieldAddForm';
-import ParameterList from '../ParameterList';
+import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants';
 import Icons from 'components/icons';
+import FieldAddForm from './FieldAddForm';
+import BaseParameters from '../BaseParameters';
+import ParameterList from '../ParameterList';
 import styles from './EventDataParameters.module.css';
 
 function useFields(websiteId, startDate, endDate) {
@@ -33,15 +33,15 @@ export function EventDataParameters() {
   const { parameters } = report || {};
   const { websiteId, dateRange, fields, filters, groups } = parameters || {};
   const { startDate, endDate } = dateRange || {};
-  const queryDisabled = !websiteId || !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 parameterGroups = [
-    { label: formatMessage(labels.fields), type: 'fields' },
-    { label: formatMessage(labels.filters), type: 'filters' },
-    { label: formatMessage(labels.groupBy), type: 'groups' },
+    { label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
+    { label: formatMessage(labels.filters), group: REPORT_PARAMETERS.filters },
+    { label: formatMessage(labels.breakdown), group: REPORT_PARAMETERS.groups },
   ];
 
   const parameterData = {
@@ -54,18 +54,21 @@ export function EventDataParameters() {
     runReport(values);
   };
 
-  const handleAdd = (type, value) => {
-    const data = parameterData[type];
-    updateReport({ parameters: { [type]: data.concat(value) } });
+  const handleAdd = (group, value) => {
+    const data = parameterData[group];
+
+    if (!data.find(({ name }) => name === value.name)) {
+      updateReport({ parameters: { [group]: data.concat(value) } });
+    }
   };
 
-  const handleRemove = (type, index) => {
-    const data = [...parameterData[type]];
+  const handleRemove = (group, index) => {
+    const data = [...parameterData[group]];
     data.splice(index, 1);
-    updateReport({ parameters: { [type]: data } });
+    updateReport({ parameters: { [group]: data } });
   };
 
-  const AddButton = ({ type }) => {
+  const AddButton = ({ group }) => {
     return (
       <PopupTrigger>
         <Icon>
@@ -75,11 +78,11 @@ export function EventDataParameters() {
           {(close, element) => {
             return (
               <FieldAddForm
-                type={type}
                 fields={data.map(({ eventKey, eventDataType }) => ({
                   name: eventKey,
                   type: DATA_TYPES[eventDataType],
                 }))}
+                group={group}
                 element={element}
                 onAdd={handleAdd}
                 onClose={close}
@@ -97,30 +100,34 @@ export function EventDataParameters() {
       {!hasData && <Empty message={formatMessage(messages.noEventData)} />}
       {parametersSelected &&
         hasData &&
-        parameterGroups.map(({ label, type }) => {
+        parameterGroups.map(({ label, group }) => {
           return (
-            <FormRow key={label} label={label} action={<AddButton type={type} onAdd={handleAdd} />}>
+            <FormRow
+              key={label}
+              label={label}
+              action={<AddButton group={group} onAdd={handleAdd} />}
+            >
               <ParameterList
-                items={parameterData[type]}
-                onRemove={index => handleRemove(type, index)}
+                items={parameterData[group]}
+                onRemove={index => handleRemove(group, index)}
               >
                 {({ name, value }) => {
                   return (
                     <div className={styles.parameter}>
-                      {type === 'fields' && (
+                      {group === REPORT_PARAMETERS.fields && (
                         <>
-                          <div className={styles.op}>{value}</div>
                           <div>{name}</div>
+                          <div className={styles.op}>{value}</div>
                         </>
                       )}
-                      {type === 'filters' && (
+                      {group === REPORT_PARAMETERS.filters && (
                         <>
                           <div>{name}</div>
                           <div className={styles.op}>{value[0]}</div>
                           <div>{value[1]}</div>
                         </>
                       )}
-                      {type === 'groups' && (
+                      {group === REPORT_PARAMETERS.groups && (
                         <>
                           <div>{name}</div>
                         </>
@@ -133,7 +140,7 @@ export function EventDataParameters() {
           );
         })}
       <FormButtons>
-        <SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
+        <SubmitButton variant="primary" disabled={!queryEnabled} loading={isRunning}>
           {formatMessage(labels.runQuery)}
         </SubmitButton>
       </FormButtons>

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

@@ -1,6 +1,10 @@
 .parameter {
   display: flex;
   gap: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 
 .op {

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

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import DataTable from 'components/metrics/DataTable';
+import { GridTable, GridColumn } from 'react-basics';
 import { useMessages } from 'hooks';
 import { ReportContext } from '../Report';
 
@@ -8,12 +8,11 @@ export function EventDataTable() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <DataTable
-      data={report?.data}
-      title={formatMessage(labels.eventData)}
-      metric="#"
-      showPercentage={true}
-    />
+    <GridTable data={report?.data || []}>
+      <GridColumn name="field" label={formatMessage(labels.field)} />
+      <GridColumn name="value" label={formatMessage(labels.value)} />
+      <GridColumn name="total" label={formatMessage(labels.total)} />
+    </GridTable>
   );
 }
 

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

@@ -1,16 +1,20 @@
 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 = [], type, element, onAdd, onClose }) {
+export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
   const [selected, setSelected] = useState();
 
   const handleSelect = value => {
-    if (type === 'groups') {
+    const { type } = value;
+
+    if (group === REPORT_PARAMETERS.groups || type === 'array' || type === 'boolean') {
+      value.value = group === REPORT_PARAMETERS.groups ? '' : 'total';
       handleSave(value);
       return;
     }
@@ -19,15 +23,19 @@ export function FieldAddForm({ fields = [], type, element, onAdd, onClose }) {
   };
 
   const handleSave = value => {
-    onAdd(type, value);
+    onAdd(group, value);
     onClose();
   };
 
   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} />}
+      {!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
+      {selected && group === REPORT_PARAMETERS.fields && (
+        <FieldAggregateForm {...selected} onSelect={handleSave} />
+      )}
+      {selected && group === REPORT_PARAMETERS.filters && (
+        <FieldFilterForm {...selected} onSelect={handleSave} />
+      )}
     </PopupForm>,
     document.body,
   );