Refactored filter parameters.

This commit is contained in:
Mike Cao 2024-03-26 17:31:16 -07:00
parent 1a839d1cae
commit cff2d00536
13 changed files with 291 additions and 123 deletions

View File

@ -3,8 +3,6 @@ import { createPortal } from 'react-dom';
import { REPORT_PARAMETERS } from 'lib/constants'; import { REPORT_PARAMETERS } from 'lib/constants';
import PopupForm from './PopupForm'; import PopupForm from './PopupForm';
import FieldSelectForm from './FieldSelectForm'; import FieldSelectForm from './FieldSelectForm';
import FieldAggregateForm from './FieldAggregateForm';
import FieldFilterEditForm from './FieldFilterEditForm';
export function FieldAddForm({ export function FieldAddForm({
fields = [], fields = [],
@ -17,7 +15,11 @@ export function FieldAddForm({
onAdd: (group: string, value: string) => void; onAdd: (group: string, value: string) => void;
onClose: () => void; onClose: () => void;
}) { }) {
const [selected, setSelected] = useState<{ name: string; type: string; value: string }>(); const [selected, setSelected] = useState<{
name: string;
type: string;
value: string;
}>();
const handleSelect = (value: any) => { const handleSelect = (value: any) => {
const { type } = value; const { type } = value;
@ -39,12 +41,6 @@ export function FieldAddForm({
return createPortal( return createPortal(
<PopupForm> <PopupForm>
{!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />} {!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
{selected && group === REPORT_PARAMETERS.fields && (
<FieldAggregateForm {...selected} onSelect={handleSave} />
)}
{selected && group === REPORT_PARAMETERS.filters && (
<FieldFilterEditForm {...selected} onChange={handleSave} />
)}
</PopupForm>, </PopupForm>,
document.body, document.body,
); );

View File

@ -1,12 +1,7 @@
.popup { .menu {
display: flex; position: absolute;
max-width: 300px; max-width: 300px;
max-height: 210px; max-height: 210px;
overflow: hidden;
}
.popup > div {
overflow-y: auto;
} }
.filter { .filter {
@ -16,9 +11,26 @@
} }
.dropdown { .dropdown {
min-width: 180px; min-width: 200px;
} }
.text { .text {
min-width: 180px; min-width: 200px;
}
.selected {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
white-space: nowrap;
min-width: 200px;
font-weight: 900;
background: var(--base100);
border-radius: var(--border-radius);
cursor: pointer;
}
.search {
position: relative;
} }

View File

@ -6,14 +6,15 @@ import {
Flexbox, Flexbox,
Dropdown, Dropdown,
Button, Button,
SearchField,
TextField, TextField,
Text,
Icon,
Icons,
Menu, Menu,
Popup,
PopupTrigger,
Loading, Loading,
} from 'react-basics'; } from 'react-basics';
import { useMessages, useFilters, useFormat, useLocale, useWebsiteValues } from 'components/hooks'; import { useMessages, useFilters, useFormat, useLocale, useWebsiteValues } from 'components/hooks';
import { safeDecodeURIComponent } from 'next-basics';
import { OPERATORS } from 'lib/constants'; import { OPERATORS } from 'lib/constants';
import styles from './FieldFilterEditForm.module.css'; import styles from './FieldFilterEditForm.module.css';
@ -22,8 +23,11 @@ export interface FieldFilterFormProps {
name: string; name: string;
label?: string; label?: string;
type: string; type: string;
startDate: Date;
endDate: Date;
operator?: string;
defaultValue?: string; defaultValue?: string;
onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void; onChange?: (filter: { name: string; type: string; operator: string; value: string }) => void;
allowFilterSelect?: boolean; allowFilterSelect?: boolean;
isNew?: boolean; isNew?: boolean;
} }
@ -33,19 +37,37 @@ export default function FieldFilterEditForm({
name, name,
label, label,
type, type,
defaultValue, startDate,
endDate,
operator: defaultOperator = 'eq',
defaultValue = '',
onChange, onChange,
allowFilterSelect = true, allowFilterSelect = true,
isNew, isNew,
}: FieldFilterFormProps) { }: FieldFilterFormProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const [filter, setFilter] = useState('eq'); const [operator, setOperator] = useState(defaultOperator);
const [value, setValue] = useState(defaultValue ?? ''); const [value, setValue] = useState(defaultValue);
const [showMenu, setShowMenu] = useState(false);
const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(operator as any);
const [search, setSearch] = useState('');
const [selected, setSelected] = useState(isEquals ? value : '');
const { getFilters } = useFilters(); const { getFilters } = useFilters();
const { formatValue } = useFormat(); const { formatValue } = useFormat();
const { locale } = useLocale(); const { locale } = useLocale();
const filters = getFilters(type); const filters = getFilters(type);
const { data: values = [], isLoading } = useWebsiteValues(websiteId, name); const isDisabled = !operator || (isEquals && !selected) || (!isEquals && !value);
const {
data: values = [],
isLoading,
refetch,
} = useWebsiteValues({
websiteId,
type: name,
startDate,
endDate,
search,
});
const formattedValues = useMemo(() => { const formattedValues = useMemo(() => {
if (!values) { if (!values) {
@ -69,25 +91,49 @@ export default function FieldFilterEditForm({
const filteredValues = useMemo(() => { const filteredValues = useMemo(() => {
return value return value
? values.filter(n => formattedValues[n].toLowerCase().includes(value.toLowerCase())) ? values.filter((n: string | number) =>
formattedValues[n].toLowerCase().includes(value.toLowerCase()),
)
: values; : values;
}, [value, formattedValues]); }, [value, formattedValues]);
const renderFilterValue = value => { const renderFilterValue = (value: any) => {
return filters.find(f => f.value === value)?.label; return filters.find((f: { value: any }) => f.value === value)?.label;
}; };
const handleAdd = () => { const handleAdd = () => {
onChange({ name, type, filter, value }); onChange({ name, type, operator, value: isEquals ? selected : value });
}; };
const handleMenuSelect = value => { const handleMenuSelect = (close: () => void, value: string) => {
setValue(value); setSelected(value);
close();
}; };
const showMenu = const handleSearch = (value: string) => {
[OPERATORS.equals, OPERATORS.notEquals].includes(filter as any) && setSearch(value);
!(filteredValues?.length === 1 && filteredValues[0] === formattedValues[value]); };
const handleReset = () => {
setSelected('');
setValue('');
setSearch('');
refetch();
};
const handleOperatorChange = (value: any) => {
setOperator(value);
if ([OPERATORS.equals, OPERATORS.notEquals].includes(value)) {
setValue('');
} else {
setSelected('');
}
};
const handleBlur = () => {
window.setTimeout(() => setShowMenu(false), 500);
};
return ( return (
<Form> <Form>
@ -97,35 +143,54 @@ export default function FieldFilterEditForm({
<Dropdown <Dropdown
className={styles.dropdown} className={styles.dropdown}
items={filters} items={filters}
value={filter} value={operator}
renderValue={renderFilterValue} renderValue={renderFilterValue}
onChange={(key: any) => setFilter(key)} onChange={handleOperatorChange}
> >
{({ value, label }) => { {({ value, label }) => {
return <Item key={value}>{label}</Item>; return <Item key={value}>{label}</Item>;
}} }}
</Dropdown> </Dropdown>
)} )}
<PopupTrigger> {selected && isEquals && (
<TextField <div className={styles.selected} onClick={handleReset}>
<Text>{selected}</Text>
<Icon>
<Icons.Close />
</Icon>
</div>
)}
{!selected && isEquals && (
<div className={styles.search}>
<SearchField
className={styles.text} className={styles.text}
value={decodeURIComponent(value)} value={value}
placeholder={formatMessage(labels.enter)} placeholder={formatMessage(labels.enter)}
onChange={e => setValue(e.target.value)} onChange={e => setValue(e.target.value)}
onSearch={handleSearch}
delay={500}
onFocus={() => setShowMenu(true)}
onBlur={handleBlur}
/> />
{showMenu && ( {showMenu && (
<Popup className={styles.popup} alignment="start">
<ResultsMenu <ResultsMenu
values={filteredValues} values={filteredValues}
type={name} type={name}
isLoading={isLoading} isLoading={isLoading}
onSelect={handleMenuSelect} onSelect={handleMenuSelect.bind(null, close)}
/>
)}
</div>
)}
{!selected && !isEquals && (
<TextField
className={styles.text}
value={value}
onChange={e => setValue(e.target.value)}
/> />
</Popup>
)} )}
</PopupTrigger>
</Flexbox> </Flexbox>
<Button variant="primary" onClick={handleAdd} disabled={!filter || !value}> <Button variant="primary" onClick={handleAdd} disabled={isDisabled}>
{isNew ? formatMessage(labels.add) : formatMessage(labels.update)} {isNew ? formatMessage(labels.add) : formatMessage(labels.update)}
</Button> </Button>
</FormRow> </FormRow>
@ -136,17 +201,23 @@ export default function FieldFilterEditForm({
const ResultsMenu = ({ values, type, isLoading, onSelect }) => { const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
const { formatValue } = useFormat(); const { formatValue } = useFormat();
if (isLoading) { if (isLoading) {
return <Loading icon="dots" position="center" />; return (
<Menu>
<Item>
<Loading icon="dots" position="center" />
</Item>
</Menu>
);
} }
if (!values?.length) { if (!values?.length) {
return null; return <h1>poop</h1>;
} }
return ( return (
<Menu variant="popup" onSelect={onSelect}> <Menu className={styles.menu} variant="popup" onSelect={onSelect}>
{values?.map(value => { {values?.map(value => {
return <Item key={value}>{safeDecodeURIComponent(formatValue(value, type))}</Item>; return <Item key={value}>{formatValue(value, type)}</Item>;
})} })}
</Menu> </Menu>
); );

View File

@ -15,7 +15,7 @@
white-space: nowrap; white-space: nowrap;
} }
.filter { .op {
color: var(--blue900); color: var(--blue900);
background-color: var(--blue100); background-color: var(--blue100);
font-size: 12px; font-size: 12px;

View File

@ -1,5 +1,4 @@
import { useContext } from 'react'; import { useContext } from 'react';
import { safeDecodeURIComponent } from 'next-basics';
import { useMessages, useFormat, useFilters, useFields } from 'components/hooks'; import { useMessages, useFormat, useFilters, useFields } from 'components/hooks';
import Icons from 'components/icons'; import Icons from 'components/icons';
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics'; import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
@ -15,9 +14,8 @@ export function FilterParameters() {
const { report, updateReport } = useContext(ReportContext); const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat(); const { formatValue } = useFormat();
const { filterLabels } = useFilters();
const { parameters } = report || {}; const { parameters } = report || {};
const { websiteId, filters } = parameters || {}; const { websiteId, filters, dateRange } = parameters || {};
const { fields } = useFields(); const { fields } = useFields();
const handleAdd = (value: { name: any }) => { const handleAdd = (value: { name: any }) => {
@ -30,7 +28,7 @@ export function FilterParameters() {
updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } }); updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } });
}; };
const handleChange = filter => { const handleChange = (close: () => void, filter: { name: any }) => {
updateReport({ updateReport({
parameters: { parameters: {
filters: filters.map(f => { filters: filters.map(f => {
@ -41,6 +39,7 @@ export function FilterParameters() {
}), }),
}, },
}); });
close();
}; };
const AddButton = () => { const AddButton = () => {
@ -67,44 +66,66 @@ export function FilterParameters() {
return ( return (
<FormRow label={formatMessage(labels.filters)} action={<AddButton />}> <FormRow label={formatMessage(labels.filters)} action={<AddButton />}>
<ParameterList> <ParameterList>
{filters.map(({ name, filter, value }: { name: string; filter: string; value: string }) => { {filters.map(
({ name, operator, value }: { name: string; operator: string; value: string }) => {
const label = fields.find(f => f.name === name)?.label; const label = fields.find(f => f.name === name)?.label;
const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any); const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(operator as any);
return ( return (
<ParameterList.Item key={name} onRemove={() => handleRemove(name)}> <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
<FilterParameter <FilterParameter
{...dateRange}
websiteId={websiteId}
name={name} name={name}
label={label} label={label}
filter={filterLabels[filter]} operator={operator}
value={isEquals ? formatValue(value, name) : value} value={isEquals ? formatValue(value, name) : value}
onChange={handleChange} onChange={handleChange}
/> />
</ParameterList.Item> </ParameterList.Item>
); );
})} },
)}
</ParameterList> </ParameterList>
</FormRow> </FormRow>
); );
} }
const FilterParameter = ({ name, label, filter, value, type = 'string', onChange }) => { const FilterParameter = ({
websiteId,
name,
label,
operator,
value,
type = 'string',
startDate,
endDate,
onChange,
}) => {
const { filterLabels } = useFilters();
return ( return (
<PopupTrigger> <PopupTrigger>
<div className={styles.item}> <div className={styles.item}>
<div className={styles.label}>{label}</div> <div className={styles.label}>{label}</div>
<div className={styles.filter}>{filter}</div> <div className={styles.op}>{filterLabels[operator]}</div>
<div className={styles.value}>{safeDecodeURIComponent(value)}</div> <div className={styles.value}>{value}</div>
</div> </div>
<Popup className={styles.edit} alignment="start"> <Popup className={styles.edit} alignment="start">
{(close: any) => (
<PopupForm> <PopupForm>
<FieldFilterEditForm <FieldFilterEditForm
websiteId={websiteId}
name={name} name={name}
label={label} label={label}
type={type} type={type}
startDate={startDate}
endDate={endDate}
operator={operator}
defaultValue={value} defaultValue={value}
onChange={onChange} onChange={onChange.bind(null, close)}
/> />
</PopupForm> </PopupForm>
)}
</Popup> </Popup>
</PopupTrigger> </PopupTrigger>
); );

View File

@ -1,11 +1,12 @@
import { useState } from 'react'; import { useState } from 'react';
import FieldSelectForm from './FieldSelectForm'; import FieldSelectForm from './FieldSelectForm';
import FieldFilterEditForm from './FieldFilterEditForm'; import FieldFilterEditForm from './FieldFilterEditForm';
import { useDateRange } from 'components/hooks';
export interface FilterSelectFormProps { export interface FilterSelectFormProps {
websiteId?: string; websiteId?: string;
fields: any[]; fields: any[];
onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void; onChange?: (filter: { name: string; type: string; operator: string; value: string }) => void;
allowFilterSelect?: boolean; allowFilterSelect?: boolean;
} }
@ -16,6 +17,7 @@ export default function FilterSelectForm({
allowFilterSelect, allowFilterSelect,
}: FilterSelectFormProps) { }: FilterSelectFormProps) {
const [field, setField] = useState<{ name: string; label: string; type: string }>(); const [field, setField] = useState<{ name: string; label: string; type: string }>();
const [{ startDate, endDate }] = useDateRange(websiteId);
if (!field) { if (!field) {
return <FieldSelectForm fields={fields} onSelect={setField} showType={false} />; return <FieldSelectForm fields={fields} onSelect={setField} showType={false} />;
@ -29,6 +31,8 @@ export default function FilterSelectForm({
name={name} name={name}
label={label} label={label}
type={type} type={type}
startDate={startDate}
endDate={endDate}
onChange={onChange} onChange={onChange}
allowFilterSelect={allowFilterSelect} allowFilterSelect={allowFilterSelect}
isNew={true} isNew={true}

View File

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

View File

@ -61,8 +61,8 @@ function getDateFormat(date: Date) {
return `'${dateFormat(date, 'UTC:yyyy-mm-dd HH:MM:ss')}'`; return `'${dateFormat(date, 'UTC:yyyy-mm-dd HH:MM:ss')}'`;
} }
function mapFilter(column: string, filter: string, name: string, type: string = 'String') { function mapFilter(column: string, operator: string, name: string, type: string = 'String') {
switch (filter) { switch (operator) {
case OPERATORS.equals: case OPERATORS.equals:
return `${column} = {${name}:${type}}`; return `${column} = {${name}:${type}}`;
case OPERATORS.notEquals: case OPERATORS.notEquals:

View File

@ -92,16 +92,20 @@ function getTimestampDiffQuery(field1: string, field2: string): string {
} }
} }
function mapFilter(column: string, op: string, name: string, type = 'varchar') { function mapFilter(column: string, operator: string, name: string, type: string = '') {
switch (op) { const db = getDatabaseType();
const like = db === POSTGRESQL ? 'ilike' : 'like';
const value = `{{${name}${type ? `::${type}` : ''}}}`;
switch (operator) {
case OPERATORS.equals: case OPERATORS.equals:
return `${column} = {{${name}::${type}}}`; return `${column} = ${value}`;
case OPERATORS.notEquals: case OPERATORS.notEquals:
return `${column} != {{${name}::${type}}}`; return `${column} != ${value}`;
case OPERATORS.contains: case OPERATORS.contains:
return `${column} ilike {{${name}::${type}}}`; return `${column} ${like} ${value}`;
case OPERATORS.doesNotContain: case OPERATORS.doesNotContain:
return `${column} not ilike {{${name}::${type}}}`; return `${column} not ${like} ${value}`;
default: default:
return ''; return '';
} }
@ -110,11 +114,11 @@ function mapFilter(column: string, op: string, name: string, type = 'varchar') {
function getFilterQuery(filters: QueryFilters = {}, options: QueryOptions = {}): string { function getFilterQuery(filters: QueryFilters = {}, options: QueryOptions = {}): string {
const query = Object.keys(filters).reduce((arr, key) => { const query = Object.keys(filters).reduce((arr, key) => {
const filter = filters[key]; const filter = filters[key];
const op = filter?.op ?? OPERATORS.equals; const operator = filter?.operator ?? OPERATORS.equals;
const column = filter?.column ?? FILTER_COLUMNS[key] ?? options?.columns?.[key]; const column = filter?.column ?? FILTER_COLUMNS[key] ?? options?.columns?.[key];
if (filter !== undefined && column !== undefined) { if (filter !== undefined && column !== undefined) {
arr.push(`and ${mapFilter(column, op, key)}`); arr.push(`and ${mapFilter(column, operator, key)}`);
if (key === 'referrer') { if (key === 'referrer') {
arr.push( arr.push(
@ -131,9 +135,12 @@ function getFilterQuery(filters: QueryFilters = {}, options: QueryOptions = {}):
function normalizeFilters(filters = {}) { function normalizeFilters(filters = {}) {
return Object.keys(filters).reduce((obj, key) => { return Object.keys(filters).reduce((obj, key) => {
const value = filters[key]; const filter = filters[key];
const value = filter?.value ?? filter;
obj[key] = value?.value ?? value; obj[key] = [OPERATORS.contains, OPERATORS.doesNotContain].includes(filter?.operator)
? `%${value}%`
: value;
return obj; return obj;
}, {}); }, {});

View File

@ -13,7 +13,7 @@ export interface InsightsRequestBody {
endDate: string; endDate: string;
}; };
fields: { name: string; type: string; label: string }[]; fields: { name: string; type: string; label: string }[];
filters: { name: string; type: string; filter: string; value: string }[]; filters: { name: string; type: string; operator: string; value: string }[];
groups: { name: string; type: string }[]; groups: { name: string; type: string }[];
} }
@ -42,7 +42,7 @@ const schema = {
yup.object().shape({ yup.object().shape({
name: yup.string().required(), name: yup.string().required(),
type: yup.string().required(), type: yup.string().required(),
filter: yup.string().required(), operator: yup.string().required(),
value: yup.string().required(), value: yup.string().required(),
}), }),
), ),

View File

@ -109,8 +109,8 @@ export default async (
if (search) { if (search) {
filters[column] = { filters[column] = {
column, column,
op: OPERATORS.contains, operator: OPERATORS.contains,
value: '%' + search + '%', value: search,
}; };
} }

View File

@ -2,23 +2,33 @@ import { NextApiRequestQueryBody } from 'lib/types';
import { canViewWebsite } from 'lib/auth'; import { canViewWebsite } from 'lib/auth';
import { useAuth, useCors, useValidate } from 'lib/middleware'; import { useAuth, useCors, useValidate } from 'lib/middleware';
import { NextApiResponse } from 'next'; import { NextApiResponse } from 'next';
import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics'; import {
badRequest,
methodNotAllowed,
ok,
safeDecodeURIComponent,
unauthorized,
} from 'next-basics';
import { EVENT_COLUMNS, FILTER_COLUMNS, SESSION_COLUMNS } from 'lib/constants'; import { EVENT_COLUMNS, FILTER_COLUMNS, SESSION_COLUMNS } from 'lib/constants';
import { getValues } from 'queries'; import { getValues } from 'queries';
import { parseDateRangeQuery } from 'lib/query'; import { parseDateRangeQuery } from 'lib/query';
import * as yup from 'yup';
export interface ValuesRequestQuery { export interface ValuesRequestQuery {
websiteId: string; websiteId: string;
type: string;
startAt: number; startAt: number;
endAt: number; endAt: number;
search?: string;
} }
import * as yup from 'yup';
const schema = { const schema = {
GET: yup.object().shape({ GET: yup.object().shape({
websiteId: yup.string().uuid().required(), websiteId: yup.string().uuid().required(),
type: yup.string().required(),
startAt: yup.number().required(), startAt: yup.number().required(),
endAt: yup.number().required(), endAt: yup.number().required(),
search: yup.string(),
}), }),
}; };
@ -27,7 +37,7 @@ export default async (req: NextApiRequestQueryBody<ValuesRequestQuery>, res: Nex
await useAuth(req, res); await useAuth(req, res);
await useValidate(schema, req, res); await useValidate(schema, req, res);
const { websiteId, type } = req.query; const { websiteId, type, search } = req.query;
const { startDate, endDate } = await parseDateRangeQuery(req); const { startDate, endDate } = await parseDateRangeQuery(req);
if (req.method === 'GET') { if (req.method === 'GET') {
@ -39,12 +49,18 @@ export default async (req: NextApiRequestQueryBody<ValuesRequestQuery>, res: Nex
return unauthorized(res); return unauthorized(res);
} }
const values = await getValues(websiteId, FILTER_COLUMNS[type as string], startDate, endDate); const values = await getValues(
websiteId,
FILTER_COLUMNS[type as string],
startDate,
endDate,
search,
);
return ok( return ok(
res, res,
values values
.map(({ value }) => value) .map(({ value }) => safeDecodeURIComponent(value))
.filter(n => n) .filter(n => n)
.sort(), .sort(),
); );

View File

@ -3,7 +3,7 @@ import clickhouse from 'lib/clickhouse';
import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db'; import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
export async function getValues( export async function getValues(
...args: [websiteId: string, column: string, startDate: Date, endDate: Date] ...args: [websiteId: string, column: string, startDate: Date, endDate: Date, search: string]
) { ) {
return runQuery({ return runQuery({
[PRISMA]: () => relationalQuery(...args), [PRISMA]: () => relationalQuery(...args),
@ -11,42 +11,72 @@ export async function getValues(
}); });
} }
async function relationalQuery(websiteId: string, column: string, startDate: Date, endDate: Date) { async function relationalQuery(
websiteId: string,
column: string,
startDate: Date,
endDate: Date,
search: string,
) {
const { rawQuery } = prisma; const { rawQuery } = prisma;
let searchQuery = '';
if (search) {
searchQuery = `and ${column} LIKE {{search}}`;
}
return rawQuery( return rawQuery(
` `
select distinct ${column} as "value" select ${column} as "value", count(*)
from website_event from website_event
inner join session inner join session
on session.session_id = website_event.session_id on session.session_id = website_event.session_id
where website_event.website_id = {{websiteId::uuid}} where website_event.website_id = {{websiteId::uuid}}
and website_event.created_at between {{startDate}} and {{endDate}} and website_event.created_at between {{startDate}} and {{endDate}}
limit 500 ${searchQuery}
group by 1
order by 2 desc
limit 10
`, `,
{ {
websiteId, websiteId,
startDate, startDate,
endDate, endDate,
search: `%${search}%`,
}, },
); );
} }
async function clickhouseQuery(websiteId: string, column: string, startDate: Date, endDate: Date) { async function clickhouseQuery(
websiteId: string,
column: string,
startDate: Date,
endDate: Date,
search: string,
) {
const { rawQuery } = clickhouse; const { rawQuery } = clickhouse;
let searchQuery = '';
if (search) {
searchQuery = `and positionCaseInsensitive(${column}, {search:String}) > 0`;
}
return rawQuery( return rawQuery(
` `
select distinct ${column} as value select ${column} as value, count(*)
from website_event from website_event
where website_id = {websiteId:UUID} where website_id = {websiteId:UUID}
and created_at between {startDate:DateTime64} and {endDate:DateTime64} and created_at between {startDate:DateTime64} and {endDate:DateTime64}
limit 500 ${searchQuery}
group by 1
order by 2 desc
limit 10
`, `,
{ {
websiteId, websiteId,
startDate, startDate,
endDate, endDate,
search,
}, },
); );
} }