Merge branch 'dev' of https://github.com/umami-software/umami into feat/um-376-retention-report

2026-02-08 14:47:14 +01:00 · 2023-08-04 13:10:33 -07:00 · 2023-08-04 13:10:33 -07:00 · 8fff65728c
commit 8fff65728c
parent 9cde107ddf 157862834d
23 changed files with 364 additions and 207 deletions
--- a/components/layout/AppLayout.js
+++ b/components/layout/AppLayout.js
@ -2,9 +2,7 @@ import { Container } from 'react-basics';
 import Head from 'next/head';
 import NavBar from 'components/layout/NavBar';
 import UpdateNotice from 'components/common/UpdateNotice';
-import useRequireLogin from 'hooks/useRequireLogin';
-import useConfig from 'hooks/useConfig';
-import { CURRENT_VERSION } from 'lib/constants';
+import { useRequireLogin, useConfig } from 'hooks';
 import styles from './AppLayout.module.css';

 export function AppLayout({ title, children }) {
@ -16,7 +14,7 @@ export function AppLayout({ title, children }) {
  }

  return (
-    <div className={styles.layout} data-app-version={CURRENT_VERSION}>
+    <div className={styles.layout}>
      <UpdateNotice user={user} config={config} />
      <Head>
        <title>{title ? `${title} | umami` : 'umami'}</title>
--- a/components/pages/reports/FieldSelectForm.js
+++ b/components/pages/reports/FieldSelectForm.js
@ -13,7 +13,7 @@ export default function FieldSelectForm({ fields, onSelect }) {
            return (
              <Item key={index} className={styles.item}>
                <div>{label || name}</div>
-                <div className={styles.type}>{type}</div>
+                {type && <div className={styles.type}>{type}</div>}
              </Item>
            );
          })}
--- a/components/pages/reports/ReportTemplates.js
+++ b/components/pages/reports/ReportTemplates.js
@ -33,14 +33,12 @@ 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.',
--- a/components/pages/reports/funnel/FunnelParameters.js
+++ b/components/pages/reports/funnel/FunnelParameters.js
@ -16,6 +16,7 @@ import UrlAddForm from './UrlAddForm';
 import { ReportContext } from 'components/pages/reports/Report';
 import BaseParameters from '../BaseParameters';
 import ParameterList from '../ParameterList';
+import PopupForm from '../PopupForm';

 export function FunnelParameters() {
  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
@ -53,7 +54,11 @@ export function FunnelParameters() {
        </Icon>
        <Popup position="bottom" alignment="start">
          {(close, element) => {
-            return <UrlAddForm element={element} onAdd={handleAddUrl} onClose={close} />;
+            return (
+              <PopupForm element={element} onClose={close}>
+                <UrlAddForm onAdd={handleAddUrl} />
+              </PopupForm>
+            );
          }}
        </Popup>
      </PopupTrigger>
--- a/components/pages/reports/funnel/UrlAddForm.js
+++ b/components/pages/reports/funnel/UrlAddForm.js
@ -2,16 +2,14 @@ import { useState } from 'react';
 import { useMessages } from 'hooks';
 import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
 import styles from './UrlAddForm.module.css';
-import PopupForm from '../PopupForm';

-export function UrlAddForm({ defaultValue = '', element, onAdd, onClose }) {
+export function UrlAddForm({ defaultValue = '', onAdd }) {
  const [url, setUrl] = useState(defaultValue);
  const { formatMessage, labels } = useMessages();

  const handleSave = () => {
    onAdd(url);
    setUrl('');
-    onClose();
  };

  const handleChange = e => {
@ -26,25 +24,23 @@ export function UrlAddForm({ defaultValue = '', element, onAdd, onClose }) {
  };

  return (
-    <PopupForm element={element}>
-      <Form>
-        <FormRow label={formatMessage(labels.url)}>
-          <Flexbox gap={10}>
-            <TextField
-              className={styles.input}
-              value={url}
-              onChange={handleChange}
-              autoFocus={true}
-              autoComplete="off"
-              onKeyDown={handleKeyDown}
-            />
-            <Button variant="primary" onClick={handleSave}>
-              {formatMessage(labels.add)}
-            </Button>
-          </Flexbox>
-        </FormRow>
-      </Form>
-    </PopupForm>
+    <Form>
+      <FormRow label={formatMessage(labels.url)}>
+        <Flexbox gap={10}>
+          <TextField
+            className={styles.input}
+            value={url}
+            onChange={handleChange}
+            autoFocus={true}
+            autoComplete="off"
+            onKeyDown={handleKeyDown}
+          />
+          <Button variant="primary" onClick={handleSave}>
+            {formatMessage(labels.add)}
+          </Button>
+        </Flexbox>
+      </FormRow>
+    </Form>
  );
 }

--- a/components/pages/reports/insights/InsightsParameters.js
+++ b/components/pages/reports/insights/InsightsParameters.js
@ -2,12 +2,28 @@ import { useContext, useRef } from 'react';
 import { useMessages } from 'hooks';
 import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
 import { ReportContext } from 'components/pages/reports/Report';
-import { REPORT_PARAMETERS, WEBSITE_EVENT_FIELDS } from 'lib/constants';
+import { REPORT_PARAMETERS } from 'lib/constants';
 import Icons from 'components/icons';
 import BaseParameters from '../BaseParameters';
-import FieldAddForm from '../FieldAddForm';
 import ParameterList from '../ParameterList';
 import styles from './InsightsParameters.module.css';
+import FieldSelectForm from '../FieldSelectForm';
+import PopupForm from '../PopupForm';
+import FieldFilterForm from '../FieldFilterForm';
+
+const fieldOptions = [
+  { name: 'url', type: 'string' },
+  { name: 'title', type: 'string' },
+  { name: 'referrer', type: 'string' },
+  { name: 'query', type: 'string' },
+  { name: 'browser', type: 'string' },
+  { name: 'os', type: 'string' },
+  { name: 'device', type: 'string' },
+  { name: 'country', type: 'string' },
+  { name: 'region', type: 'string' },
+  { name: 'city', type: 'string' },
+  { name: 'language', type: 'string' },
+];

 export function InsightsParameters() {
  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
@ -16,7 +32,6 @@ export function InsightsParameters() {
  const { parameters } = report || {};
  const { websiteId, dateRange, fields, filters, groups } = parameters || {};
  const queryEnabled = websiteId && dateRange && fields?.length;
-  const fieldOptions = Object.keys(WEBSITE_EVENT_FIELDS).map(key => WEBSITE_EVENT_FIELDS[key]);

  const parameterGroups = [
    { label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
@ -57,13 +72,14 @@ export function InsightsParameters() {
        <Popup position="bottom" alignment="start">
          {(close, element) => {
            return (
-              <FieldAddForm
-                fields={fieldOptions}
-                group={group}
-                element={element}
-                onAdd={handleAdd}
-                onClose={close}
-              />
+              <PopupForm element={element} onClose={close}>
+                {group === REPORT_PARAMETERS.fields && (
+                  <FieldSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
+                )}
+                {group === REPORT_PARAMETERS.filters && (
+                  <FieldFilterForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
+                )}
+              </PopupForm>
            );
          }}
        </Popup>
--- a/components/pages/reports/insights/InsightsTable.js
+++ b/components/pages/reports/insights/InsightsTable.js
@ -6,11 +6,13 @@ import { ReportContext } from '../Report';
 export function InsightsTable() {
  const { report } = useContext(ReportContext);
  const { formatMessage, labels } = useMessages();
+  const { fields = [] } = report?.parameters || {};

  return (
    <GridTable data={report?.data || []}>
-      <GridColumn name="field" label={formatMessage(labels.field)} />
-      <GridColumn name="value" label={formatMessage(labels.value)} />
+      {fields.map(({ name }) => {
+        return <GridColumn key={name} name={name} label={name} />;
+      })}
      <GridColumn name="total" label={formatMessage(labels.total)} />
    </GridTable>
  );