m
/
umami
mirror of https://github.com/kremalicious/umami.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update field select forms. Created new hooks.

This commit is contained in:
Mike Cao 2024-03-25 13:50:04 -07:00
parent 5daad2726e
commit 8bc1dcb4b3
18 changed files with 282 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/(main)/reports/[reportId]/FieldAddForm.module.css
View File

@ -1,38 +0,0 @@
.menu {
width: 360px;
max-height: 300px;
overflow: auto;
}
.item {
display: flex;
flex-direction: row;
justify-content: space-between;
border-radius: var(--border-radius);
}
.item:hover {
background: var(--base75);
}
.type {
color: var(--font-color300);
}
.selected {
font-weight: bold;
}
.popup {
display: flex;
}
.filter {
display: flex;
flex-direction: column;
gap: 20px;
}
.dropdown {
min-width: 60px;
}

7
src/app/(main)/reports/[reportId]/FieldAddForm.tsx
View File

@ -4,8 +4,7 @@ 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';
import FieldFilterEditForm from './FieldFilterEditForm';
export function FieldAddForm({
fields = [],
@ -38,13 +37,13 @@ export function FieldAddForm({
};
return createPortal(
<PopupForm className={styles.popup}>
<PopupForm>
{!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
{selected && group === REPORT_PARAMETERS.fields && (
<FieldAggregateForm {...selected} onSelect={handleSave} />
)}
{selected && group === REPORT_PARAMETERS.filters && (
<FieldFilterForm {...selected} onSelect={handleSave} />
<FieldFilterEditForm {...selected} onChange={handleSave} />
)}
</PopupForm>,
document.body,

2
src/app/(main)/reports/[reportId]/FieldFilterForm.module.css → src/app/(main)/reports/[reportId]/FieldFilterEditForm.module.css
View File

@ -2,7 +2,7 @@
display: flex;
max-width: 300px;
max-height: 210px;
overflow-x: hidden;
overflow: hidden;
}
.popup > div {

74
src/app/(main)/reports/[reportId]/FieldFilterForm.tsx → src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
View File

@ -10,54 +10,67 @@ import {
Menu,
Popup,
PopupTrigger,
Loading,
} from 'react-basics';
import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
import { useMessages, useFilters, useFormat, useLocale, useWebsiteValues } from 'components/hooks';
import { safeDecodeURIComponent } from 'next-basics';
import { OPERATORS } from 'lib/constants';
import styles from './FieldFilterForm.module.css';
import styles from './FieldFilterEditForm.module.css';
export interface FieldFilterFormProps {
websiteId?: string;
name: string;
label?: string;
type: string;
values?: any[];
onSelect?: (key: any) => void;
defaultValue?: string;
onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void;
allowFilterSelect?: boolean;
isNew?: boolean;
}
export default function FieldFilterForm({
export default function FieldFilterEditForm({
websiteId,
name,
label,
type,
values,
onSelect,
defaultValue,
onChange,
allowFilterSelect = true,
isNew,
}: FieldFilterFormProps) {
const { formatMessage, labels } = useMessages();
const [filter, setFilter] = useState('eq');
const [value, setValue] = useState('');
const [value, setValue] = useState(defaultValue ?? '');
const { getFilters } = useFilters();
const { formatValue } = useFormat();
const { locale } = useLocale();
const filters = getFilters(type);
const { data: values = [], isLoading } = useWebsiteValues(websiteId, name);
const formattedValues = useMemo(() => {
if (!values) {
return {};
}
const formatted = {};
const format = (val: string) => {
formatted[val] = formatValue(val, name);
return formatted[val];
};
if (values.length !== 1) {
if (values?.length !== 1) {
const { compare } = new Intl.Collator(locale, { numeric: true });
values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b)));
} else {
format(values[0]);
}
return formatted;
}, [formatValue, locale, name, values]);
const filteredValues = useMemo(() => {
return value ? values.filter(n => n.includes(value)) : values;
return value
? values.filter(n => formattedValues[n].toLowerCase().includes(value.toLowerCase()))
: values;
}, [value, formattedValues]);
const renderFilterValue = value => {
@ -65,7 +78,7 @@ export default function FieldFilterForm({
};
const handleAdd = () => {
onSelect({ name, type, filter, value });
onChange({ name, type, filter, value });
};
const handleMenuSelect = value => {
@ -74,7 +87,7 @@ export default function FieldFilterForm({
const showMenu =
[OPERATORS.equals, OPERATORS.notEquals].includes(filter as any) &&
!(filteredValues.length === 1 && filteredValues[0] === value);
!(filteredValues?.length === 1 && filteredValues[0] === formattedValues[value]);
return (
<Form>
@ -97,25 +110,44 @@ export default function FieldFilterForm({
<TextField
className={styles.text}
value={decodeURIComponent(value)}
placeholder={formatMessage(labels.enter)}
onChange={e => setValue(e.target.value)}
/>
{showMenu && (
<Popup className={styles.popup} alignment="end">
{filteredValues.length > 0 && (
<Menu variant="popup" onSelect={handleMenuSelect}>
{filteredValues.map(value => {
return <Item key={value}>{safeDecodeURIComponent(value)}</Item>;
})}
</Menu>
)}
<Popup className={styles.popup} alignment="start">
<ResultsMenu
values={filteredValues}
type={name}
isLoading={isLoading}
onSelect={handleMenuSelect}
/>
</Popup>
)}
</PopupTrigger>
</Flexbox>
<Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
{formatMessage(labels.add)}
{isNew ? formatMessage(labels.add) : formatMessage(labels.update)}
</Button>
</FormRow>
</Form>
);
}
const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
const { formatValue } = useFormat();
if (isLoading) {
return <Loading icon="dots" position="center" />;
}
if (!values?.length) {
return null;
}
return (
<Menu variant="popup" onSelect={onSelect}>
{values?.map(value => {
return <Item key={value}>{safeDecodeURIComponent(formatValue(value, type))}</Item>;
})}
</Menu>
);
};

20
src/app/(main)/reports/insights/InsightsFieldParameters.tsx → src/app/(main)/reports/[reportId]/FieldParameters.tsx
View File

@ -1,4 +1,4 @@
import { useMessages } from 'components/hooks';
import { useFields, useMessages } from 'components/hooks';
import Icons from 'components/icons';
import { useContext } from 'react';
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
@ -7,24 +7,12 @@ import ParameterList from '../[reportId]/ParameterList';
import PopupForm from '../[reportId]/PopupForm';
import { ReportContext } from '../[reportId]/Report';
export function InsightsFieldParameters() {
export function FieldParameters() {
const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const { parameters } = report || {};
const { fields } = parameters || {};
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 { fields: fieldOptions } = useFields();
const handleAdd = (value: { name: any }) => {
if (!fields.find(({ name }) => name === value.name)) {
@ -72,4 +60,4 @@ export function InsightsFieldParameters() {
);
}
export default InsightsFieldParameters;
export default FieldParameters;

4
src/app/(main)/reports/insights/InsightsFilterParameters.module.css → src/app/(main)/reports/[reportId]/FilterParameters.module.css
View File

@ -34,3 +34,7 @@
border-radius: 5px;
white-space: nowrap;
}
.edit {
margin-top: 20px;
}

113
src/app/(main)/reports/[reportId]/FilterParameters.tsx Normal file
View File

@ -0,0 +1,113 @@
import { useContext } from 'react';
import { safeDecodeURIComponent } from 'next-basics';
import { useMessages, useFormat, useFilters, useFields } from 'components/hooks';
import Icons from 'components/icons';
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
import FilterSelectForm from '../[reportId]/FilterSelectForm';
import ParameterList from '../[reportId]/ParameterList';
import PopupForm from '../[reportId]/PopupForm';
import { ReportContext } from './Report';
import { OPERATORS } from 'lib/constants';
import FieldFilterEditForm from '../[reportId]/FieldFilterEditForm';
import styles from './FilterParameters.module.css';
export function FilterParameters() {
const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
const { filterLabels } = useFilters();
const { parameters } = report || {};
const { websiteId, filters } = parameters || {};
const { fields } = useFields();
const handleAdd = (value: { name: any }) => {
if (!filters.find(({ name }) => name === value.name)) {
updateReport({ parameters: { filters: filters.concat(value) } });
}
};
const handleRemove = (name: string) => {
updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } });
};
const handleChange = filter => {
updateReport({
parameters: {
filters: filters.map(f => {
if (filter.name === f.name) {
return filter;
}
return f;
}),
},
});
};
const AddButton = () => {
return (
<PopupTrigger>
<Button size="sm">
<Icon>
<Icons.Plus />
</Icon>
</Button>
<Popup position="bottom" alignment="start">
<PopupForm>
<FilterSelectForm
websiteId={websiteId}
fields={fields.filter(({ name }) => !filters.find(f => f.name === name))}
onChange={handleAdd}
/>
</PopupForm>
</Popup>
</PopupTrigger>
);
};
return (
<FormRow label={formatMessage(labels.filters)} action={<AddButton />}>
<ParameterList>
{filters.map(({ name, filter, value }: { name: string; filter: string; value: string }) => {
const label = fields.find(f => f.name === name)?.label;
const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any);
return (
<ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
<FilterParameter
name={name}
label={label}
filter={filterLabels[filter]}
value={isEquals ? formatValue(value, name) : value}
onChange={handleChange}
/>
</ParameterList.Item>
);
})}
</ParameterList>
</FormRow>
);
}
const FilterParameter = ({ name, label, filter, value, type = 'string', onChange }) => {
return (
<PopupTrigger>
<div className={styles.item}>
<div className={styles.label}>{label}</div>
<div className={styles.filter}>{filter}</div>
<div className={styles.value}>{safeDecodeURIComponent(value)}</div>
</div>
<Popup className={styles.edit} alignment="start">
<PopupForm>
<FieldFilterEditForm
name={name}
label={label}
type={type}
defaultValue={value}
onChange={onChange}
/>
</PopupForm>
</Popup>
</PopupTrigger>
);
};
export default FilterParameters;

46
src/app/(main)/reports/[reportId]/FilterSelectForm.tsx
View File

@ -1,59 +1,37 @@
import { useState } from 'react';
import { Loading } from 'react-basics';
import { subDays } from 'date-fns';
import FieldSelectForm from './FieldSelectForm';
import FieldFilterForm from './FieldFilterForm';
import { useApi } from 'components/hooks';
function useValues(websiteId: string, type: string) {
const now = Date.now();
const { get, useQuery } = useApi();
const { data, error, isLoading } = useQuery({
queryKey: ['websites:values', websiteId, type],
queryFn: () =>
get(`/websites/${websiteId}/values`, {
type,
startAt: +subDays(now, 90),
endAt: now,
}),
enabled: !!(websiteId && type),
});
return { data, error, isLoading };
}
import FieldFilterEditForm from './FieldFilterEditForm';
export interface FilterSelectFormProps {
websiteId: string;
websiteId?: string;
fields: any[];
onSelect?: (key: any) => void;
onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void;
allowFilterSelect?: boolean;
}
export default function FilterSelectForm({
websiteId,
fields,
onSelect,
onChange,
allowFilterSelect,
}: FilterSelectFormProps) {
const [field, setField] = useState<{ name: string; label: string; type: string }>();
const { data, isLoading } = useValues(websiteId, field?.name);
if (!field) {
return <FieldSelectForm fields={fields} onSelect={setField} showType={false} />;
}
if (isLoading) {
return <Loading position="center" icon="dots" />;
}
const { name, label, type } = field;
return (
<FieldFilterForm
name={field?.name}
label={field?.label}
type={field?.type}
values={data}
onSelect={onSelect}
<FieldFilterEditForm
websiteId={websiteId}
name={name}
label={label}
type={type}
onChange={onChange}
allowFilterSelect={allowFilterSelect}
isNew={true}
/>
);
}

12
src/app/(main)/reports/[reportId]/ParameterList.tsx
View File

@ -20,9 +20,17 @@ export function ParameterList({ children }: ParameterListProps) {
);
}
const Item = ({ children, onRemove }: { children?: ReactNode; onRemove?: () => void }) => {
const Item = ({
children,
onClick,
onRemove,
}: {
children?: ReactNode;
onClick?: () => void;
onRemove?: () => void;
}) => {
return (
<div className={styles.item}>
<div className={styles.item} onClick={onClick}>
{children}
<Icon onClick={onRemove}>
<Icons.Close />

46
src/app/(main)/reports/event-data/EventDataParameters.tsx
View File

@ -60,10 +60,9 @@ export function EventDataParameters() {
}
};
const handleRemove = (group: string, index: number) => {
const handleRemove = (group: string) => {
const data = [...parameterData[group]];
data.splice(index, 1);
updateReport({ parameters: { [group]: data } });
updateReport({ parameters: { [group]: data.filter(({ name }) => name !== group) } });
};
const AddButton = ({ group, onAdd }) => {
@ -104,29 +103,28 @@ export function EventDataParameters() {
label={label}
action={<AddButton group={group} onAdd={handleAdd} />}
>
<ParameterList
items={parameterData[group]}
onRemove={index => handleRemove(group, index)}
>
{({ name, value }) => {
<ParameterList>
{parameterData[group].map(({ 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>
</>
)}
</div>
<ParameterList.Item key={name} onRemove={() => handleRemove(group)}>
<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>
</>
)}
</div>
</ParameterList.Item>
);
}}
})}
</ParameterList>
</FormRow>
);

15
src/app/(main)/reports/funnel/FunnelParameters.tsx
View File

@ -38,11 +38,9 @@ export function FunnelParameters() {
updateReport({ parameters: { urls: parameters.urls.concat(url) } });
};
const handleRemoveUrl = (index: number, e: any) => {
e.stopPropagation();
const handleRemoveUrl = (url: string) => {
const urls = [...parameters.urls];
urls.splice(index, 1);
updateReport({ parameters: { urls } });
updateReport({ parameters: { urls: urls.filter(n => n.url !== url) } });
};
const AddUrlButton = () => {
@ -72,10 +70,11 @@ export function FunnelParameters() {
</FormInput>
</FormRow>
<FormRow label={formatMessage(labels.urls)} action={<AddUrlButton />}>
<ParameterList
items={urls}
onRemove={(index: number, e: any) => handleRemoveUrl(index, e)}
/>
<ParameterList>
{urls.map(url => {
return <ParameterList.Item key={url} onRemove={() => handleRemoveUrl(url)} />;
})}
</ParameterList>
</FormRow>
<FormButtons>
<SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>

88
src/app/(main)/reports/insights/InsightsFilterParameters.tsx
View File

@ -1,88 +0,0 @@
import { useMessages, useFormat, useFilters } from 'components/hooks';
import Icons from 'components/icons';
import { useContext } from 'react';
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
import FilterSelectForm from '../[reportId]/FilterSelectForm';
import ParameterList from '../[reportId]/ParameterList';
import PopupForm from '../[reportId]/PopupForm';
import { ReportContext } from '../[reportId]/Report';
import styles from './InsightsFilterParameters.module.css';
import { safeDecodeURIComponent } from 'next-basics';
import { OPERATORS } from 'lib/constants';
export function InsightsFilterParameters() {
const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
const { filterLabels } = useFilters();
const { parameters } = report || {};
const { websiteId, filters } = parameters || {};
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 handleAdd = (value: { name: any }) => {
if (!filters.find(({ name }) => name === value.name)) {
updateReport({ parameters: { filters: filters.concat(value) } });
}
};
const handleRemove = (name: string) => {
updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } });
};
const AddButton = () => {
return (
<PopupTrigger>
<Button size="sm">
<Icon>
<Icons.Plus />
</Icon>
</Button>
<Popup position="bottom" alignment="start">
<PopupForm>
<FilterSelectForm
websiteId={websiteId}
fields={fieldOptions.filter(({ name }) => !filters.find(f => f.name === name))}
onSelect={handleAdd}
/>
</PopupForm>
</Popup>
</PopupTrigger>
);
};
return (
<FormRow label={formatMessage(labels.filters)} action={<AddButton />}>
<ParameterList>
{filters.map(({ name, filter, value }) => {
const label = fieldOptions.find(f => f.name === name)?.label;
const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter);
return (
<ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
<div className={styles.item}>
<div className={styles.label}>{label}</div>
<div className={styles.filter}>{filterLabels[filter]}</div>
<div className={styles.value}>
{safeDecodeURIComponent(isEquals ? formatValue(value, name) : value)}
</div>
</div>
</ParameterList.Item>
);
})}
</ParameterList>
</FormRow>
);
}
export default InsightsFilterParameters;

8
src/app/(main)/reports/insights/InsightsParameters.tsx
View File

@ -3,8 +3,8 @@ import { useContext } from 'react';
import { Form, FormButtons, SubmitButton } from 'react-basics';
import BaseParameters from '../[reportId]/BaseParameters';
import { ReportContext } from '../[reportId]/Report';
import InsightsFieldParameters from './InsightsFieldParameters';
import InsightsFilterParameters from './InsightsFilterParameters';
import FieldParameters from '../[reportId]/FieldParameters';
import FilterParameters from '../[reportId]/FilterParameters';
export function InsightsParameters() {
const { report, runReport, isRunning } = useContext(ReportContext);
@ -22,8 +22,8 @@ export function InsightsParameters() {
return (
<Form values={parameters} onSubmit={handleSubmit}>
<BaseParameters allowWebsiteSelect={!id} />
{parametersSelected && <InsightsFieldParameters />}
{parametersSelected && <InsightsFilterParameters />}
{parametersSelected && <FieldParameters />}
{parametersSelected && <FilterParameters />}
<FormButtons>
<SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
{formatMessage(labels.runQuery)}

18
src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx
View File

@ -1,7 +1,7 @@
import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
import FilterSelectForm from 'app/(main)/reports/[reportId]/FilterSelectForm';
import { useMessages, useNavigation } from 'components/hooks';
import { useFields, useMessages, useNavigation } from 'components/hooks';
export function WebsiteFilterButton({
websiteId,
@ -12,17 +12,7 @@ export function WebsiteFilterButton({
}) {
const { formatMessage, labels } = useMessages();
const { renderUrl, router } = useNavigation();
const fieldOptions = [
{ name: 'url', type: 'string', label: formatMessage(labels.url) },
{ name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
{ 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 { fields } = useFields();
const handleAddFilter = ({ name, value }) => {
router.push(renderUrl({ [name]: value }));
@ -42,8 +32,8 @@ export function WebsiteFilterButton({
<PopupForm>
<FilterSelectForm
websiteId={websiteId}
items={fieldOptions}
onSelect={value => {
fields={fields}
onChange={value => {
handleAddFilter(value);
close();
}}

2
src/components/hooks/index.ts
View File

@ -16,10 +16,12 @@ export * from './queries/useWebsite';
export * from './queries/useWebsites';
export * from './queries/useWebsiteEvents';
export * from './queries/useWebsiteMetrics';
export * from './queries/useWebsiteValues';
export * from './useCountryNames';
export * from './useDateRange';
export * from './useDocumentClick';
export * from './useEscapeKey';
export * from './useFields';
export * from './useFilters';
export * from './useForceUpdate';
export * from './useFormat';

20
src/components/hooks/queries/useWebsiteValues.ts Normal file
View File

@ -0,0 +1,20 @@
import { useApi } from 'components/hooks';
import { subDays } from 'date-fns';
export function useWebsiteValues(websiteId: string, type: string) {
const now = Date.now();
const { get, useQuery } = useApi();
return useQuery({
queryKey: ['websites:values', websiteId, type],
queryFn: () =>
get(`/websites/${websiteId}/values`, {
type,
startAt: +subDays(now, 90),
endAt: now,
}),
enabled: !!(websiteId && type),
});
}
export default useWebsiteValues;

22
src/components/hooks/useFields.ts Normal file
View File

@ -0,0 +1,22 @@
import { useMessages } from './useMessages';
export function useFields() {
const { formatMessage, labels } = useMessages();
const fields = [
{ 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) },
];
return { fields };
}
export default useFields;

1
src/components/messages.ts
View File

@ -148,6 +148,7 @@ export const labels = defineMessages({
url: { id: 'label.url', defaultMessage: 'URL' },
urls: { id: 'label.urls', defaultMessage: 'URLs' },
add: { id: 'label.add', defaultMessage: 'Add' },
update: { id: 'label.update', defaultMessage: 'Update' },
window: { id: 'label.window', defaultMessage: 'Window' },
runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
field: { id: 'label.field', defaultMessage: 'Field' },