watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 15:17:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Layout updates.

Browse source
This commit is contained in:
Mike Cao 2023-10-03 09:45:02 -07:00
parent e4c5f42189
commit 476dd52875
23 changed files with 97 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/app/(app)/settings/SideNav.js
View file

@ -1,31 +0,0 @@
import classNames from 'classnames';
import { Menu, Item } from 'react-basics';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import styles from './SideNav.module.css';
export function SideNav({
selectedKey,
items,
shallow = true,
scroll = false,
onSelect = () => {},
}) {
const pathname = usePathname();
return (
<Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
{({ key, label, url }) => (
<Item
key={key}
className={classNames(styles.item, { [styles.selected]: pathname.startsWith(url) })}
>
<Link href={url} shallow={shallow} scroll={scroll}>
{label}
</Link>
</Item>
)}
</Menu>
);
}
export default SideNav;

19
src/app/(app)/settings/SideNav.module.css
View file

@ -1,19 +0,0 @@
.menu {
display: flex;
flex-direction: column;
}
.item a {
color: var(--font-color100);
flex: 1;
padding: var(--size300) var(--size600);
}
.item {
padding: 0;
border-radius: var(--border-radius);
}
.selected {
font-weight: 700;
}

2
src/app/(app)/settings/layout.tsx
View file

@ -2,7 +2,7 @@
import { usePathname } from 'next/navigation';
import useUser from 'components/hooks/useUser';
import useMessages from 'components/hooks/useMessages';
import SideNav from './SideNav';
import SideNav from 'components/layout/SideNav';
import styles from './layout.module.css';
export default function SettingsLayout({ children }) {

4
src/app/(app)/websites/[id]/WebsiteChart.js
View file

@ -1,6 +1,6 @@
import { useMemo } from 'react';
import PageviewsChart from 'components/metrics/PageviewsChart';
import { useApi, useDateRange, useTimezone, usePageQuery } from 'components/hooks';
import { useApi, useDateRange, useTimezone, useNavigation } from 'components/hooks';
import { getDateArray } from 'lib/date';
export function WebsiteChart({ websiteId }) {
@ -9,7 +9,7 @@ export function WebsiteChart({ websiteId }) {
const [timezone] = useTimezone();
const {
query: { url, referrer, os, browser, device, country, region, city, title },
} = usePageQuery();
} = useNavigation();
const { get, useQuery } = useApi();
const { data, isLoading } = useQuery(

4
src/app/(app)/websites/[id]/WebsiteDetails.js
View file

@ -3,7 +3,7 @@ import { Loading } from 'react-basics';
import { usePathname } from 'next/navigation';
import Page from 'components/layout/Page';
import FilterTags from 'components/metrics/FilterTags';
import usePageQuery from 'components/hooks/usePageQuery';
import useNavigation from 'components/hooks/useNavigation';
import { useWebsite } from 'components/hooks';
import WebsiteChart from './WebsiteChart';
import WebsiteMenuView from './WebsiteMenuView';
@ -18,7 +18,7 @@ export default function WebsiteDetails({ websiteId }) {
const {
query: { view, url, referrer, os, browser, device, country, region, city, title },
} = usePageQuery();
} = useNavigation();
if (isLoading || error) {
return <Page isLoading={isLoading} error={error} />;

66
src/app/(app)/websites/[id]/WebsiteMenuView.js
View file

@ -1,6 +1,4 @@
import { Icon, Button, Flexbox, Text } from 'react-basics';
import Link from 'next/link';
import { GridRow, GridColumn } from 'components/layout/Grid';
import { Text } from 'react-basics';
import BrowsersTable from 'components/metrics/BrowsersTable';
import CountriesTable from 'components/metrics/CountriesTable';
import RegionsTable from 'components/metrics/RegionsTable';
@ -13,12 +11,11 @@ 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 Icons from 'components/icons';
import SideNav from '../../settings/SideNav';
import usePageQuery from 'components/hooks/usePageQuery';
import SideNav from 'components/layout/SideNav';
import useNavigation from 'components/hooks/useNavigation';
import useMessages from 'components/hooks/useMessages';
import styles from './WebsiteMenuView.module.css';
import useLocale from 'components/hooks/useLocale';
import LinkButton from 'components/common/LinkButton';
const views = {
url: PagesTable,
@ -38,93 +35,86 @@ const views = {
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
const { formatMessage, labels } = useMessages();
const { dir } = useLocale();
const {
resolveUrl,
makeUrl,
pathname,
query: { view },
} = usePageQuery();
} = useNavigation();
const items = [
{
key: 'url',
label: formatMessage(labels.pages),
url: resolveUrl({ view: 'url' }),
url: makeUrl({ view: 'url' }),
},
{
key: 'referrer',
label: formatMessage(labels.referrers),
url: resolveUrl({ view: 'referrer' }),
url: makeUrl({ view: 'referrer' }),
},
{
key: 'browser',
label: formatMessage(labels.browsers),
url: resolveUrl({ view: 'browser' }),
url: makeUrl({ view: 'browser' }),
},
{
key: 'os',
label: formatMessage(labels.os),
url: resolveUrl({ view: 'os' }),
url: makeUrl({ view: 'os' }),
},
{
key: 'device',
label: formatMessage(labels.devices),
url: resolveUrl({ view: 'device' }),
url: makeUrl({ view: 'device' }),
},
{
key: 'country',
label: formatMessage(labels.countries),
url: resolveUrl({ view: 'country' }),
url: makeUrl({ view: 'country' }),
},
{
key: 'region',
label: formatMessage(labels.regions),
url: resolveUrl({ view: 'region' }),
url: makeUrl({ view: 'region' }),
},
{
key: 'city',
label: formatMessage(labels.cities),
url: resolveUrl({ view: 'city' }),
url: makeUrl({ view: 'city' }),
},
{
key: 'language',
label: formatMessage(labels.languages),
url: resolveUrl({ view: 'language' }),
url: makeUrl({ view: 'language' }),
},
{
key: 'screen',
label: formatMessage(labels.screens),
url: resolveUrl({ view: 'screen' }),
url: makeUrl({ view: 'screen' }),
},
{
key: 'event',
label: formatMessage(labels.events),
url: resolveUrl({ view: 'event' }),
url: makeUrl({ view: 'event' }),
},
{
key: 'query',
label: formatMessage(labels.queryParameters),
url: resolveUrl({ view: 'query' }),
url: makeUrl({ view: 'query' }),
},
];
const DetailsComponent = views[view] || (() => null);
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={dir === 'rtl' ? 0 : 180}>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(labels.back)}</Text>
</Button>
</Flexbox>
</Link>
<div className={styles.layout}>
<div className={styles.menu}>
<LinkButton href={pathname} className={styles.back}>
<Text>{formatMessage(labels.back)}</Text>
</LinkButton>
<SideNav items={items} selectedKey={view} shallow={true} />
</GridColumn>
<GridColumn xs={12} sm={12} md={12} defaultSize={9} className={styles.content}>
</div>
<div className={styles.content}>
<DetailsComponent
websiteId={websiteId}
websiteDomain={websiteDomain}
@ -133,7 +123,7 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
showFilters={true}
virtualize={true}
/>
</GridColumn>
</GridRow>
</div>
</div>
);
}

18
src/app/(app)/websites/[id]/WebsiteMenuView.module.css
View file

@ -1,7 +1,25 @@
.layout {
display: grid;
grid-template-columns: 300px 1fr;
border-top: 1px solid var(--base300);
}
.menu {
display: flex;
flex-direction: column;
position: relative;
padding: 20px 20px 20px 0;
}
.back {
display: inline-flex;
align-items: center;
align-self: center;
margin-bottom: 20px;
}
.content {
min-height: 800px;
padding: 20px 0 20px 20px;
border-left: 1px solid var(--base300);
}

8
src/app/(app)/websites/[id]/WebsiteMetricsBar.js
View file

@ -1,5 +1,5 @@
import classNames from 'classnames';
import { useApi, useDateRange, useMessages, usePageQuery, useSticky } from 'components/hooks';
import { useApi, useDateRange, useMessages, useNavigation, useSticky } from 'components/hooks';
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import MetricCard from 'components/metrics/MetricCard';
import MetricsBar from 'components/metrics/MetricsBar';
@ -17,10 +17,10 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
const { startDate, endDate, modified } = dateRange;
const { ref, isSticky } = useSticky({ enabled: sticky });
const {
resolveUrl,
makeUrl,
router,
query: { url, referrer, title, os, browser, device, country, region, city },
} = usePageQuery();
} = useNavigation();
const { data, error, isLoading, isFetched } = useQuery(
[
@ -64,7 +64,7 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
};
const handleAddFilter = ({ name, value }) => {
router.push(resolveUrl({ [name]: value }));
router.push(makeUrl({ [name]: value }));
};
const WebsiteFilterButton = () => {

6
src/app/(app)/websites/[id]/event-data/EventDataTable.js
View file

@ -1,12 +1,12 @@
import Link from 'next/link';
import { GridTable, GridColumn } from 'react-basics';
import { useMessages, usePageQuery } from 'components/hooks';
import { useMessages, useNavigation } from 'components/hooks';
import Empty from 'components/common/Empty';
import { DATA_TYPES } from 'lib/constants';
export function EventDataTable({ data = [] }) {
const { formatMessage, labels } = useMessages();
const { resolveUrl } = usePageQuery();
const { makeUrl } = useNavigation();
if (data.length === 0) {
return <Empty />;
@ -16,7 +16,7 @@ export function EventDataTable({ data = [] }) {
<GridTable data={data}>
<GridColumn name="eventName" label={formatMessage(labels.event)}>
{row => (
<Link href={resolveUrl({ event: row.eventName })} shallow={true}>
<Link href={makeUrl({ event: row.eventName })} shallow={true}>
{row.eventName}
</Link>
)}

6
src/app/(app)/websites/[id]/event-data/EventDataValueTable.js
View file

@ -1,5 +1,5 @@
import { GridTable, GridColumn, Button, Icon, Text } from 'react-basics';
import { useMessages, usePageQuery } from 'components/hooks';
import { useMessages, useNavigation } from 'components/hooks';
import Link from 'next/link';
import Icons from 'components/icons';
import PageHeader from 'components/layout/PageHeader';
@ -8,12 +8,12 @@ import { DATA_TYPES } from 'lib/constants';
export function EventDataValueTable({ data = [], event }) {
const { formatMessage, labels } = useMessages();
const { resolveUrl } = usePageQuery();
const { makeUrl } = useNavigation();
const Title = () => {
return (
<>
<Link href={resolveUrl({ event: undefined })}>
<Link href={makeUrl({ event: undefined })}>
<Button>
<Icon rotate={180}>
<Icons.ArrowRight />

4
src/app/(app)/websites/[id]/event-data/WebsiteEventData.js
View file

@ -3,7 +3,7 @@ import { Flexbox, Loading } from 'react-basics';
import EventDataTable from './EventDataTable';
import EventDataValueTable from './EventDataValueTable';
import { EventDataMetricsBar } from './EventDataMetricsBar';
import { useDateRange, useApi, usePageQuery } from 'components/hooks';
import { useDateRange, useApi, useNavigation } from 'components/hooks';
import styles from './WebsiteEventData.module.css';
function useData(websiteId, event) {
@ -28,7 +28,7 @@ function useData(websiteId, event) {
export default function WebsiteEventData({ websiteId }) {
const {
query: { event },
} = usePageQuery();
} = useNavigation();
const { data, isLoading } = useData(websiteId, event);
return (