watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-18 19:45:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Panels redesign.

Browse source
This commit is contained in:
Mike Cao 2025-03-25 14:47:51 -07:00
parent 7886c3f393
commit f5bc3dc6c2
58 changed files with 530 additions and 733 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx
View file

@ -1,4 +1,6 @@
'use client';
import { Grid } from '@umami/react-zen';
import { Panel } from '@/components/layout/Panel';
import { WebsiteHeader } from '../WebsiteHeader';
import { WebsiteMetricsBar } from '../WebsiteMetricsBar';
import { FilterTags } from '@/components/metrics/FilterTags';
@ -18,12 +20,16 @@ export function WebsiteComparePage({ websiteId }) {
}, {});
return (
<>
<Grid gap="3">
<WebsiteHeader websiteId={websiteId} />
<FilterTags websiteId={websiteId} params={params} />
<WebsiteMetricsBar websiteId={websiteId} compareMode={true} showFilter={true} />
<WebsiteChart websiteId={websiteId} compareMode={true} />
<WebsiteCompareTables websiteId={websiteId} />
</>
<Panel>
<WebsiteChart websiteId={websiteId} compareMode={true} />
</Panel>
<Panel>
<WebsiteCompareTables websiteId={websiteId} />
</Panel>
</Grid>
);
}

44
src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.tsx
View file

@ -1,6 +1,6 @@
import { Grid, Heading, Column } from '@umami/react-zen';
import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
import { Grid, GridRow } from '@/components/layout/Grid';
import { MenuNav } from '@/components/layout/MenuNav';
import { SideBar } from '@/components/layout/SideBar';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
import { ChangeLabel } from '@/components/metrics/ChangeLabel';
import { CitiesTable } from '@/components/metrics/CitiesTable';
@ -20,7 +20,6 @@ import { getCompareDate } from '@/lib/date';
import { formatNumber } from '@/lib/format';
import { useState } from 'react';
import { useWebsites } from '@/store/websites';
import styles from './WebsiteCompareTables.module.css';
const views = {
url: PagesTable,
@ -143,29 +142,22 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
};
return (
<Grid className={styles.container}>
<GridRow columns="compare">
<MenuNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
<div>
<div className={styles.title}>{formatMessage(labels.previous)}</div>
<Component
websiteId={websiteId}
limit={20}
showMore={false}
onDataLoad={setData}
params={params}
/>
</div>
<div>
<div className={styles.title}> {formatMessage(labels.current)}</div>
<Component
websiteId={websiteId}
limit={20}
showMore={false}
renderChange={renderChange}
/>
</div>
</GridRow>
<Grid columns="300px 1fr 1fr" gap="3">
<SideBar items={items} selectedKey={view} />
<Column>
<Heading>{formatMessage(labels.previous)}</Heading>
<Component
websiteId={websiteId}
limit={20}
showMore={false}
onDataLoad={setData}
params={params}
/>
</Column>
<Column>
<Heading> {formatMessage(labels.current)}</Heading>
<Component websiteId={websiteId} limit={20} showMore={false} renderChange={renderChange} />
</Column>
</Grid>
);
}