Renamed (app) folder to (main).

src/app/(main)/reports/insights/InsightsParameters.js

@@ -0,0 +1,148 @@
+import { useContext, useRef } from 'react';
+import { useFormat, useMessages, useFilters } from 'components/hooks';
+import {
+  Form,
+  FormRow,
+  FormButtons,
+  SubmitButton,
+  PopupTrigger,
+  Icon,
+  Popup,
+  TooltipPopup,
+} from 'react-basics';
+import { ReportContext } from '../Report';
+import Icons from 'components/icons';
+import BaseParameters from '../BaseParameters';
+import ParameterList from '../ParameterList';
+import styles from './InsightsParameters.module.css';
+import PopupForm from '../PopupForm';
+import FilterSelectForm from '../FilterSelectForm';
+import FieldSelectForm from '../FieldSelectForm';
+
+export function InsightsParameters() {
+  const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+  const { filterLabels } = useFilters();
+  const ref = useRef(null);
+  const { parameters } = report || {};
+  const { websiteId, dateRange, fields, filters } = parameters || {};
+  const { startDate, endDate } = dateRange || {};
+  const parametersSelected = websiteId && startDate && endDate;
+  const queryEnabled = websiteId && dateRange && (fields?.length || filters?.length);
+
+  const fieldOptions = [
+    { name: 'url', type: 'string', label: formatMessage(labels.url) },
+    { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
+    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
+    { name: 'query', type: 'string', label: formatMessage(labels.query) },
+    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
+    { name: 'os', type: 'string', label: formatMessage(labels.os) },
+    { name: 'device', type: 'string', label: formatMessage(labels.device) },
+    { name: 'country', type: 'string', label: formatMessage(labels.country) },
+    { name: 'region', type: 'string', label: formatMessage(labels.region) },
+    { name: 'city', type: 'string', label: formatMessage(labels.city) },
+  ];
+
+  const parameterGroups = [
+    { id: 'fields', label: formatMessage(labels.fields) },
+    { id: 'filters', label: formatMessage(labels.filters) },
+  ];
+
+  const parameterData = {
+    fields,
+    filters,
+  };
+
+  const handleSubmit = values => {
+    runReport(values);
+  };
+
+  const handleAdd = (id, value) => {
+    const data = parameterData[id];
+
+    if (!data.find(({ name }) => name === value.name)) {
+      updateReport({ parameters: { [id]: data.concat(value) } });
+    }
+  };
+
+  const handleRemove = (id, index) => {
+    const data = [...parameterData[id]];
+    data.splice(index, 1);
+    updateReport({ parameters: { [id]: data } });
+  };
+
+  const AddButton = ({ id }) => {
+    return (
+      <PopupTrigger>
+        <TooltipPopup label={formatMessage(labels.add)} position="top">
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </TooltipPopup>
+        <Popup position="bottom" alignment="start" className={styles.popup}>
+          {close => {
+            return (
+              <PopupForm onClose={close}>
+                {id === 'fields' && (
+                  <FieldSelectForm
+                    items={fieldOptions}
+                    onSelect={handleAdd.bind(null, id)}
+                    showType={false}
+                  />
+                )}
+                {id === 'filters' && (
+                  <FilterSelectForm
+                    websiteId={websiteId}
+                    items={fieldOptions}
+                    onSelect={handleAdd.bind(null, id)}
+                  />
+                )}
+              </PopupForm>
+            );
+          }}
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
+  return (
+    <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
+      <BaseParameters />
+      {parametersSelected &&
+        parameterGroups.map(({ id, label }) => {
+          return (
+            <FormRow key={label} label={label} action={<AddButton id={id} onAdd={handleAdd} />}>
+              <ParameterList items={parameterData[id]} onRemove={index => handleRemove(id, index)}>
+                {({ name, filter, value }) => {
+                  return (
+                    <div className={styles.parameter}>
+                      {id === 'fields' && (
+                        <>
+                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
+                        </>
+                      )}
+                      {id === 'filters' && (
+                        <>
+                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
+                          <div className={styles.op}>{filterLabels[filter]}</div>
+                          <div>{formatValue(value, name)}</div>
+                        </>
+                      )}
+                    </div>
+                  );
+                }}
+              </ParameterList>
+            </FormRow>
+          );
+        })}
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default InsightsParameters;

src/app/(main)/reports/insights/InsightsParameters.module.css

@@ -0,0 +1,17 @@
+.parameter {
+  display: flex;
+  gap: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.op {
+  font-weight: bold;
+}
+
+.popup {
+  margin-top: -10px;
+  margin-left: 30px;
+}

src/app/(main)/reports/insights/InsightsReport.js

@@ -0,0 +1,28 @@
+'use client';
+import Report from '../Report';
+import ReportHeader from '../ReportHeader';
+import ReportMenu from '../ReportMenu';
+import ReportBody from '../ReportBody';
+import InsightsParameters from './InsightsParameters';
+import InsightsTable from './InsightsTable';
+import Lightbulb from 'assets/lightbulb.svg';
+import { REPORT_TYPES } from 'lib/constants';
+
+const defaultParameters = {
+  type: REPORT_TYPES.insights,
+  parameters: { fields: [], filters: [] },
+};
+
+export default function InsightsReport({ reportId }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Lightbulb />} />
+      <ReportMenu>
+        <InsightsParameters />
+      </ReportMenu>
+      <ReportBody>
+        <InsightsTable />
+      </ReportBody>
+    </Report>
+  );
+}

src/app/(main)/reports/insights/InsightsTable.js

@@ -0,0 +1,49 @@
+import { useContext, useEffect, useState } from 'react';
+import { GridTable, GridColumn } from 'react-basics';
+import { useFormat, useMessages } from 'components/hooks';
+import { ReportContext } from '../Report';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+
+export function InsightsTable() {
+  const [fields, setFields] = useState();
+  const { report } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+
+  useEffect(
+    () => {
+      setFields(report?.parameters?.fields);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [report?.data],
+  );
+
+  if (!fields || !report?.parameters) {
+    return <EmptyPlaceholder />;
+  }
+
+  return (
+    <GridTable data={report?.data || []}>
+      {fields.map(({ name, label }) => {
+        return (
+          <GridColumn key={name} name={name} label={label}>
+            {row => formatValue(row[name], name)}
+          </GridColumn>
+        );
+      })}
+      <GridColumn
+        name="visitors"
+        label={formatMessage(labels.visitors)}
+        width="100px"
+        alignment="end"
+      >
+        {row => row.visitors.toLocaleString()}
+      </GridColumn>
+      <GridColumn name="views" label={formatMessage(labels.views)} width="100px" alignment="end">
+        {row => row.views.toLocaleString()}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default InsightsTable;

src/app/(main)/reports/insights/page.tsx

@@ -0,0 +1,10 @@
+import InsightsReport from './InsightsReport';
+import { Metadata } from 'next';
+
+export default function InsightsReportPage() {
+  return <InsightsReport reportId={null} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Insights Report | umami',
+};