umami/components/pages/websites/WebsiteMenuView.js

122 lines
3.3 KiB
JavaScript
Raw Normal View History

import { Menu, Item, Icon, Button, Flexbox, Text } from 'react-basics';
2023-02-10 12:26:57 +01:00
import { useIntl } from 'react-intl';
2023-02-04 17:59:52 +01:00
import Link from 'next/link';
import { GridRow, GridColumn } from 'components/layout/Grid';
2023-02-04 17:59:52 +01:00
import BrowsersTable from 'components/metrics/BrowsersTable';
import CountriesTable from 'components/metrics/CountriesTable';
import DevicesTable from 'components/metrics/DevicesTable';
import LanguagesTable from 'components/metrics/LanguagesTable';
import OSTable from 'components/metrics/OSTable';
import PagesTable from 'components/metrics/PagesTable';
import QueryParametersTable from 'components/metrics/QueryParametersTable';
import ReferrersTable from 'components/metrics/ReferrersTable';
import ScreenTable from 'components/metrics/ScreenTable';
import EventsTable from 'components/metrics/EventsTable';
import usePageQuery from 'hooks/usePageQuery';
import Icons from 'components/icons';
2023-02-08 07:17:55 +01:00
import { labels } from 'components/messages';
2023-02-10 12:26:57 +01:00
import styles from './WebsiteMenuView.module.css';
2023-02-04 17:59:52 +01:00
const views = {
url: PagesTable,
referrer: ReferrersTable,
browser: BrowsersTable,
os: OSTable,
device: DevicesTable,
screen: ScreenTable,
country: CountriesTable,
language: LanguagesTable,
event: EventsTable,
query: QueryParametersTable,
};
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
const { formatMessage } = useIntl();
const {
resolveUrl,
2023-02-04 17:59:52 +01:00
query: { view },
} = usePageQuery();
const items = [
{
key: 'url',
2023-02-04 17:59:52 +01:00
label: formatMessage(labels.pages),
},
{
key: 'referrer',
2023-02-04 17:59:52 +01:00
label: formatMessage(labels.referrers),
},
{
key: 'browser',
2023-02-04 17:59:52 +01:00
label: formatMessage(labels.browsers),
},
{
key: 'os',
2023-02-04 17:59:52 +01:00
label: formatMessage(labels.os),
},
{
key: 'device',
2023-02-04 17:59:52 +01:00
label: formatMessage(labels.devices),
},
{
key: 'country',
2023-02-04 17:59:52 +01:00
label: formatMessage(labels.countries),
},
{
key: 'language',
2023-02-04 17:59:52 +01:00
label: formatMessage(labels.languages),
},
{
key: 'screen',
2023-02-04 17:59:52 +01:00
label: formatMessage(labels.screens),
},
{
key: 'event',
2023-02-04 17:59:52 +01:00
label: formatMessage(labels.events),
},
{
key: 'query',
2023-02-04 17:59:52 +01:00
label: formatMessage(labels.query),
},
];
const DetailsComponent = views[view] || (() => null);
2023-02-04 17:59:52 +01:00
return (
<GridRow>
<GridColumn xs={12} sm={12} md={12} defaultSize={3} className={styles.menu}>
<Link href={resolveUrl({ view: undefined })}>
<Flexbox justifyContent="center">
<Button variant="quiet">
<Icon rotate={180}>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(labels.back)}</Text>
</Button>
</Flexbox>
</Link>
<Menu items={items} selectedKey={view}>
{({ key, label }) => (
<Item key={key} className={styles.item}>
<Link href={resolveUrl({ view: key })} shallow={true}>
{label}
2023-02-10 12:26:57 +01:00
</Link>
</Item>
2023-02-04 17:59:52 +01:00
)}
</Menu>
</GridColumn>
<GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.data}>
2023-02-04 17:59:52 +01:00
<DetailsComponent
websiteId={websiteId}
websiteDomain={websiteDomain}
height={500}
limit={false}
animate={false}
showFilters={true}
virtualize={true}
2023-02-04 17:59:52 +01:00
/>
</GridColumn>
</GridRow>
2023-02-04 17:59:52 +01:00
);
}