watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2025-12-06 01:18:00 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Cohorts editing.

Browse source
This commit is contained in:
Mike Cao 2025-08-26 23:55:57 -07:00
parent 07665f4824
commit 8c8e36c63b
26 changed files with 1066 additions and 985 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -82,7 +82,7 @@
"@react-spring/web": "^9.7.3",
"@svgr/cli": "^8.1.0",
"@tanstack/react-query": "^5.85.5",
"@umami/react-zen": "^0.164.0",
"@umami/react-zen": "^0.168.0",
"@umami/redis-client": "^0.27.0",
"bcryptjs": "^3.0.2",
"chalk": "^5.6.0",

1672
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

20
src/app/(main)/SideNav.tsx
View file

@ -70,7 +70,11 @@ export function SideNav(props: SidebarProps) {
<Row height="100%" backgroundColor border="right">
<Sidebar {...props} isCollapsed={isCollapsed || hasNav} muteItems={false} showBorder={false}>
<SidebarSection onClick={() => setIsCollapsed(false)}>
<SidebarHeader label="umami" icon={isCollapsed && !hasNav ? <PanelLeft /> : <Logo />}>
<SidebarHeader
label="umami"
icon={isCollapsed && !hasNav ? <PanelLeft /> : <Logo />}
style={{ maxHeight: 40 }}
>
{!isCollapsed && !hasNav && <PanelButton />}
</SidebarHeader>
</SidebarSection>
@ -81,7 +85,12 @@ export function SideNav(props: SidebarProps) {
{links.map(({ id, path, label, icon }) => {
return (
<Link key={id} href={renderUrl(path, false)} role="button">
<SidebarItem label={label} icon={icon} isSelected={pathname.endsWith(path)} />
<SidebarItem
label={label}
icon={icon}
isSelected={pathname.endsWith(path)}
role="button"
/>
</Link>
);
})}
@ -90,7 +99,12 @@ export function SideNav(props: SidebarProps) {
{bottomLinks.map(({ id, path, label, icon }) => {
return (
<Link key={id} href={path} role="button">
<SidebarItem label={label} icon={icon} isSelected={pathname.includes(path)} />
<SidebarItem
label={label}
icon={icon}
isSelected={pathname.includes(path)}
role="button"
/>
</Link>
);
})}

11
src/app/(main)/settings/preferences/DateRangeSetting.tsx
View file

@ -8,17 +8,14 @@ export function DateRangeSetting() {
const { dateRange, saveDateRange } = useDateRange();
const { value } = dateRange;
const handleChange = (value: string) => saveDateRange(value);
const handleChange = (value: string) => {
saveDateRange(value);
};
const handleReset = () => saveDateRange(DEFAULT_DATE_RANGE_VALUE);
return (
<Row gap="3">
<DateFilter
value={value}
startDate={dateRange.startDate}
endDate={dateRange.endDate}
onChange={handleChange}
/>
<DateFilter value={value} onChange={handleChange} />
<Button onPress={handleReset}>{formatMessage(labels.reset)}</Button>
</Row>
);

2
src/app/(main)/websites/[websiteId]/cohorts/CohortAddButton.tsx
View file

@ -15,7 +15,7 @@ export function CohortAddButton({ websiteId }: { websiteId: string }) {
<Text>{formatMessage(labels.cohort)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.cohort)} style={{ width: 800, maxHeight: '90vh' }}>
<Dialog title={formatMessage(labels.cohort)} style={{ width: 800, minHeight: 300 }}>
{({ close }) => {
return <CohortEditForm websiteId={websiteId} onClose={close} />;
}}

2
src/app/(main)/websites/[websiteId]/cohorts/CohortEditButton.tsx
View file

@ -17,7 +17,7 @@ export function CohortEditButton({
return (
<ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
<Dialog title={formatMessage(labels.cohort)} style={{ width: 800, maxHeight: '90vh' }}>
<Dialog title={formatMessage(labels.cohort)} style={{ width: 800, minHeight: 300 }}>
{({ close }) => {
return (
<CohortEditForm

150
src/app/(main)/websites/[websiteId]/cohorts/CohortEditForm.tsx
View file

@ -7,18 +7,29 @@ import {
TextField,
Label,
Loading,
Column,
ComboBox,
Select,
ListItem,
Grid,
useDebounce,
} from '@umami/react-zen';
import { subMonths, endOfDay } from 'date-fns';
import {
useMessages,
useUpdateQuery,
useWebsiteCohortQuery,
useWebsiteValuesQuery,
} from '@/components/hooks';
import { DateFilter } from '@/components/input/DateFilter';
import { FieldFilters } from '@/components/input/FieldFilters';
import { useState } from 'react';
import { useMessages, useUpdateQuery, useWebsiteCohortQuery } from '@/components/hooks';
import { filtersArrayToObject } from '@/lib/params';
import { SetStateAction, useMemo, useState } from 'react';
import { endOfDay, subMonths } from 'date-fns';
import { Empty } from '@/components/common/Empty';
export function CohortEditForm({
cohortId,
websiteId,
filters = [],
showFilters = true,
onSave,
onClose,
}: {
@ -29,32 +40,46 @@ export function CohortEditForm({
onSave?: () => void;
onClose?: () => void;
}) {
const [action, setAction] = useState('path');
const [search, setSearch] = useState('');
const searchValue = useDebounce(search, 300);
const { data } = useWebsiteCohortQuery(websiteId, cohortId);
const { formatMessage, labels, messages } = useMessages();
const [currentFilters, setCurrentFilters] = useState(filters);
const startDate = subMonths(endOfDay(new Date()), 6);
const endDate = endOfDay(new Date());
const { data: searchResults, isLoading } = useWebsiteValuesQuery({
websiteId,
type: action,
search: searchValue,
startDate,
endDate,
});
const { mutate, error, isPending, touch, toast } = useUpdateQuery(
`/websites/${websiteId}/cohorts${cohortId ? `/${cohortId}` : ''}`,
`/websites/${websiteId}/segments${cohortId ? `/${cohortId}` : ''}`,
{
...data,
type: 'cohort',
},
);
const handleSubmit = async (data: any) => {
mutate(
{ ...data, parameters: filtersArrayToObject(currentFilters) },
{
onSuccess: async () => {
toast(formatMessage(messages.save));
touch('cohorts');
onSave?.();
onClose?.();
},
const items: string[] = useMemo(() => {
return searchResults?.map(({ value }) => value) || [];
}, [searchResults]);
const handleSubmit = async (formData: any) => {
mutate(formData, {
onSuccess: async () => {
toast(formatMessage(messages.saved));
touch('cohorts');
onSave?.();
onClose?.();
},
);
});
};
const handleSearch = (value: SetStateAction<string>) => {
setSearch(value);
};
if (cohortId && !data) {
@ -62,7 +87,11 @@ export function CohortEditForm({
}
return (
<Form error={error} onSubmit={handleSubmit} defaultValues={data}>
<Form
error={error}
onSubmit={handleSubmit}
defaultValues={data || { parameters: { filters, dateRange: '30day' } }}
>
<FormField
name="name"
label={formatMessage(labels.name)}
@ -70,27 +99,74 @@ export function CohortEditForm({
>
<TextField autoFocus />
</FormField>
{showFilters && (
<>
<Label>{formatMessage(labels.filters)}</Label>
<FieldFilters
websiteId={websiteId}
filters={currentFilters}
startDate={startDate}
endDate={endDate}
onSave={setCurrentFilters}
/>
</>
)}
<Column>
<Label>{formatMessage(labels.action)}</Label>
<Grid columns="260px 1fr" gap>
<Column>
<Select value={action} onChange={setAction}>
<ListItem id="path">{formatMessage(labels.viewedPage)}</ListItem>
<ListItem id="event">{formatMessage(labels.triggeredEvent)}</ListItem>
</Select>
</Column>
<Column>
<FormField
name="parameters.action"
rules={{ required: formatMessage(labels.required) }}
>
{({ field }) => {
return (
<ComboBox
aria-label="action"
items={items}
inputValue={field?.value}
onInputChange={value => {
handleSearch(value);
field?.onChange?.(value);
}}
formValue="text"
allowsEmptyCollection
allowsCustomValue
renderEmptyState={() =>
isLoading ? (
<Loading position="center" icon="dots" />
) : (
<Empty message={formatMessage(messages.noResultsFound)} />
)
}
>
{items.map(item => (
<ListItem key={item} id={item}>
{item}
</ListItem>
))}
</ComboBox>
);
}}
</FormField>
</Column>
</Grid>
</Column>
<Column width="260px">
<Label>{formatMessage(labels.dateRange)}</Label>
<FormField name="parameters.dateRange" rules={{ required: formatMessage(labels.required) }}>
<DateFilter placement="bottom start" />
</FormField>
</Column>
<Column>
<Label>{formatMessage(labels.filters)}</Label>
<FormField name="parameters.filters" rules={{ required: formatMessage(labels.required) }}>
<FieldFilters websiteId={websiteId} exclude={['path', 'event']} />
</FormField>
</Column>
<FormButtons>
<Button isDisabled={isPending} onPress={onClose}>
{formatMessage(labels.cancel)}
</Button>
<FormSubmitButton
variant="primary"
data-test="button-submit"
isDisabled={isPending || currentFilters.length === 0}
>
<FormSubmitButton variant="primary" data-test="button-submit" isDisabled={isPending}>
{formatMessage(labels.save)}
</FormSubmitButton>
</FormButtons>

2
src/app/(main)/websites/[websiteId]/segments/SegmentAddButton.tsx
View file

@ -15,7 +15,7 @@ export function SegmentAddButton({ websiteId }: { websiteId: string }) {
<Text>{formatMessage(labels.segment)}</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.segment)} style={{ width: 800, maxHeight: '90vh' }}>
<Dialog title={formatMessage(labels.segment)} style={{ width: 800, minHeight: 300 }}>
{({ close }) => {
return <SegmentEditForm websiteId={websiteId} onClose={close} />;
}}

4
src/app/(main)/websites/[websiteId]/segments/SegmentEditButton.tsx
View file

@ -11,13 +11,13 @@ export function SegmentEditButton({
}: {
segmentId: string;
websiteId: string;
filters: any[];
filters?: any[];
}) {
const { formatMessage, labels } = useMessages();
return (
<ActionButton title={formatMessage(labels.edit)} icon={<Edit />}>
<Dialog title={formatMessage(labels.segment)} style={{ width: 800, maxHeight: '90vh' }}>
<Dialog title={formatMessage(labels.segment)} style={{ width: 800, minHeight: 300 }}>
{({ close }) => {
return (
<SegmentEditForm

48
src/app/(main)/websites/[websiteId]/segments/SegmentEditForm.tsx
View file

@ -5,14 +5,11 @@ import {
FormField,
FormSubmitButton,
TextField,
Label,
Loading,
Label,
} from '@umami/react-zen';
import { subMonths, endOfDay } from 'date-fns';
import { FieldFilters } from '@/components/input/FieldFilters';
import { useState } from 'react';
import { useMessages, useUpdateQuery, useWebsiteSegmentQuery } from '@/components/hooks';
import { filtersArrayToObject } from '@/lib/params';
import { messages } from '@/components/messages';
export function SegmentEditForm({
@ -32,30 +29,23 @@ export function SegmentEditForm({
}) {
const { data } = useWebsiteSegmentQuery(websiteId, segmentId);
const { formatMessage, labels } = useMessages();
const [currentFilters, setCurrentFilters] = useState(filters);
const startDate = subMonths(endOfDay(new Date()), 6);
const endDate = endOfDay(new Date());
const { mutate, error, isPending, touch, toast } = useUpdateQuery(
`/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`,
{
...data,
type: 'segment',
},
);
const handleSubmit = async (data: any) => {
mutate(
{ ...data, parameters: filtersArrayToObject(currentFilters) },
{
onSuccess: async () => {
toast(formatMessage(messages.saved));
touch('segments');
onSave?.();
onClose?.();
},
const handleSubmit = async (formData: any) => {
mutate(formData, {
onSuccess: async () => {
toast(formatMessage(messages.saved));
touch('segments');
onSave?.();
onClose?.();
},
);
});
};
if (segmentId && !data) {
@ -63,35 +53,27 @@ export function SegmentEditForm({
}
return (
<Form error={error} onSubmit={handleSubmit} defaultValues={data}>
<Form error={error} onSubmit={handleSubmit} defaultValues={data || { parameters: { filters } }}>
<FormField
name="name"
label={formatMessage(labels.name)}
rules={{ required: formatMessage(labels.required) }}
>
<TextField autoFocus />
<TextField autoFocus={!segmentId} />
</FormField>
{showFilters && (
<>
<Label>{formatMessage(labels.filters)}</Label>
<FieldFilters
websiteId={websiteId}
filters={currentFilters}
startDate={startDate}
endDate={endDate}
onSave={setCurrentFilters}
/>
<FormField name="parameters.filters" rules={{ required: formatMessage(labels.required) }}>
<FieldFilters websiteId={websiteId} />
</FormField>
</>
)}
<FormButtons>
<Button isDisabled={isPending} onPress={onClose}>
{formatMessage(labels.cancel)}
</Button>
<FormSubmitButton
variant="primary"
data-test="button-submit"
isDisabled={isPending || currentFilters.length === 0}
>
<FormSubmitButton variant="primary" data-test="button-submit" isDisabled={isPending}>
{formatMessage(labels.save)}
</FormSubmitButton>
</FormButtons>

9
src/app/(main)/websites/[websiteId]/segments/SegmentsTable.tsx
View file

@ -2,7 +2,6 @@ import { DataTable, DataColumn, Row } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { DateDistance } from '@/components/common/DateDistance';
import { filtersObjectToArray } from '@/lib/params';
import { SegmentEditButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditButton';
import { SegmentDeleteButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentDeleteButton';
import Link from 'next/link';
@ -27,15 +26,11 @@ export function SegmentsTable({ data = [] }) {
</DataColumn>
<DataColumn id="action" align="end" width="100px">
{(row: any) => {
const { id, name, parameters } = row;
const { id, name } = row;
return (
<Row>
<SegmentEditButton
segmentId={id}
websiteId={websiteId}
filters={filtersObjectToArray(parameters)}
/>
<SegmentEditButton segmentId={id} websiteId={websiteId} />
<SegmentDeleteButton segmentId={id} websiteId={websiteId} name={name} />
</Row>
);

6
src/app/api/websites/[websiteId]/values/route.ts
View file

@ -4,14 +4,14 @@ import { getQueryFilters, parseRequest } from '@/lib/request';
import { badRequest, json, unauthorized } from '@/lib/response';
import { getWebsiteSegments, getValues } from '@/queries';
import { z } from 'zod';
import { dateRangeParams, searchParams } from '@/lib/schema';
import { dateRangeParams, fieldsParam, searchParams } from '@/lib/schema';
export async function GET(
request: Request,
{ params }: { params: Promise<{ websiteId: string }> },
) {
const schema = z.object({
type: z.string(),
type: fieldsParam,
...dateRangeParams,
...searchParams,
});
@ -31,7 +31,7 @@ export async function GET(
const { type } = query;
if (!SESSION_COLUMNS.includes(type) && !EVENT_COLUMNS.includes(type) && !FILTER_GROUPS[type]) {
return badRequest('Invalid type.');
return badRequest();
}
let values;

18
src/components/common/FilterRecord.tsx
View file

@ -3,6 +3,7 @@ import { Grid, Column, TextField, Label, Select, Icon, Button, ListItem } from '
import { useFilters, useFormat, useWebsiteValuesQuery } from '@/components/hooks';
import { Close } from '@/components/icons';
import { isSearchOperator } from '@/lib/params';
import { Empty } from '@/components/common/Empty';
export interface FilterRecordProps {
websiteId: string;
@ -41,20 +42,25 @@ export function FilterRecord({
endDate,
});
const isSearch = isSearchOperator(operator);
const items = data?.filter(({ value }) => value) || [];
const handleSearch = value => {
const handleSearch = (value: string) => {
setSearch(value);
};
const handleSelectOperator = value => {
const handleSelectOperator = (value: any) => {
onSelect?.(name, value);
};
const handleSelectValue = value => {
const handleSelectValue = (value: string) => {
setSelected(value);
onChange?.(name, value);
};
const renderValue = () => {
return formatValue(selected, type);
};
return (
<Column>
<Label>{fields.find(f => f.name === name)?.label}</Label>
@ -78,15 +84,17 @@ export function FilterRecord({
)}
{!isSearch && (
<Select
items={data}
items={items}
value={selected}
onChange={handleSelectValue}
searchValue={search}
renderValue={renderValue}
onSearch={handleSearch}
isLoading={isLoading}
listProps={{ renderEmptyState: () => <Empty /> }}
allowSearch
>
{data?.map(({ value }) => {
{items?.map(({ value }) => {
return (
<ListItem key={value} id={value}>
{formatValue(value, type)}

2
src/components/hooks/queries/useWebsiteCohortQuery.ts
View file

@ -13,7 +13,7 @@ export function useWebsiteCohortQuery(
return useQuery({
queryKey: ['website:cohorts', { websiteId, cohortId, modified }],
queryFn: () => get(`/websites/${websiteId}/cohorts/${cohortId}`),
queryFn: () => get(`/websites/${websiteId}/segments/${cohortId}`),
enabled: !!(websiteId && cohortId),
placeholderData: keepPreviousData,
...options,

9
src/components/hooks/useDateRange.ts
View file

@ -1,3 +1,4 @@
import { useMemo } from 'react';
import { getMinimumUnit, parseDateRange, getOffsetDateRange } from '@/lib/date';
import { setItem } from '@/lib/storage';
import { DATE_RANGE_CONFIG, DEFAULT_DATE_COMPARE, DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
@ -6,10 +7,10 @@ import { setDateRangeValue, useApp } from '@/store/app';
import { useLocale } from './useLocale';
import { useApi } from './useApi';
import { useNavigation } from './useNavigation';
import { useMemo } from 'react';
export interface UseDateRangeOptions {
ignoreOffset?: boolean;
useQueryParameter?: boolean;
}
export function useDateRange(websiteId?: string, options: UseDateRangeOptions = {}) {
@ -20,7 +21,11 @@ export function useDateRange(websiteId?: string, options: UseDateRangeOptions =
} = useNavigation();
const websiteConfig = useWebsites(state => state[websiteId]?.dateRange);
const globalConfig = useApp(state => state.dateRangeValue);
const dateValue = date || websiteConfig?.value || globalConfig || DEFAULT_DATE_RANGE_VALUE;
const dateValue =
(options.useQueryParameter ? date : false) ||
websiteConfig?.value ||
globalConfig ||
DEFAULT_DATE_RANGE_VALUE;
const dateRange = useMemo(() => {
const dateRangeObject = parseDateRange(dateValue, locale);

2
src/components/hooks/useMessages.ts
View file

@ -1,7 +1,7 @@
import { useIntl } from 'react-intl';
import { messages, labels } from '@/components/messages';
export function useMessages(): any {
export function useMessages() {
const intl = useIntl();
const getMessage = (id: string) => {

24
src/components/input/DateFilter.tsx
View file

@ -4,31 +4,31 @@ import { endOfYear } from 'date-fns';
import { DatePickerForm } from '@/components/metrics/DatePickerForm';
import { useMessages } from '@/components/hooks';
import { DateDisplay } from '@/components/common/DateDisplay';
import { parseDateRange } from '@/lib/date';
export interface DateFilterProps {
value: string;
startDate: Date;
endDate: Date;
value?: string;
onChange?: (value: string) => void;
showAllTime?: boolean;
renderDate?: boolean;
placement?: string;
}
export function DateFilter({
value,
startDate,
endDate,
onChange,
showAllTime,
renderDate,
placement = 'bottom',
}: DateFilterProps) {
const { formatMessage, labels } = useMessages();
const [showPicker, setShowPicker] = useState(false);
const { startDate, endDate } = parseDateRange(value) || {};
const options = [
{ label: formatMessage(labels.today), value: '0day' },
{
label: formatMessage(labels.lastHours, { x: 24 }),
label: formatMessage(labels.lastHours, { x: '24' }),
value: '24hour',
},
{
@ -37,7 +37,7 @@ export function DateFilter({
divider: true,
},
{
label: formatMessage(labels.lastDays, { x: 7 }),
label: formatMessage(labels.lastDays, { x: '7' }),
value: '7day',
},
{
@ -46,21 +46,21 @@ export function DateFilter({
divider: true,
},
{
label: formatMessage(labels.lastDays, { x: 30 }),
label: formatMessage(labels.lastDays, { x: '30' }),
value: '30day',
},
{
label: formatMessage(labels.lastDays, { x: 90 }),
label: formatMessage(labels.lastDays, { x: '90' }),
value: '90day',
},
{ label: formatMessage(labels.thisYear), value: '0year' },
{
label: formatMessage(labels.lastMonths, { x: 6 }),
label: formatMessage(labels.lastMonths, { x: '6' }),
value: '6month',
divider: true,
},
{
label: formatMessage(labels.lastMonths, { x: 12 }),
label: formatMessage(labels.lastMonths, { x: '12' }),
value: '12month',
},
showAllTime && {
@ -105,7 +105,7 @@ export function DateFilter({
placeholder={formatMessage(labels.selectDate)}
onChange={handleChange}
renderValue={renderValue}
popoverProps={{ placement: 'bottom' }}
popoverProps={{ placement: placement as any }}
>
{options.map(({ label, value, divider }: any) => {
return (

46
src/components/input/FieldFilters.tsx
View file

@ -1,4 +1,5 @@
import { Key } from 'react';
import { subMonths, endOfDay } from 'date-fns';
import { Grid, Column, List, ListItem } from '@umami/react-zen';
import { useFields, useMessages } from '@/components/hooks';
import { FilterRecord } from '@/components/common/FilterRecord';
@ -6,28 +7,23 @@ import { Empty } from '@/components/common/Empty';
export interface FieldFiltersProps {
websiteId: string;
filters: { name: string; operator: string; value: string }[];
startDate: Date;
endDate: Date;
onSave?: (data: any) => void;
value?: { name: string; operator: string; value: string }[];
exclude?: string[];
onChange?: (data: any) => void;
}
export function FieldFilters({
websiteId,
filters,
startDate,
endDate,
onSave,
}: FieldFiltersProps) {
export function FieldFilters({ websiteId, value, exclude = [], onChange }: FieldFiltersProps) {
const { formatMessage, messages } = useMessages();
const { fields } = useFields();
const startDate = subMonths(endOfDay(new Date()), 6);
const endDate = endOfDay(new Date());
const updateFilter = (name: string, props: Record<string, any>) => {
onSave(filters.map(filter => (filter.name === name ? { ...filter, ...props } : filter)));
onChange(value.map(filter => (filter.name === name ? { ...filter, ...props } : filter)));
};
const handleAdd = (name: Key) => {
onSave(filters.concat({ name: name.toString(), operator: 'eq', value: '' }));
onChange(value.concat({ name: name.toString(), operator: 'eq', value: '' }));
};
const handleChange = (name: string, value: Key) => {
@ -39,25 +35,27 @@ export function FieldFilters({
};
const handleRemove = (name: string) => {
onSave(filters.filter(filter => filter.name !== name));
onChange(value.filter(filter => filter.name !== name));
};
return (
<Grid columns="160px 1fr" overflow="hidden" gapY="6">
<Column border="right" paddingRight="3">
<List onAction={handleAdd}>
{fields.map((field: any) => {
const isDisabled = !!filters.find(({ name }) => name === field.name);
return (
<ListItem key={field.name} id={field.name} isDisabled={isDisabled}>
{field.label}
</ListItem>
);
})}
{fields
.filter(({ name }) => !exclude.includes(name))
.map(field => {
const isDisabled = !!value.find(({ name }) => name === field.name);
return (
<ListItem key={field.name} id={field.name} isDisabled={isDisabled}>
{field.label}
</ListItem>
);
})}
</List>
</Column>
<Column paddingLeft="6" overflow="auto" gapY="4" height="500px" style={{ contain: 'layout' }}>
{filters.map(filter => {
{value.map(filter => {
return (
<FilterRecord
key={filter.name}
@ -72,7 +70,7 @@ export function FieldFilters({
/>
);
})}
{!filters.length && <Empty message={formatMessage(messages.nothingSelected)} />}
{!value.length && <Empty message={formatMessage(messages.nothingSelected)} />}
</Column>
</Grid>
);

4
src/components/input/FilterBar.tsx
View file

@ -72,7 +72,7 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
label={label}
operator={operatorLabels[operator]}
value={paramValue}
onRemove={name => handleCloseFilter(name)}
onRemove={(name: string) => handleCloseFilter(name)}
/>
);
})}
@ -143,7 +143,7 @@ const FilterItem = ({ name, label, operator, value, onRemove }) => {
{value}
</Text>
</Row>
<Icon onClick={() => onRemove(name)} size="xs">
<Icon onClick={() => onRemove(name)} size="xs" style={{ cursor: 'pointer' }}>
<Close />
</Icon>
</Row>

2
src/components/input/FilterEditForm.tsx
View file

@ -51,7 +51,7 @@ export function FilterEditForm({
<TabPanel id="fields">
<FieldFilters
websiteId={websiteId}
filters={currentFilters}
value={currentFilters}
startDate={startDate}
endDate={endDate}
onSave={setCurrentFilters}

4
src/components/input/TeamsButton.tsx
View file

@ -38,8 +38,8 @@ export function TeamsButton({ showText = true }: { showText?: boolean }) {
return (
<MenuTrigger>
<Pressable>
<Row width="100%" backgroundColor="2" border borderRadius>
<SidebarItem label={label} icon={teamId ? <Users /> : <User />}>
<Row role="button" width="100%" backgroundColor="2" border borderRadius>
<SidebarItem role="button" label={label} icon={teamId ? <Users /> : <User />}>
{showText && (
<Icon rotate={90} size="sm">
<Chevron />

4
src/components/input/WebsiteDateFilter.tsx
View file

@ -19,7 +19,7 @@ export function WebsiteDateFilter({
allowCompare,
}: WebsiteDateFilterProps) {
const { dateRange } = useDateRange(websiteId);
const { value, startDate, endDate } = dateRange;
const { value, endDate } = dateRange;
const { formatMessage, labels } = useMessages();
const {
router,
@ -61,8 +61,6 @@ export function WebsiteDateFilter({
)}
<DateFilter
value={value}
startDate={startDate}
endDate={endDate}
onChange={handleChange}
showAllTime={showAllTime}
renderDate={+offset !== 0}

2
src/components/messages.ts
View file

@ -51,6 +51,7 @@ export const labels = defineMessages({
data: { id: 'label.data', defaultMessage: 'Data' },
trackingCode: { id: 'label.tracking-code', defaultMessage: 'Tracking code' },
shareUrl: { id: 'label.share-url', defaultMessage: 'Share URL' },
action: { id: 'label.action', defaultMessage: 'Action' },
actions: { id: 'label.actions', defaultMessage: 'Actions' },
domain: { id: 'label.domain', defaultMessage: 'Domain' },
websiteId: { id: 'label.website-id', defaultMessage: 'Website ID' },
@ -357,6 +358,7 @@ export const labels = defineMessages({
audience: { id: 'label.audience', defaultMessage: 'Audience' },
invalidUrl: { id: 'label.invalid-url', defaultMessage: 'Invalid URL' },
environment: { id: 'label.environment', defaultMessage: 'Environment' },
criteria: { id: 'label.criteria', defaultMessage: 'Criteria' },
});
export const messages = defineMessages({

1
src/components/metrics/WeeklyTraffic.tsx
View file

@ -85,6 +85,7 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
height="16px"
borderRadius="full"
style={{ margin: '0 auto' }}
role="cell"
>
<Row
backgroundColor="primary"

4
src/lib/params.ts
View file

@ -19,6 +19,10 @@ export function isSearchOperator(operator: any) {
}
export function filtersObjectToArray(filters: QueryFilters, options: QueryOptions = {}) {
if (!filters) {
return [];
}
return Object.keys(filters).reduce((arr, key) => {
const filter = filters[key];

1
src/lib/schema.ts
View file

@ -87,6 +87,7 @@ export const fieldsParam = z.enum([
'tag',
'hostname',
'language',
'event',
]);
export const reportTypeParam = z.enum([