watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-12 16:45:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Insights report filters.

Browse source
This commit is contained in:
Mike Cao 2023-08-09 15:06:19 -07:00
parent acbffed2ce
commit 5039349d57
7 changed files with 138 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

58
components/messages.js
View file

@ -77,7 +77,7 @@ export const labels = defineMessages({
referrers: { id: 'label.referrers', defaultMessage: 'Referrers' }, referrers: { id: 'label.referrers', defaultMessage: 'Referrers' },
screens: { id: 'label.screens', defaultMessage: 'Screens' }, screens: { id: 'label.screens', defaultMessage: 'Screens' },
browsers: { id: 'label.browsers', defaultMessage: 'Browsers' }, browsers: { id: 'label.browsers', defaultMessage: 'Browsers' },
os: { id: 'label.operating-systems', defaultMessage: 'Operating systems' }, os: { id: 'label.os', defaultMessage: 'OS' },
devices: { id: 'label.devices', defaultMessage: 'Devices' }, devices: { id: 'label.devices', defaultMessage: 'Devices' },
countries: { id: 'label.countries', defaultMessage: 'Countries' }, countries: { id: 'label.countries', defaultMessage: 'Countries' },
languages: { id: 'label.languages', defaultMessage: 'Languages' }, languages: { id: 'label.languages', defaultMessage: 'Languages' },
@ -133,33 +133,35 @@ export const labels = defineMessages({
runQuery: { id: 'label.run-query', defaultMessage: 'Run query' }, runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
field: { id: 'label.field', defaultMessage: 'Field' }, field: { id: 'label.field', defaultMessage: 'Field' },
fields: { id: 'label.fields', defaultMessage: 'Fields' }, fields: { id: 'label.fields', defaultMessage: 'Fields' },
createReport: { id: 'labels.create-report', defaultMessage: 'Create report' }, createReport: { id: 'label.create-report', defaultMessage: 'Create report' },
description: { id: 'labels.description', defaultMessage: 'Description' }, description: { id: 'label.description', defaultMessage: 'Description' },
untitled: { id: 'labels.untitled', defaultMessage: 'Untitled' }, untitled: { id: 'label.untitled', defaultMessage: 'Untitled' },
type: { id: 'labels.type', defaultMessage: 'Type' }, type: { id: 'label.type', defaultMessage: 'Type' },
filters: { id: 'labels.filters', defaultMessage: 'Filters' }, filters: { id: 'label.filters', defaultMessage: 'Filters' },
breakdown: { id: 'labels.breakdown', defaultMessage: 'Breakdown' }, breakdown: { id: 'label.breakdown', defaultMessage: 'Breakdown' },
true: { id: 'labels.true', defaultMessage: 'True' }, true: { id: 'label.true', defaultMessage: 'True' },
false: { id: 'labels.false', defaultMessage: 'False' }, false: { id: 'label.false', defaultMessage: 'False' },
equals: { id: 'labels.equals', defaultMessage: 'Equals' }, is: { id: 'label.is', defaultMessage: 'Is' },
doesNotEqual: { id: 'labels.does-not-equal', defaultMessage: 'Does not equal' }, isNot: { id: 'label.is-not', defaultMessage: 'Is not' },
greaterThan: { id: 'labels.greater-than', defaultMessage: 'Greater than' }, isSet: { id: 'label.is-set', defaultMessage: 'Is set' },
lessThan: { id: 'labels.less-than', defaultMessage: 'Less than' }, isNotSet: { id: 'label.is-not-set', defaultMessage: 'Is not set' },
greaterThanEquals: { id: 'labels.greater-than-equals', defaultMessage: 'Greater than or equals' }, greaterThan: { id: 'label.greater-than', defaultMessage: 'Greater than' },
lessThanEquals: { id: 'labels.less-than-equals', defaultMessage: 'Less than or equals' }, lessThan: { id: 'label.less-than', defaultMessage: 'Less than' },
contains: { id: 'labels.contains', defaultMessage: 'Contains' }, greaterThanEquals: { id: 'label.greater-than-equals', defaultMessage: 'Greater than or equals' },
doesNotContain: { id: 'labels.does-not-contain', defaultMessage: 'Does not contain' }, lessThanEquals: { id: 'label.less-than-equals', defaultMessage: 'Less than or equals' },
before: { id: 'labels.before', defaultMessage: 'Before' }, contains: { id: 'label.contains', defaultMessage: 'Contains' },
after: { id: 'labels.after', defaultMessage: 'After' }, doesNotContain: { id: 'label.does-not-contain', defaultMessage: 'Does not contain' },
total: { id: 'labels.total', defaultMessage: 'Total' }, before: { id: 'label.before', defaultMessage: 'Before' },
sum: { id: 'labels.sum', defaultMessage: 'Sum' }, after: { id: 'label.after', defaultMessage: 'After' },
average: { id: 'labels.average', defaultMessage: 'Average' }, total: { id: 'label.total', defaultMessage: 'Total' },
min: { id: 'labels.min', defaultMessage: 'Min' }, sum: { id: 'label.sum', defaultMessage: 'Sum' },
max: { id: 'labels.max', defaultMessage: 'Max' }, average: { id: 'label.average', defaultMessage: 'Average' },
unique: { id: 'labels.unique', defaultMessage: 'Unique' }, min: { id: 'label.min', defaultMessage: 'Min' },
value: { id: 'labels.value', defaultMessage: 'Value' }, max: { id: 'label.max', defaultMessage: 'Max' },
overview: { id: 'labels.overview', defaultMessage: 'Overview' }, unique: { id: 'label.unique', defaultMessage: 'Unique' },
totalRecords: { id: 'labels.total-records', defaultMessage: 'Total records' }, value: { id: 'label.value', defaultMessage: 'Value' },
overview: { id: 'label.overview', defaultMessage: 'Overview' },
totalRecords: { id: 'label.total-records', defaultMessage: 'Total records' },
insights: { id: 'label.insights', defaultMessage: 'Insights' }, insights: { id: 'label.insights', defaultMessage: 'Insights' },
dropoff: { id: 'label.dropoff', defaultMessage: 'Dropoff' }, dropoff: { id: 'label.dropoff', defaultMessage: 'Dropoff' },
referrer: { id: 'label.referrer', defaultMessage: 'Referrer' }, referrer: { id: 'label.referrer', defaultMessage: 'Referrer' },

35
components/pages/reports/FieldFilterForm.js
View file

@ -1,17 +1,28 @@
import { useState } from 'react'; import { useState } from 'react';
import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics'; import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
import { useFilters } from 'hooks'; import { useMessages, useFilters, useFormat } from 'hooks';
import styles from './FieldFilterForm.module.css'; import styles from './FieldFilterForm.module.css';
export default function FieldFilterForm({ label, type, values, onSelect }) { export default function FieldFilterForm({ name, label, type, values, onSelect }) {
const { formatMessage, labels } = useMessages();
const [filter, setFilter] = useState('eq'); const [filter, setFilter] = useState('eq');
const [value, setValue] = useState(); const [value, setValue] = useState();
const filters = useFilters(type); const { getFilters } = useFilters();
const { formatValue } = useFormat();
const filters = getFilters(type);
const renderFilterValue = value => { const renderFilterValue = value => {
return filters.find(f => f.value === value)?.label; return filters.find(f => f.value === value)?.label;
}; };
const renderValue = value => {
return formatValue(value, name);
};
const handleAdd = () => {
onSelect({ name, type, filter, value });
};
return ( return (
<Form> <Form>
<FormRow label={label} className={styles.filter}> <FormRow label={label} className={styles.filter}>
@ -27,18 +38,20 @@ export default function FieldFilterForm({ label, type, values, onSelect }) {
return <Item key={value}>{label}</Item>; return <Item key={value}>{label}</Item>;
}} }}
</Dropdown> </Dropdown>
<Dropdown className={styles.values} items={values} value={value} onChange={setValue}> <Dropdown
className={styles.dropdown}
items={values}
value={value}
renderValue={renderValue}
onChange={setValue}
>
{value => { {value => {
return <Item key={value}>{value}</Item>; return <Item key={value}>{formatValue(value, name)}</Item>;
}} }}
</Dropdown> </Dropdown>
</Flexbox> </Flexbox>
<Button <Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
variant="primary" {formatMessage(labels.add)}
onClick={() => onSelect({ name, type, value: [filter, value] })}
disabled={!filter || !value}
>
Add
</Button> </Button>
</FormRow> </FormRow>
</Form> </Form>

12
components/pages/reports/FilterSelectForm.js
View file

@ -27,8 +27,16 @@ export default function FilterSelectForm({ websiteId, items, onSelect }) {
} }
if (isLoading) { if (isLoading) {
return <Loading />; return <Loading position="center" icon="dots" />;
} }
return <FieldFilterForm label={field?.label} type="string" values={data} onSelect={onSelect} />; return (
<FieldFilterForm
name={field?.name}
label={field?.label}
type="string"
values={data}
onSelect={onSelect}
/>
);
} }

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

@ -1,6 +1,15 @@
import { useContext, useRef } from 'react'; import { useContext, useRef } from 'react';
import { useMessages } from 'hooks'; import { useFormat, useMessages, useFilters } from 'hooks';
import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics'; import {
Form,
FormRow,
FormButtons,
SubmitButton,
PopupTrigger,
Icon,
Popup,
TooltipPopup,
} from 'react-basics';
import { ReportContext } from 'components/pages/reports/Report'; import { ReportContext } from 'components/pages/reports/Report';
import Icons from 'components/icons'; import Icons from 'components/icons';
import BaseParameters from '../BaseParameters'; import BaseParameters from '../BaseParameters';
@ -13,23 +22,26 @@ import FieldSelectForm from '../FieldSelectForm';
export function InsightsParameters() { export function InsightsParameters() {
const { report, runReport, updateReport, isRunning } = useContext(ReportContext); const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
const { filterLabels } = useFilters();
const ref = useRef(null); const ref = useRef(null);
const { parameters } = report || {}; const { parameters } = report || {};
const { websiteId, dateRange, fields, filters } = parameters || {}; const { websiteId, dateRange, fields, filters } = parameters || {};
const { startDate, endDate } = dateRange || {};
const parametersSelected = websiteId && startDate && endDate;
const queryEnabled = websiteId && dateRange && (fields?.length || filters?.length); const queryEnabled = websiteId && dateRange && (fields?.length || filters?.length);
const fieldOptions = [ const fieldOptions = [
{ name: 'url_path', label: formatMessage(labels.url) }, { name: 'url', label: formatMessage(labels.url) },
{ name: 'page_title', label: formatMessage(labels.pageTitle) }, { name: 'title', label: formatMessage(labels.pageTitle) },
{ name: 'referrer_domain', label: formatMessage(labels.referrer) }, { name: 'referrer', label: formatMessage(labels.referrer) },
{ name: 'url_query', label: formatMessage(labels.query) }, { name: 'query', label: formatMessage(labels.query) },
{ name: 'browser', label: formatMessage(labels.browser) }, { name: 'browser', label: formatMessage(labels.browser) },
{ name: 'os', label: formatMessage(labels.os) }, { name: 'os', label: formatMessage(labels.os) },
{ name: 'device', label: formatMessage(labels.device) }, { name: 'device', label: formatMessage(labels.device) },
{ name: 'country', label: formatMessage(labels.country) }, { name: 'country', label: formatMessage(labels.country) },
{ name: 'region', label: formatMessage(labels.region) }, { name: 'region', label: formatMessage(labels.region) },
{ name: 'city', label: formatMessage(labels.city) }, { name: 'city', label: formatMessage(labels.city) },
{ name: 'language', label: formatMessage(labels.language) },
]; ];
const parameterGroups = [ const parameterGroups = [
@ -63,9 +75,11 @@ export function InsightsParameters() {
const AddButton = ({ id }) => { const AddButton = ({ id }) => {
return ( return (
<PopupTrigger> <PopupTrigger>
<Icon> <TooltipPopup label={formatMessage(labels.add)} position="top">
<Icons.Plus /> <Icon>
</Icon> <Icons.Plus />
</Icon>
</TooltipPopup>
<Popup position="bottom" alignment="start"> <Popup position="bottom" alignment="start">
{(close, element) => { {(close, element) => {
return ( return (
@ -91,32 +105,33 @@ export function InsightsParameters() {
return ( return (
<Form ref={ref} values={parameters} onSubmit={handleSubmit}> <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
<BaseParameters /> <BaseParameters />
{parameterGroups.map(({ id, label }) => { {parametersSelected &&
return ( parameterGroups.map(({ id, label }) => {
<FormRow key={label} label={label} action={<AddButton id={id} onAdd={handleAdd} />}> return (
<ParameterList items={parameterData[id]} onRemove={index => handleRemove(id, index)}> <FormRow key={label} label={label} action={<AddButton id={id} onAdd={handleAdd} />}>
{({ value, label }) => { <ParameterList items={parameterData[id]} onRemove={index => handleRemove(id, index)}>
return ( {({ name, filter, value, label }) => {
<div className={styles.parameter}> return (
{id === 'fields' && ( <div className={styles.parameter}>
<> {id === 'fields' && (
<div>{label}</div> <>
</> <div>{label}</div>
)} </>
{id === 'filters' && ( )}
<> {id === 'filters' && (
<div>{label}</div> <>
<div className={styles.op}>{value[0]}</div> <div>{fieldOptions.find(f => f.name === name)?.label}</div>
<div>{value[1]}</div> <div className={styles.op}>{filterLabels[filter]}</div>
</> <div>{formatValue(value, name)}</div>
)} </>
</div> )}
); </div>
}} );
</ParameterList> }}
</FormRow> </ParameterList>
); </FormRow>
})} );
})}
<FormButtons> <FormButtons>
<SubmitButton variant="primary" disabled={!queryEnabled} loading={isRunning}> <SubmitButton variant="primary" disabled={!queryEnabled} loading={isRunning}>
{formatMessage(labels.runQuery)} {formatMessage(labels.runQuery)}

18
hooks/useFilters.js
View file

@ -1,11 +1,13 @@
import { useMessages } from 'hooks'; import { useMessages } from 'hooks';
export function useFilters(type) { export function useFilters() {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const filters = { const filterLabels = {
eq: formatMessage(labels.equals), eq: formatMessage(labels.is),
neq: formatMessage(labels.doesNotEqual), neq: formatMessage(labels.isNot),
s: formatMessage(labels.isSet),
ns: formatMessage(labels.isNotSet),
c: formatMessage(labels.contains), c: formatMessage(labels.contains),
dnc: formatMessage(labels.doesNotContain), dnc: formatMessage(labels.doesNotContain),
t: formatMessage(labels.true), t: formatMessage(labels.true),
@ -18,7 +20,7 @@ export function useFilters(type) {
af: formatMessage(labels.after), af: formatMessage(labels.after),
}; };
const types = { const typeFilters = {
string: ['eq', 'neq'], string: ['eq', 'neq'],
array: ['c', 'dnc'], array: ['c', 'dnc'],
boolean: ['t', 'f'], boolean: ['t', 'f'],
@ -27,7 +29,11 @@ export function useFilters(type) {
uuid: ['eq'], uuid: ['eq'],
}; };
return types[type]?.map(key => ({ type, value: key, label: filters[key] })) ?? []; const getFilters = type => {
return typeFilters[type]?.map(key => ({ type, value: key, label: filterLabels[key] })) ?? [];
};
return { getFilters, filterLabels, typeFilters };
} }
export default useFilters; export default useFilters;

4
pages/api/websites/[id]/values.ts
View file

@ -3,7 +3,7 @@ import { canViewWebsite } from 'lib/auth';
import { useAuth, useCors } from 'lib/middleware'; import { useAuth, useCors } from 'lib/middleware';
import { NextApiResponse } from 'next'; import { NextApiResponse } from 'next';
import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics'; import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics';
import { EVENT_COLUMNS, SESSION_COLUMNS } from 'lib/constants'; import { EVENT_COLUMNS, FILTER_COLUMNS, SESSION_COLUMNS } from 'lib/constants';
import { getValues } from 'queries'; import { getValues } from 'queries';
export interface WebsiteResetRequestQuery { export interface WebsiteResetRequestQuery {
@ -28,7 +28,7 @@ export default async (
return unauthorized(res); return unauthorized(res);
} }
const values = await getValues(websiteId, type as string); const values = await getValues(websiteId, FILTER_COLUMNS[type as string]);
return ok( return ok(
res, res,

11
queries/analytics/reports/getInsights.ts
View file

@ -45,7 +45,7 @@ async function relationalQuery(
and website_event.created_at between {{startDate}} and {{endDate}} and website_event.created_at between {{startDate}} and {{endDate}}
and website_event.event_type = {{eventType}} and website_event.event_type = {{eventType}}
${filterQuery} ${filterQuery}
group by ${fields.map(({ name }) => name).join(',')} ${parseGroupBy(fields)}
order by 1 desc, 2 desc order by 1 desc, 2 desc
limit 500 limit 500
`, `,
@ -78,7 +78,7 @@ async function clickhouseQuery(
and created_at between {startDate:DateTime} and {endDate:DateTime} and created_at between {startDate:DateTime} and {endDate:DateTime}
and event_type = {eventType:UInt32} and event_type = {eventType:UInt32}
${filterQuery} ${filterQuery}
group by ${fields.map(({ name }) => name).join(',')} ${parseGroupBy(fields)}
order by 1 desc, 2 desc order by 1 desc, 2 desc
limit 500 limit 500
`, `,
@ -98,3 +98,10 @@ function parseFields(fields) {
return query.join(',\n'); return query.join(',\n');
} }
function parseGroupBy(fields) {
if (!fields.length) {
return '';
}
return `group by ${fields.map(({ name }) => name).join(',')}`;
}