watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-05 05:07:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Moved bounce filter to filter form.

Browse source
This commit is contained in:
Mike Cao 2026-02-04 09:34:32 -08:00
parent 2489601ae6
commit 877b453577
2 changed files with 22 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/(main)/websites/[websiteId]/WebsiteControls.tsx
View file

@ -1,5 +1,4 @@
import { Column, Grid, Row } from '@umami/react-zen';
import { BounceFilter } from '@/components/input/BounceFilter';
import { ExportButton } from '@/components/input/ExportButton';
import { FilterBar } from '@/components/input/FilterBar';
import { MonthFilter } from '@/components/input/MonthFilter';
@ -9,7 +8,6 @@ import { WebsiteFilterButton } from '@/components/input/WebsiteFilterButton';
export function WebsiteControls({
websiteId,
allowFilter = true,
allowBounceFilter = false,
allowDateFilter = true,
allowMonthFilter,
allowDownload = false,
@ -28,7 +26,6 @@ export function WebsiteControls({
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap>
<Row alignItems="center" justifyContent="flex-start" gap="4">
{allowFilter && <WebsiteFilterButton websiteId={websiteId} />}
{allowBounceFilter && <BounceFilter />}
</Row>
<Row alignItems="center" justifyContent={{ xs: 'flex-start', md: 'flex-end' }}>
{allowDateFilter && (

25
src/components/input/WebsiteFilterButton.tsx
View file

@ -1,3 +1,5 @@
import { Checkbox, Row } from '@umami/react-zen';
import { useState } from 'react';
import { useMessages, useNavigation } from '@/components/hooks';
import { ListFilter } from '@/components/icons';
import { DialogButton } from '@/components/input/DialogButton';
@ -12,12 +14,18 @@ export function WebsiteFilterButton({
alignment?: 'end' | 'center' | 'start';
}) {
const { formatMessage, labels } = useMessages();
const { updateParams, router } = useNavigation();
const { updateParams, router, query } = useNavigation();
const [excludeBounce, setExcludeBounce] = useState(!!query.excludeBounce);
const handleChange = ({ filters, segment, cohort }: any) => {
const params = filtersArrayToObject(filters);
const url = updateParams({ ...params, segment, cohort });
const url = updateParams({
...params,
segment,
cohort,
excludeBounce: excludeBounce ? 'true' : undefined,
});
router.push(url);
};
@ -25,7 +33,18 @@ export function WebsiteFilterButton({
return (
<DialogButton icon={<ListFilter />} label={formatMessage(labels.filter)} variant="outline">
{({ close }) => {
return <FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />;
return (
<>
<Row position="absolute" top="30px" right="30px">
<Row alignItems="center" gap>
<Checkbox value={excludeBounce ? 'true' : ''} onChange={setExcludeBounce}>
{formatMessage(labels.excludeBounce)}
</Checkbox>
</Row>
</Row>
<FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />
</>
);
}}
</DialogButton>
);