Updated filter params logic. Added inline compare dates.

This commit is contained in:
Mike Cao 2025-04-15 15:32:25 -07:00
parent bfdd3f9525
commit e79f4717e7
17 changed files with 1128 additions and 1057 deletions

View file

@ -1,5 +0,0 @@
import { Row } from '@umami/react-zen';
export function WebsiteCompareBar({ websiteId }: { websiteId: string }) {
return <Row>compare {websiteId}</Row>;
}

View file

@ -10,7 +10,7 @@ import { WebsiteTableView } from './WebsiteTableView';
export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
const {
query: { view },
query: { view, compare },
} = useNavigation();
return (
@ -20,7 +20,7 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
<WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
</Panel>
<Panel>
<WebsiteChart websiteId={websiteId} />
<WebsiteChart websiteId={websiteId} compareMode={compare} />
</Panel>
{!view && <WebsiteTableView websiteId={websiteId} />}
{view && <WebsiteExpandedView websiteId={websiteId} />}

View file

@ -1,7 +1,6 @@
import { Button, Icon, Icons, DialogTrigger, Dialog, Modal, Text } from '@umami/react-zen';
import { FilterEditForm } from '@/components/common/FilterEditForm';
import { useMessages, useNavigation, useFilters } from '@/components/hooks';
import { OPERATORS } from '@/lib/constants';
export function WebsiteFilterButton({
websiteId,
@ -20,7 +19,7 @@ export function WebsiteFilterButton({
const params = filters.reduce((obj, filter) => {
const { name, operator, value } = filter;
obj[name] = operator === OPERATORS.equals ? value : `${operator}~${value}`;
obj[name] = `${operator}.${value}`;
return obj;
}, {});

View file

@ -7,7 +7,6 @@ import { WebsiteFilterButton } from '@/app/(main)/websites/[websiteId]/WebsiteFi
import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
import { FilterBar } from '@/components/metrics/FilterBar';
import { WebsiteMenu } from '@/app/(main)/websites/[websiteId]/WebsiteMenu';
import { WebsiteCompareBar } from '@/app/(main)/websites/[websiteId]/WebsiteCompareBar';
export function WebsiteHeader({
websiteId,
@ -17,7 +16,6 @@ export function WebsiteHeader({
websiteId: string;
showFilter?: boolean;
allowEdit?: boolean;
compareMode?: boolean;
}) {
const website = useWebsite();
const { name, domain } = website || {};
@ -36,7 +34,6 @@ export function WebsiteHeader({
{allowEdit && <WebsiteMenu websiteId={websiteId} />}
</Row>
</Row>
<WebsiteCompareBar websiteId={websiteId} />
<FilterBar websiteId={websiteId} />
<WebsiteTabs websiteId={websiteId} />
</Column>

View file

@ -11,17 +11,26 @@ import {
} from '@umami/react-zen';
import { Fragment } from 'react';
import { Lucide } from '@/components/icons';
import { useMessages } from '@/components/hooks';
import { useMessages, useNavigation } from '@/components/hooks';
import { InputItem } from '@/lib/types';
export function WebsiteMenu({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { router, renderUrl, renderTeamUrl } = useNavigation();
const menuItems = [
{ label: formatMessage(labels.compare), icon: <Lucide.GitCompare /> },
{ label: formatMessage(labels.share), icon: <Lucide.Share /> },
{ label: formatMessage(labels.edit), icon: <Lucide.Edit />, seperator: true },
const menuItems: InputItem[] = [
{ id: 'share', label: formatMessage(labels.share), icon: <Lucide.Share /> },
{ id: 'edit', label: formatMessage(labels.edit), icon: <Lucide.Edit />, seperator: true },
];
const handleAction = (id: any) => {
if (id === 'compare') {
router.push(renderUrl({ compare: 'prev' }));
} else if (id === 'edit') {
router.push(renderTeamUrl(`/settings/websites/${websiteId}`));
}
};
return (
<MenuTrigger>
<Button variant="quiet">
@ -29,13 +38,13 @@ export function WebsiteMenu({ websiteId }: { websiteId: string }) {
<Icons.More />
</Icon>
</Button>
<Popover placement="bottom end">
<Menu>
{menuItems.map(({ label, icon, seperator }, index) => {
<Popover placement="bottom">
<Menu onAction={handleAction}>
{menuItems.map(({ id, label, icon, seperator }, index) => {
return (
<Fragment key={index}>
{seperator && <MenuSeparator />}
<MenuItem>
<MenuItem id={id}>
<Icon>{icon}</Icon>
<Text>{label}</Text>
</MenuItem>