mirror of
https://github.com/umami-software/umami.git
synced 2026-02-15 01:55:36 +01:00
Responsive updates.
This commit is contained in:
Mike Cao
parent
53929626cf
commit
14981717b9
5 changed files with 231 additions and 212 deletions
177
src/app/(main)/websites/[websiteId]/WebsiteExpandedMenu.tsx
Normal file
177
src/app/(main)/websites/[websiteId]/WebsiteExpandedMenu.tsx
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
import { useMessages, useNavigation } from '@/components/hooks';
|
||||
import { SideMenu } from '@/components/common/SideMenu';
|
||||
import {
|
||||
LogOut,
|
||||
LogIn,
|
||||
Search,
|
||||
Type,
|
||||
SquareSlash,
|
||||
Share2,
|
||||
Megaphone,
|
||||
Earth,
|
||||
Globe,
|
||||
Landmark,
|
||||
MapPin,
|
||||
AppWindow,
|
||||
Laptop,
|
||||
Languages,
|
||||
Monitor,
|
||||
Cpu,
|
||||
Network,
|
||||
Tag,
|
||||
} from '@/components/icons';
|
||||
import { Lightning } from '@/components/svg';
|
||||
|
||||
export function WebsiteExpandedMenu({ excludedIds = [] }: { excludedIds?: string[] }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const {
|
||||
updateParams,
|
||||
query: { view },
|
||||
} = useNavigation();
|
||||
|
||||
const filterExcluded = (item: { id: string }) => !excludedIds.includes(item.id);
|
||||
|
||||
const items = [
|
||||
{
|
||||
label: 'URL',
|
||||
items: [
|
||||
{
|
||||
id: 'path',
|
||||
label: formatMessage(labels.path),
|
||||
path: updateParams({ view: 'path' }),
|
||||
icon: <SquareSlash />,
|
||||
},
|
||||
{
|
||||
id: 'entry',
|
||||
label: formatMessage(labels.entry),
|
||||
path: updateParams({ view: 'entry' }),
|
||||
icon: <LogIn />,
|
||||
},
|
||||
{
|
||||
id: 'exit',
|
||||
label: formatMessage(labels.exit),
|
||||
path: updateParams({ view: 'exit' }),
|
||||
icon: <LogOut />,
|
||||
},
|
||||
{
|
||||
id: 'title',
|
||||
label: formatMessage(labels.title),
|
||||
path: updateParams({ view: 'title' }),
|
||||
icon: <Type />,
|
||||
},
|
||||
{
|
||||
id: 'query',
|
||||
label: formatMessage(labels.query),
|
||||
path: updateParams({ view: 'query' }),
|
||||
icon: <Search />,
|
||||
},
|
||||
].filter(filterExcluded),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.sources),
|
||||
items: [
|
||||
{
|
||||
id: 'referrer',
|
||||
label: formatMessage(labels.referrer),
|
||||
path: updateParams({ view: 'referrer' }),
|
||||
icon: <Share2 />,
|
||||
},
|
||||
{
|
||||
id: 'channel',
|
||||
label: formatMessage(labels.channel),
|
||||
path: updateParams({ view: 'channel' }),
|
||||
icon: <Megaphone />,
|
||||
},
|
||||
{
|
||||
id: 'domain',
|
||||
label: formatMessage(labels.domain),
|
||||
path: updateParams({ view: 'domain' }),
|
||||
icon: <Globe />,
|
||||
},
|
||||
].filter(filterExcluded),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.location),
|
||||
items: [
|
||||
{
|
||||
id: 'country',
|
||||
label: formatMessage(labels.country),
|
||||
path: updateParams({ view: 'country' }),
|
||||
icon: <Earth />,
|
||||
},
|
||||
{
|
||||
id: 'region',
|
||||
label: formatMessage(labels.region),
|
||||
path: updateParams({ view: 'region' }),
|
||||
icon: <MapPin />,
|
||||
},
|
||||
{
|
||||
id: 'city',
|
||||
label: formatMessage(labels.city),
|
||||
path: updateParams({ view: 'city' }),
|
||||
icon: <Landmark />,
|
||||
},
|
||||
].filter(filterExcluded),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.environment),
|
||||
items: [
|
||||
{
|
||||
id: 'browser',
|
||||
label: formatMessage(labels.browser),
|
||||
path: updateParams({ view: 'browser' }),
|
||||
icon: <AppWindow />,
|
||||
},
|
||||
{
|
||||
id: 'os',
|
||||
label: formatMessage(labels.os),
|
||||
path: updateParams({ view: 'os' }),
|
||||
icon: <Cpu />,
|
||||
},
|
||||
{
|
||||
id: 'device',
|
||||
label: formatMessage(labels.device),
|
||||
path: updateParams({ view: 'device' }),
|
||||
icon: <Laptop />,
|
||||
},
|
||||
{
|
||||
id: 'language',
|
||||
label: formatMessage(labels.language),
|
||||
path: updateParams({ view: 'language' }),
|
||||
icon: <Languages />,
|
||||
},
|
||||
{
|
||||
id: 'screen',
|
||||
label: formatMessage(labels.screen),
|
||||
path: updateParams({ view: 'screen' }),
|
||||
icon: <Monitor />,
|
||||
},
|
||||
].filter(filterExcluded),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.other),
|
||||
items: [
|
||||
{
|
||||
id: 'event',
|
||||
label: formatMessage(labels.event),
|
||||
path: updateParams({ view: 'event' }),
|
||||
icon: <Lightning />,
|
||||
},
|
||||
{
|
||||
id: 'hostname',
|
||||
label: formatMessage(labels.hostname),
|
||||
path: updateParams({ view: 'hostname' }),
|
||||
icon: <Network />,
|
||||
},
|
||||
{
|
||||
id: 'tag',
|
||||
label: formatMessage(labels.tag),
|
||||
path: updateParams({ view: 'tag' }),
|
||||
icon: <Tag />,
|
||||
},
|
||||
].filter(filterExcluded),
|
||||
},
|
||||
];
|
||||
|
||||
return <SideMenu items={items} selectedKey={view} />;
|
||||
}
|
||||
|
|
@ -1,28 +1,7 @@
|
|||
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';
|
||||
import {
|
||||
LogOut,
|
||||
LogIn,
|
||||
Search,
|
||||
Type,
|
||||
SquareSlash,
|
||||
Share2,
|
||||
Megaphone,
|
||||
Earth,
|
||||
Globe,
|
||||
Landmark,
|
||||
MapPin,
|
||||
AppWindow,
|
||||
Laptop,
|
||||
Languages,
|
||||
Monitor,
|
||||
Cpu,
|
||||
Network,
|
||||
Tag,
|
||||
} from '@/components/icons';
|
||||
import { Lightning } from '@/components/svg';
|
||||
import { WebsiteExpandedMenu } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedMenu';
|
||||
|
||||
export function WebsiteExpandedView({
|
||||
websiteId,
|
||||
|
|
@ -35,158 +14,19 @@ export function WebsiteExpandedView({
|
|||
}) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const {
|
||||
updateParams,
|
||||
query: { view },
|
||||
} = useNavigation();
|
||||
|
||||
const filterExcluded = (item: { id: string }) => !excludedIds.includes(item.id);
|
||||
|
||||
const items = [
|
||||
{
|
||||
label: 'URL',
|
||||
items: [
|
||||
{
|
||||
id: 'path',
|
||||
label: formatMessage(labels.path),
|
||||
path: updateParams({ view: 'path' }),
|
||||
icon: <SquareSlash />,
|
||||
},
|
||||
{
|
||||
id: 'entry',
|
||||
label: formatMessage(labels.entry),
|
||||
path: updateParams({ view: 'entry' }),
|
||||
icon: <LogIn />,
|
||||
},
|
||||
{
|
||||
id: 'exit',
|
||||
label: formatMessage(labels.exit),
|
||||
path: updateParams({ view: 'exit' }),
|
||||
icon: <LogOut />,
|
||||
},
|
||||
{
|
||||
id: 'title',
|
||||
label: formatMessage(labels.title),
|
||||
path: updateParams({ view: 'title' }),
|
||||
icon: <Type />,
|
||||
},
|
||||
{
|
||||
id: 'query',
|
||||
label: formatMessage(labels.query),
|
||||
path: updateParams({ view: 'query' }),
|
||||
icon: <Search />,
|
||||
},
|
||||
].filter(filterExcluded),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.sources),
|
||||
items: [
|
||||
{
|
||||
id: 'referrer',
|
||||
label: formatMessage(labels.referrer),
|
||||
path: updateParams({ view: 'referrer' }),
|
||||
icon: <Share2 />,
|
||||
},
|
||||
{
|
||||
id: 'channel',
|
||||
label: formatMessage(labels.channel),
|
||||
path: updateParams({ view: 'channel' }),
|
||||
icon: <Megaphone />,
|
||||
},
|
||||
{
|
||||
id: 'domain',
|
||||
label: formatMessage(labels.domain),
|
||||
path: updateParams({ view: 'domain' }),
|
||||
icon: <Globe />,
|
||||
},
|
||||
].filter(filterExcluded),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.location),
|
||||
items: [
|
||||
{
|
||||
id: 'country',
|
||||
label: formatMessage(labels.country),
|
||||
path: updateParams({ view: 'country' }),
|
||||
icon: <Earth />,
|
||||
},
|
||||
{
|
||||
id: 'region',
|
||||
label: formatMessage(labels.region),
|
||||
path: updateParams({ view: 'region' }),
|
||||
icon: <MapPin />,
|
||||
},
|
||||
{
|
||||
id: 'city',
|
||||
label: formatMessage(labels.city),
|
||||
path: updateParams({ view: 'city' }),
|
||||
icon: <Landmark />,
|
||||
},
|
||||
].filter(filterExcluded),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.environment),
|
||||
items: [
|
||||
{
|
||||
id: 'browser',
|
||||
label: formatMessage(labels.browser),
|
||||
path: updateParams({ view: 'browser' }),
|
||||
icon: <AppWindow />,
|
||||
},
|
||||
{
|
||||
id: 'os',
|
||||
label: formatMessage(labels.os),
|
||||
path: updateParams({ view: 'os' }),
|
||||
icon: <Cpu />,
|
||||
},
|
||||
{
|
||||
id: 'device',
|
||||
label: formatMessage(labels.device),
|
||||
path: updateParams({ view: 'device' }),
|
||||
icon: <Laptop />,
|
||||
},
|
||||
{
|
||||
id: 'language',
|
||||
label: formatMessage(labels.language),
|
||||
path: updateParams({ view: 'language' }),
|
||||
icon: <Languages />,
|
||||
},
|
||||
{
|
||||
id: 'screen',
|
||||
label: formatMessage(labels.screen),
|
||||
path: updateParams({ view: 'screen' }),
|
||||
icon: <Monitor />,
|
||||
},
|
||||
].filter(filterExcluded),
|
||||
},
|
||||
{
|
||||
label: formatMessage(labels.other),
|
||||
items: [
|
||||
{
|
||||
id: 'event',
|
||||
label: formatMessage(labels.event),
|
||||
path: updateParams({ view: 'event' }),
|
||||
icon: <Lightning />,
|
||||
},
|
||||
{
|
||||
id: 'hostname',
|
||||
label: formatMessage(labels.hostname),
|
||||
path: updateParams({ view: 'hostname' }),
|
||||
icon: <Network />,
|
||||
},
|
||||
{
|
||||
id: 'tag',
|
||||
label: formatMessage(labels.tag),
|
||||
path: updateParams({ view: 'tag' }),
|
||||
icon: <Tag />,
|
||||
},
|
||||
].filter(filterExcluded),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
|
||||
<Column gap="6" border="right" paddingRight="3" overflowY="auto">
|
||||
<SideMenu items={items} selectedKey={view} />
|
||||
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap="6" height="100%" overflow="hidden">
|
||||
<Column
|
||||
display={{ xs: 'none', md: 'flex' }}
|
||||
gap="6"
|
||||
border="right"
|
||||
paddingRight="3"
|
||||
overflowY="auto"
|
||||
>
|
||||
<WebsiteExpandedMenu excludedIds={excludedIds} />
|
||||
</Column>
|
||||
<Column overflow="hidden">
|
||||
<MetricsExpandedTable
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue