Merged compare logic. Removed compare page.

This commit is contained in:
Mike Cao 2025-05-02 12:32:23 -07:00
parent f69f793b87
commit 65ebd736b9
8 changed files with 31 additions and 63 deletions

View file

@ -18,7 +18,7 @@ export function MenuBar(props: RowProps) {
paddingX="3" paddingX="3"
paddingRight="5" paddingRight="5"
backgroundColor="2" backgroundColor="2"
style={{ borderBottom: '1px solid var(--border-color)' }} border="bottom"
> >
<Row> <Row>
<Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet"> <Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">

View file

@ -38,7 +38,7 @@ export function Nav(props: any) {
].filter(n => n); ].filter(n => n);
return ( return (
<SideNav {...props} isCollapsed={isCollapsed} variant="2" showBorder={true}> <SideNav {...props} isCollapsed={isCollapsed} variant="0" showBorder={true}>
<SideNavSection> <SideNavSection>
<SideNavHeader label="umami" icon={<Icons.Logo />} /> <SideNavHeader label="umami" icon={<Icons.Logo />} />
</SideNavSection> </SideNavSection>

View file

@ -20,6 +20,7 @@ import { getCompareDate } from '@/lib/date';
import { formatNumber } from '@/lib/format'; import { formatNumber } from '@/lib/format';
import { useState } from 'react'; import { useState } from 'react';
import { useWebsites } from '@/store/websites'; import { useWebsites } from '@/store/websites';
import { Panel } from '@/components/common/Panel';
const views = { const views = {
url: PagesTable, url: PagesTable,
@ -142,22 +143,29 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
}; };
return ( return (
<Grid columns="300px 1fr 1fr" gap="3"> <Panel>
<SideBar items={items} selectedKey={view} /> <Grid columns="200px 1fr 1fr" gap="6">
<Column> <SideBar items={items} selectedKey={view} />
<Heading>{formatMessage(labels.previous)}</Heading> <Column>
<Component <Heading size="1">{formatMessage(labels.previous)}</Heading>
websiteId={websiteId} <Component
limit={20} websiteId={websiteId}
showMore={false} limit={20}
onDataLoad={setData} showMore={false}
params={params} onDataLoad={setData}
/> params={params}
</Column> />
<Column> </Column>
<Heading> {formatMessage(labels.current)}</Heading> <Column>
<Component websiteId={websiteId} limit={20} showMore={false} renderChange={renderChange} /> <Heading size="1"> {formatMessage(labels.current)}</Heading>
</Column> <Component
</Grid> websiteId={websiteId}
limit={20}
showMore={false}
renderChange={renderChange}
/>
</Column>
</Grid>
</Panel>
); );
} }

View file

@ -7,6 +7,7 @@ import { WebsiteExpandedView } from './WebsiteExpandedView';
import { WebsiteHeader } from './WebsiteHeader'; import { WebsiteHeader } from './WebsiteHeader';
import { WebsiteMetricsBar } from './WebsiteMetricsBar'; import { WebsiteMetricsBar } from './WebsiteMetricsBar';
import { WebsiteTableView } from './WebsiteTableView'; import { WebsiteTableView } from './WebsiteTableView';
import { WebsiteCompareTables } from './WebsiteCompareTables';
export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) { export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
const { const {
@ -22,8 +23,9 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
<Panel> <Panel>
<WebsiteChart websiteId={websiteId} compareMode={compare} /> <WebsiteChart websiteId={websiteId} compareMode={compare} />
</Panel> </Panel>
{!view && <WebsiteTableView websiteId={websiteId} />} {!view && !compare && <WebsiteTableView websiteId={websiteId} />}
{view && <WebsiteExpandedView websiteId={websiteId} />} {view && !compare && <WebsiteExpandedView websiteId={websiteId} />}
{compare && <WebsiteCompareTables websiteId={websiteId} />}
</Column> </Column>
); );
} }

View file

@ -31,12 +31,6 @@ export function WebsiteTabs({ websiteId }: { websiteId: string }) {
icon: <Icons.Clock />, icon: <Icons.Clock />,
path: '/realtime', path: '/realtime',
}, },
{
id: 'compare',
label: formatMessage(labels.compare),
icon: <Icons.Compare />,
path: '/compare',
},
{ {
id: 'reports', id: 'reports',
label: formatMessage(labels.reports), label: formatMessage(labels.reports),

View file

@ -1,24 +0,0 @@
'use client';
import { Grid } from '@umami/react-zen';
import { Panel } from '@/components/common/Panel';
import { WebsiteHeader } from '../WebsiteHeader';
import { WebsiteMetricsBar } from '../WebsiteMetricsBar';
import { FilterBar } from '@/components/metrics/FilterBar';
import { WebsiteChart } from '../WebsiteChart';
import { WebsiteCompareTables } from './WebsiteCompareTables';
export function WebsiteComparePage({ websiteId }) {
return (
<Grid gap="3">
<WebsiteHeader websiteId={websiteId} />
<FilterBar websiteId={websiteId} />
<WebsiteMetricsBar websiteId={websiteId} compareMode={true} showFilter={true} />
<Panel>
<WebsiteChart websiteId={websiteId} compareMode={true} />
</Panel>
<Panel>
<WebsiteCompareTables websiteId={websiteId} />
</Panel>
</Grid>
);
}

View file

@ -1,12 +0,0 @@
import { WebsiteComparePage } from './WebsiteComparePage';
import { Metadata } from 'next';
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params;
return <WebsiteComparePage websiteId={websiteId} />;
}
export const metadata: Metadata = {
title: 'Website Comparison',
};