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 6

Implemented expanded view in dialog.

Browse source
This commit is contained in:
Mike Cao 2025-08-07 22:10:02 -07:00
parent 0b4851125d
commit 4e25c07160
9 changed files with 136 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,5 @@
import { Grid, Heading, Column, Row } from '@umami/react-zen';
import { Grid, Heading, Column, Row, NavMenu, NavMenuItem, Text } from '@umami/react-zen';
import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
import { SideMenu } from '@/components/common/SideMenu';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
import { ChangeLabel } from '@/components/metrics/ChangeLabel';
import { CitiesTable } from '@/components/metrics/CitiesTable';
@ -40,7 +39,7 @@ const views = {
};
export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
const [data, setData] = useState([]);
const [data] = useState([]);
const { dateRange, dateCompare } = useDateRange(websiteId);
const { formatMessage, labels } = useMessages();
const {
@ -53,72 +52,72 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
{
id: 'path',
label: formatMessage(labels.pages),
url: updateParams({ view: 'path' }),
path: updateParams({ view: 'path' }),
},
{
id: 'referrer',
label: formatMessage(labels.referrers),
url: updateParams({ view: 'referrer' }),
path: updateParams({ view: 'referrer' }),
},
{
id: 'browser',
label: formatMessage(labels.browsers),
url: updateParams({ view: 'browser' }),
path: updateParams({ view: 'browser' }),
},
{
id: 'os',
label: formatMessage(labels.os),
url: updateParams({ view: 'os' }),
path: updateParams({ view: 'os' }),
},
{
id: 'device',
label: formatMessage(labels.devices),
url: updateParams({ view: 'device' }),
path: updateParams({ view: 'device' }),
},
{
id: 'country',
label: formatMessage(labels.countries),
url: updateParams({ view: 'country' }),
path: updateParams({ view: 'country' }),
},
{
id: 'region',
label: formatMessage(labels.regions),
url: updateParams({ view: 'region' }),
path: updateParams({ view: 'region' }),
},
{
id: 'city',
label: formatMessage(labels.cities),
url: updateParams({ view: 'city' }),
path: updateParams({ view: 'city' }),
},
{
id: 'language',
label: formatMessage(labels.languages),
url: updateParams({ view: 'language' }),
path: updateParams({ view: 'language' }),
},
{
id: 'screen',
label: formatMessage(labels.screens),
url: updateParams({ view: 'screen' }),
path: updateParams({ view: 'screen' }),
},
{
id: 'event',
label: formatMessage(labels.events),
url: updateParams({ view: 'event' }),
path: updateParams({ view: 'event' }),
},
{
id: 'query',
label: formatMessage(labels.queryParameters),
url: updateParams({ view: 'query' }),
path: updateParams({ view: 'query' }),
},
{
id: 'hostname',
label: formatMessage(labels.hostname),
url: updateParams({ view: 'hostname' }),
path: updateParams({ view: 'hostname' }),
},
{
id: 'tag',
label: formatMessage(labels.tags),
url: updateParams({ view: 'tag' }),
path: updateParams({ view: 'tag' }),
},
];
@ -150,19 +149,21 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
return (
<Panel>
<Grid columns={{ xs: '1fr', lg: '200px 1fr 1fr' }} gap="6">
<SideMenu items={items} selectedKey={view} />
<NavMenu>
{items.map(({ id, label }) => {
return (
<NavMenuItem key={id}>
<Text>{label}</Text>
</NavMenuItem>
);
})}
</NavMenu>
<Column border="left" paddingLeft="6" gap="6">
<Row alignItems="center" justifyContent="space-between">
<Heading size="1">{formatMessage(labels.previous)}</Heading>
<DateDisplay startDate={startDate} endDate={endDate} />
</Row>
<Component
websiteId={websiteId}
limit={20}
showMore={false}
onDataLoad={setData}
params={params}
/>
<Component websiteId={websiteId} limit={20} showMore={false} params={params} />
</Column>
<Column border="left" paddingLeft="6" gap="6">
<Row alignItems="center" justifyContent="space-between">

26
src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
View file

@ -1,18 +1,29 @@
'use client';
import { Column } from '@umami/react-zen';
import { Column, Modal, Dialog } from '@umami/react-zen';
import { useNavigation } from '@/components/hooks';
import { Panel } from '@/components/common/Panel';
import { WebsiteChart } from './WebsiteChart';
import { WebsiteExpandedView } from './WebsiteExpandedView';
import { WebsiteMetricsBar } from './WebsiteMetricsBar';
import { WebsiteTableView } from './WebsiteTableView';
import { WebsiteCompareTables } from './WebsiteCompareTables';
import { WebsiteControls } from './WebsiteControls';
export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
const {
router,
query: { view, compare },
updateParams,
} = useNavigation();
const handleClose = (close: () => void) => {
router.push(updateParams({ view: undefined }));
close();
};
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
router.push(updateParams({ view: undefined }));
}
};
return (
<Column gap>
@ -21,9 +32,14 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
<Panel>
<WebsiteChart websiteId={websiteId} compareMode={compare} />
</Panel>
{!view && !compare && <WebsiteTableView websiteId={websiteId} />}
{view && !compare && <WebsiteExpandedView websiteId={websiteId} />}
{compare && <WebsiteCompareTables websiteId={websiteId} />}
<WebsiteTableView websiteId={websiteId} />
<Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
<Dialog style={{ width: '90vw', height: '90vh' }}>
{({ close }) => {
return <WebsiteExpandedView websiteId={websiteId} onClose={() => handleClose(close)} />;
}}
</Dialog>
</Modal>
</Column>
);
}

91
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -1,7 +1,5 @@
import { Icon, Text, Grid, Column } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { Grid, Column, NavMenu, NavMenuItem } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { SideMenu } from '@/components/common/SideMenu';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
import { CitiesTable } from '@/components/metrics/CitiesTable';
import { CountriesTable } from '@/components/metrics/CountriesTable';
@ -17,8 +15,7 @@ import { RegionsTable } from '@/components/metrics/RegionsTable';
import { ScreenTable } from '@/components/metrics/ScreenTable';
import { TagsTable } from '@/components/metrics/TagsTable';
import { ChannelsTable } from '@/components/metrics/ChannelsTable';
import { Panel } from '@/components/common/Panel';
import { Arrow } from '@/components/icons';
import Link from 'next/link';
const views = {
path: PagesTable,
@ -44,10 +41,10 @@ const views = {
export function WebsiteExpandedView({
websiteId,
domainName,
onClose,
}: {
websiteId: string;
domainName?: string;
onClose?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const {
@ -59,107 +56,107 @@ export function WebsiteExpandedView({
{
id: 'path',
label: formatMessage(labels.pages),
url: updateParams({ view: 'path' }),
path: updateParams({ view: 'path' }),
},
{
id: 'referrer',
label: formatMessage(labels.referrers),
url: updateParams({ view: 'referrer' }),
path: updateParams({ view: 'referrer' }),
},
{
id: 'channel',
label: formatMessage(labels.channels),
url: updateParams({ view: 'channel' }),
path: updateParams({ view: 'channel' }),
},
{
id: 'browser',
label: formatMessage(labels.browsers),
url: updateParams({ view: 'browser' }),
path: updateParams({ view: 'browser' }),
},
{
id: 'os',
label: formatMessage(labels.os),
url: updateParams({ view: 'os' }),
path: updateParams({ view: 'os' }),
},
{
id: 'device',
label: formatMessage(labels.devices),
url: updateParams({ view: 'device' }),
path: updateParams({ view: 'device' }),
},
{
id: 'country',
label: formatMessage(labels.countries),
url: updateParams({ view: 'country' }),
path: updateParams({ view: 'country' }),
},
{
id: 'region',
label: formatMessage(labels.regions),
url: updateParams({ view: 'region' }),
path: updateParams({ view: 'region' }),
},
{
id: 'city',
label: formatMessage(labels.cities),
url: updateParams({ view: 'city' }),
path: updateParams({ view: 'city' }),
},
{
id: 'language',
label: formatMessage(labels.languages),
url: updateParams({ view: 'language' }),
path: updateParams({ view: 'language' }),
},
{
id: 'screen',
label: formatMessage(labels.screens),
url: updateParams({ view: 'screen' }),
path: updateParams({ view: 'screen' }),
},
{
id: 'event',
label: formatMessage(labels.events),
url: updateParams({ view: 'event' }),
path: updateParams({ view: 'event' }),
},
{
id: 'query',
label: formatMessage(labels.queryParameters),
url: updateParams({ view: 'query' }),
path: updateParams({ view: 'query' }),
},
{
id: 'hostname',
label: formatMessage(labels.hostname),
url: updateParams({ view: 'hostname' }),
path: updateParams({ view: 'hostname' }),
},
{
id: 'tag',
label: formatMessage(labels.tags),
url: updateParams({ view: 'tag' }),
path: updateParams({ view: 'tag' }),
},
];
const DetailsComponent = views[view] || (() => null);
return (
<Panel>
<Grid columns="auto 1fr" gap="6">
<Column gap="6" width="200px" border="right" paddingRight="3">
<LinkButton href={updateParams({ view: undefined })} variant="quiet" scroll={false}>
<Icon rotate={180}>
<Arrow />
</Icon>
<Text>{formatMessage(labels.back)}</Text>
</LinkButton>
<SideMenu items={items} selectedKey={view} />
</Column>
<Column>
<DetailsComponent
websiteId={websiteId}
domainName={domainName}
animate={false}
virtualize={true}
itemCount={25}
allowFilter={true}
allowSearch={true}
expanded={true}
/>
</Column>
</Grid>
</Panel>
<Grid columns="auto 1fr" gap="6" height="100%">
<Column gap="6" width="200px" border="right" paddingRight="3">
<NavMenu position="sticky" top="0">
{items.map(({ id, label, path }) => {
return (
<Link key={id} href={path}>
<NavMenuItem isSelected={id === view}>{label}</NavMenuItem>
</Link>
);
})}
</NavMenu>
</Column>
<Column>
<DetailsComponent
websiteId={websiteId}
animate={false}
virtualize={true}
itemCount={25}
allowFilter={true}
allowSearch={true}
isExpanded={true}
onClose={onClose}
/>
</Column>
</Grid>
);
}

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

@ -10,25 +10,27 @@ import { WorldMap } from '@/components/metrics/WorldMap';
import { CountriesTable } from '@/components/metrics/CountriesTable';
export function WebsiteTableView({ websiteId }: { websiteId: string }) {
const props = { websiteId, limit: 10, allowDownload: false };
return (
<Grid gap="3">
<GridRow layout="two">
<Panel>
<PagesTable websiteId={websiteId} limit={10} />
<PagesTable {...props} />
</Panel>
<Panel>
<ReferrersTable websiteId={websiteId} limit={10} />
<ReferrersTable {...props} />
</Panel>
</GridRow>
<GridRow layout="three">
<Panel>
<BrowsersTable websiteId={websiteId} limit={10} />
<BrowsersTable {...props} />
</Panel>
<Panel>
<OSTable websiteId={websiteId} limit={10} />
<OSTable {...props} />
</Panel>
<Panel>
<DevicesTable websiteId={websiteId} limit={10} />
<DevicesTable {...props} />
</Panel>
</GridRow>
<GridRow layout="two-one">
@ -36,7 +38,7 @@ export function WebsiteTableView({ websiteId }: { websiteId: string }) {
<WorldMap websiteId={websiteId} />
</Panel>
<Panel>
<CountriesTable websiteId={websiteId} limit={10} />
<CountriesTable {...props} />
</Panel>
</GridRow>
</Grid>

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

@ -22,7 +22,7 @@ export function SegmentEditForm({
onSave,
onClose,
}: {
segmentId: string;
segmentId?: string;
websiteId: string;
filters?: any[];
showFilters?: boolean;