watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 15:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Refactored query filters.

Browse source
This commit is contained in:
Mike Cao 2023-08-04 00:51:52 -07:00
parent b65c478689
commit 157862834d
16 changed files with 118 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/pages/reports/FieldSelectForm.js
View file

@ -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>
);
})}

7
components/pages/reports/funnel/FunnelParameters.js
View file

@ -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>

40
components/pages/reports/funnel/UrlAddForm.js
View file

@ -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>
);
}

36
components/pages/reports/insights/InsightsParameters.js
View file

@ -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>