Insights report updates.

components/messages.js

@@ -159,6 +159,7 @@ export const labels = defineMessages({
   value: { id: 'labels.value', defaultMessage: 'Value' },
   overview: { id: 'labels.overview', defaultMessage: 'Overview' },
   totalRecords: { id: 'labels.total-records', defaultMessage: 'Total records' },
+  insights: { id: 'label.insights', defaultMessage: 'Insights' },
 });
 
 export const messages = defineMessages({

components/pages/reports/FieldAggregateForm.js

@@ -19,6 +19,10 @@ export default function FieldAggregateForm({ name, type, onSelect }) {
       { label: formatMessage(labels.total), value: 'total' },
       { label: formatMessage(labels.unique), value: 'unique' },
     ],
+    uuid: [
+      { label: formatMessage(labels.total), value: 'total' },
+      { label: formatMessage(labels.unique), value: 'unique' },
+    ],
   };
 
   const items = options[type];

components/pages/reports/FieldSelectForm.js

@@ -9,10 +9,10 @@ export default function FieldSelectForm({ fields, onSelect }) {
     <Form>
       <FormRow label={formatMessage(labels.fields)}>
         <Menu className={styles.menu} onSelect={key => onSelect(fields[key])}>
-          {fields.map(({ name, type }, index) => {
+          {fields.map(({ label, name, type }, index) => {
             return (
               <Item key={index} className={styles.item}>
-                <div>{name}</div>
+                <div>{label || name}</div>
                 <div className={styles.type}>{type}</div>
               </Item>
             );

components/pages/reports/ReportTemplates.js

@@ -3,20 +3,10 @@ import { Button, Icons, Text, Icon } from 'react-basics';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import Funnel from 'assets/funnel.svg';
-import Nodes from 'assets/nodes.svg';
 import Lightbulb from 'assets/lightbulb.svg';
 import styles from './ReportTemplates.module.css';
 import { useMessages } from 'hooks';
 
-const reports = [
-  {
-    title: 'Funnel',
-    description: 'Understand the conversion and drop-off rate of users.',
-    url: '/reports/funnel',
-    icon: <Funnel />,
-  },
-];
-
 function ReportItem({ title, description, url, icon }) {
   return (
     <div className={styles.report}>
@@ -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: <Lightbulb />,
+    },
+    {
+      title: formatMessage(labels.funnel),
+      description: 'Understand the conversion and drop-off rate of users.',
+      url: '/reports/funnel',
+      icon: <Funnel />,
+    },
+  ];
+
   return (
     <Page>
       <PageHeader title={formatMessage(labels.reports)} />

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) => {

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 (
               <FieldAddForm
-                fields={data.map(({ eventKey, InsightsType }) => ({
-                  name: eventKey,
-                  type: DATA_TYPES[InsightsType],
-                }))}
+                fields={fieldOptions}
                 group={group}
                 element={element}
                 onAdd={handleAdd}
@@ -95,50 +72,43 @@ export function InsightsParameters() {
   };
 
   return (
-    <Form ref={ref} values={parameters} error={error} onSubmit={handleSubmit}>
+    <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
       <BaseParameters />
-      {!hasData && <Empty message={formatMessage(messages.noInsights)} />}
-      {parametersSelected &&
-        hasData &&
-        parameterGroups.map(({ label, group }) => {
-          return (
-            <FormRow
-              key={label}
-              label={label}
-              action={<AddButton group={group} onAdd={handleAdd} />}
+      {parameterGroups.map(({ label, group }) => {
+        return (
+          <FormRow key={label} label={label} action={<AddButton group={group} onAdd={handleAdd} />}>
+            <ParameterList
+              items={parameterData[group]}
+              onRemove={index => handleRemove(group, index)}
             >
-              <ParameterList
-                items={parameterData[group]}
-                onRemove={index => handleRemove(group, index)}
-              >
-                {({ name, value }) => {
-                  return (
-                    <div className={styles.parameter}>
-                      {group === REPORT_PARAMETERS.fields && (
-                        <>
-                          <div>{name}</div>
-                          <div className={styles.op}>{value}</div>
-                        </>
-                      )}
-                      {group === REPORT_PARAMETERS.filters && (
-                        <>
-                          <div>{name}</div>
-                          <div className={styles.op}>{value[0]}</div>
-                          <div>{value[1]}</div>
-                        </>
-                      )}
-                      {group === REPORT_PARAMETERS.groups && (
-                        <>
-                          <div>{name}</div>
-                        </>
-                      )}
-                    </div>
-                  );
-                }}
-              </ParameterList>
-            </FormRow>
-          );
-        })}
+              {({ name, value }) => {
+                return (
+                  <div className={styles.parameter}>
+                    {group === REPORT_PARAMETERS.fields && (
+                      <>
+                        <div>{name}</div>
+                        <div className={styles.op}>{value}</div>
+                      </>
+                    )}
+                    {group === REPORT_PARAMETERS.filters && (
+                      <>
+                        <div>{name}</div>
+                        <div className={styles.op}>{value[0]}</div>
+                        <div>{value[1]}</div>
+                      </>
+                    )}
+                    {group === REPORT_PARAMETERS.groups && (
+                      <>
+                        <div>{name}</div>
+                      </>
+                    )}
+                  </div>
+                );
+              }}
+            </ParameterList>
+          </FormRow>
+        );
+      })}
       <FormButtons>
         <SubmitButton variant="primary" disabled={!queryEnabled} loading={isRunning}>
           {formatMessage(labels.runQuery)}

hooks/useFilters.js

@@ -24,6 +24,7 @@ export function useFilters() {
     boolean: ['t', 'f'],
     number: ['eq', 'neq', 'gt', 'lt', 'gte', 'lte'],
     date: ['be', 'af'],
+    uuid: ['eq'],
   };
 
   return { filters, types };

lib/constants.ts

@@ -120,6 +120,37 @@ export const ROLE_PERMISSIONS = {
   [ROLES.teamMember]: [],
 } as const;
 
+export const WEBSITE_EVENT_FIELDS = {
+  eventId: { name: 'event_id', type: 'uuid', label: 'Event ID' },
+  websiteId: { name: 'website_id', type: 'uuid', label: 'Website ID' },
+  sessionId: { name: 'session_id', type: 'uuid', label: 'Session ID' },
+  createdAt: { name: 'created_at', type: 'date', label: 'Created date' },
+  urlPath: { name: 'url_path', type: 'string', label: 'URL path' },
+  urlQuery: { name: 'url_query', type: 'string', label: 'URL query' },
+  referrerPath: { name: 'referrer_path', type: 'string', label: 'Referrer path' },
+  referrerQuery: { name: 'referrer_query', type: 'string', label: 'Referrer query' },
+  referrerDomain: { name: 'referrer_domain', type: 'string', label: 'Referrer domain' },
+  pageTitle: { name: 'page_title', type: 'string', label: 'Page title' },
+  eventType: { name: 'event_type', type: 'string', label: 'Event type' },
+  eventName: { name: 'event_name', type: 'string', label: 'Event name' },
+};
+
+export const SESSION_FIELDS = {
+  sessionId: { name: 'session_id', type: 'uuid' },
+  websiteId: { name: 'website_id', type: 'uuid' },
+  hostname: { name: 'hostname', type: 'string' },
+  browser: { name: 'browser', type: 'string' },
+  os: { name: 'os', type: 'string' },
+  device: { name: 'device', type: 'string' },
+  screen: { name: 'screen', type: 'string' },
+  language: { name: 'language', type: 'string' },
+  country: { name: 'country', type: 'string' },
+  subdivision1: { name: 'subdivision1', type: 'string' },
+  subdivision2: { name: 'subdivision2', type: 'string' },
+  city: { name: 'city', type: 'string' },
+  createdAt: { name: 'created_at', type: 'date' },
+};
+
 export const THEME_COLORS = {
   light: {
     primary: '#2680eb',
@@ -166,10 +197,9 @@ export const EVENT_COLORS = [
   '#ffec16',
 ];
 
-export const DOMAIN_REGEX = 
+export const DOMAIN_REGEX =
   /^(localhost(:[1-9]\d{0,4})?|((?=[a-z0-9-]{1,63}\.)(xn--)?[a-z0-9-]+(-[a-z0-9-]+)*\.)+(xn--)?[a-z0-9-]{2,63})$/;
 
-
 export const SHARE_ID_REGEX = /^[a-zA-Z0-9]{16}$/;
 
 export const DESKTOP_SCREEN_WIDTH = 1920;