mirror of
https://github.com/umami-software/umami.git
synced 2026-02-21 21:15:35 +01:00
Update insights report parameters. Added contains logic.
This commit is contained in:
Mike Cao
parent
d59477deb5
commit
5daad2726e
15 changed files with 280 additions and 190 deletions
75
src/app/(main)/reports/insights/InsightsFieldParameters.tsx
Normal file
75
src/app/(main)/reports/insights/InsightsFieldParameters.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
import { useMessages } from 'components/hooks';
|
||||
import Icons from 'components/icons';
|
||||
import { useContext } from 'react';
|
||||
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
|
||||
import FieldSelectForm from '../[reportId]/FieldSelectForm';
|
||||
import ParameterList from '../[reportId]/ParameterList';
|
||||
import PopupForm from '../[reportId]/PopupForm';
|
||||
import { ReportContext } from '../[reportId]/Report';
|
||||
|
||||
export function InsightsFieldParameters() {
|
||||
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 handleAdd = (value: { name: any }) => {
|
||||
if (!fields.find(({ name }) => name === value.name)) {
|
||||
updateReport({ parameters: { fields: fields.concat(value) } });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = (name: string) => {
|
||||
updateReport({ parameters: { fields: fields.filter(f => f.name !== name) } });
|
||||
};
|
||||
|
||||
const AddButton = () => {
|
||||
return (
|
||||
<PopupTrigger>
|
||||
<Button size="sm">
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
</Button>
|
||||
<Popup position="bottom" alignment="start">
|
||||
<PopupForm>
|
||||
<FieldSelectForm
|
||||
fields={fieldOptions.filter(({ name }) => !fields.find(f => f.name === name))}
|
||||
onSelect={handleAdd}
|
||||
showType={false}
|
||||
/>
|
||||
</PopupForm>
|
||||
</Popup>
|
||||
</PopupTrigger>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<FormRow label={formatMessage(labels.fields)} action={<AddButton />}>
|
||||
<ParameterList>
|
||||
{fields.map(({ name }) => {
|
||||
return (
|
||||
<ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
|
||||
{fieldOptions.find(f => f.name === name)?.label}
|
||||
</ParameterList.Item>
|
||||
);
|
||||
})}
|
||||
</ParameterList>
|
||||
</FormRow>
|
||||
);
|
||||
}
|
||||
|
||||
export default InsightsFieldParameters;
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--base800);
|
||||
border: 1px solid var(--base300);
|
||||
font-weight: 900;
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter {
|
||||
color: var(--blue900);
|
||||
background-color: var(--blue100);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: var(--base900);
|
||||
background-color: var(--base100);
|
||||
font-weight: 900;
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
88
src/app/(main)/reports/insights/InsightsFilterParameters.tsx
Normal file
88
src/app/(main)/reports/insights/InsightsFilterParameters.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
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;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.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-inline-start: 30px;
|
||||
}
|
||||
|
|
@ -1,136 +1,29 @@
|
|||
import { useFilters, useFormat, useMessages } from 'components/hooks';
|
||||
import Icons from 'components/icons';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { useContext } from 'react';
|
||||
import {
|
||||
Form,
|
||||
FormButtons,
|
||||
FormRow,
|
||||
Icon,
|
||||
Popup,
|
||||
PopupTrigger,
|
||||
SubmitButton,
|
||||
TooltipPopup,
|
||||
} from 'react-basics';
|
||||
import { Form, FormButtons, SubmitButton } from 'react-basics';
|
||||
import BaseParameters from '../[reportId]/BaseParameters';
|
||||
import FieldSelectForm from '../[reportId]/FieldSelectForm';
|
||||
import FilterSelectForm from '../[reportId]/FilterSelectForm';
|
||||
import ParameterList from '../[reportId]/ParameterList';
|
||||
import PopupForm from '../[reportId]/PopupForm';
|
||||
import { ReportContext } from '../[reportId]/Report';
|
||||
import styles from './InsightsParameters.module.css';
|
||||
import InsightsFieldParameters from './InsightsFieldParameters';
|
||||
import InsightsFilterParameters from './InsightsFilterParameters';
|
||||
|
||||
export function InsightsParameters() {
|
||||
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
|
||||
const { report, runReport, isRunning } = useContext(ReportContext);
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { formatValue } = useFormat();
|
||||
const { filterLabels } = useFilters();
|
||||
const { id, 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: any) => {
|
||||
runReport(values);
|
||||
};
|
||||
|
||||
const handleAdd = (id: string | number, value: { name: any }) => {
|
||||
const data = parameterData[id];
|
||||
|
||||
if (!data.find(({ name }) => name === value.name)) {
|
||||
updateReport({ parameters: { [id]: data.concat(value) } });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = (id: string, index: number) => {
|
||||
const data = [...parameterData[id]];
|
||||
data.splice(index, 1);
|
||||
updateReport({ parameters: { [id]: data } });
|
||||
};
|
||||
|
||||
const AddButton = ({ id, onAdd }) => {
|
||||
return (
|
||||
<PopupTrigger>
|
||||
<TooltipPopup label={formatMessage(labels.add)} position="top">
|
||||
<Icon>
|
||||
<Icons.Plus />
|
||||
</Icon>
|
||||
</TooltipPopup>
|
||||
<Popup position="bottom" alignment="start" className={styles.popup}>
|
||||
<PopupForm>
|
||||
{id === 'fields' && (
|
||||
<FieldSelectForm
|
||||
fields={fieldOptions}
|
||||
onSelect={onAdd.bind(null, id)}
|
||||
showType={false}
|
||||
/>
|
||||
)}
|
||||
{id === 'filters' && (
|
||||
<FilterSelectForm
|
||||
websiteId={websiteId}
|
||||
items={fieldOptions}
|
||||
onSelect={onAdd.bind(null, id)}
|
||||
/>
|
||||
)}
|
||||
</PopupForm>
|
||||
</Popup>
|
||||
</PopupTrigger>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form values={parameters} onSubmit={handleSubmit}>
|
||||
<BaseParameters allowWebsiteSelect={!id} />
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
{parametersSelected && <InsightsFieldParameters />}
|
||||
{parametersSelected && <InsightsFilterParameters />}
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
|
||||
{formatMessage(labels.runQuery)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue