158 lines
4.0 KiB
TypeScript
158 lines
4.0 KiB
TypeScript
import { Grid, Column } from '@umami/react-zen';
|
|
import { useMessages, useNavigation } from '@/components/hooks';
|
|
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
|
|
import { SideMenu } from '@/components/common/SideMenu';
|
|
|
|
export function WebsiteExpandedView({
|
|
websiteId,
|
|
onClose,
|
|
}: {
|
|
websiteId: string;
|
|
onClose?: () => void;
|
|
}) {
|
|
const { formatMessage, labels } = useMessages();
|
|
const {
|
|
updateParams,
|
|
query: { view },
|
|
} = useNavigation();
|
|
|
|
const items = [
|
|
{
|
|
label: formatMessage(labels.pages),
|
|
items: [
|
|
{
|
|
id: 'path',
|
|
label: formatMessage(labels.path),
|
|
path: updateParams({ view: 'path' }),
|
|
},
|
|
{
|
|
id: 'entry',
|
|
label: formatMessage(labels.entry),
|
|
path: updateParams({ view: 'entry' }),
|
|
},
|
|
{
|
|
id: 'exit',
|
|
label: formatMessage(labels.exit),
|
|
path: updateParams({ view: 'exit' }),
|
|
},
|
|
{
|
|
id: 'title',
|
|
label: formatMessage(labels.title),
|
|
path: updateParams({ view: 'title' }),
|
|
},
|
|
{
|
|
id: 'query',
|
|
label: formatMessage(labels.query),
|
|
path: updateParams({ view: 'query' }),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: formatMessage(labels.sources),
|
|
items: [
|
|
{
|
|
id: 'referrer',
|
|
label: formatMessage(labels.referrers),
|
|
path: updateParams({ view: 'referrer' }),
|
|
},
|
|
{
|
|
id: 'channel',
|
|
label: formatMessage(labels.channels),
|
|
path: updateParams({ view: 'channel' }),
|
|
},
|
|
{
|
|
id: 'domain',
|
|
label: formatMessage(labels.domain),
|
|
path: updateParams({ view: 'domain' }),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: formatMessage(labels.location),
|
|
items: [
|
|
{
|
|
id: 'country',
|
|
label: formatMessage(labels.countries),
|
|
path: updateParams({ view: 'country' }),
|
|
},
|
|
{
|
|
id: 'region',
|
|
label: formatMessage(labels.regions),
|
|
path: updateParams({ view: 'region' }),
|
|
},
|
|
{
|
|
id: 'city',
|
|
label: formatMessage(labels.cities),
|
|
path: updateParams({ view: 'city' }),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: formatMessage(labels.environment),
|
|
items: [
|
|
{
|
|
id: 'browser',
|
|
label: formatMessage(labels.browsers),
|
|
path: updateParams({ view: 'browser' }),
|
|
},
|
|
{
|
|
id: 'os',
|
|
label: formatMessage(labels.os),
|
|
path: updateParams({ view: 'os' }),
|
|
},
|
|
{
|
|
id: 'device',
|
|
label: formatMessage(labels.devices),
|
|
path: updateParams({ view: 'device' }),
|
|
},
|
|
{
|
|
id: 'language',
|
|
label: formatMessage(labels.languages),
|
|
path: updateParams({ view: 'language' }),
|
|
},
|
|
{
|
|
id: 'screen',
|
|
label: formatMessage(labels.screens),
|
|
path: updateParams({ view: 'screen' }),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: formatMessage(labels.other),
|
|
items: [
|
|
{
|
|
id: 'event',
|
|
label: formatMessage(labels.events),
|
|
path: updateParams({ view: 'event' }),
|
|
},
|
|
{
|
|
id: 'hostname',
|
|
label: formatMessage(labels.hostname),
|
|
path: updateParams({ view: 'hostname' }),
|
|
},
|
|
{
|
|
id: 'tag',
|
|
label: formatMessage(labels.tags),
|
|
path: updateParams({ view: 'tag' }),
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
|
|
<Column gap="6" border="right" paddingRight="3">
|
|
<SideMenu items={items} selectedKey={view} />
|
|
</Column>
|
|
<Column overflow="hidden">
|
|
<MetricsExpandedTable
|
|
title={formatMessage(labels[view])}
|
|
type={view}
|
|
websiteId={websiteId}
|
|
onClose={onClose}
|
|
/>
|
|
</Column>
|
|
</Grid>
|
|
);
|
|
}
|