watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-14 17:45:38 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Redesigned overview page.

Browse source
This commit is contained in:
Mike Cao 2025-08-21 03:01:37 -07:00
parent 5d1f2a6f2d
commit f7ca583410
12 changed files with 257 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
View file

@ -1,10 +1,10 @@
'use client';
import { ReactNode } from 'react';
import { Column, Grid } from '@umami/react-zen';
import { WebsiteProvider } from './WebsiteProvider';
import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
import { PageBody } from '@/components/common/PageBody';
import { WebsiteHeader } from './WebsiteHeader';
import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
import { WebsiteNav } from './WebsiteNav';
export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
return (

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

@ -1,4 +1,4 @@
import { Grid } from '@umami/react-zen';
import { Grid, Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { Panel } from '@/components/common/Panel';
import { PagesTable } from '@/components/metrics/PagesTable';
@ -8,37 +8,97 @@ import { OSTable } from '@/components/metrics/OSTable';
import { DevicesTable } from '@/components/metrics/DevicesTable';
import { WorldMap } from '@/components/metrics/WorldMap';
import { CountriesTable } from '@/components/metrics/CountriesTable';
import { useMessages } from '@/components/hooks';
import { ChannelsTable } from '@/components/metrics/ChannelsTable';
import { RegionsTable } from '@/components/metrics/RegionsTable';
import { CitiesTable } from '@/components/metrics/CitiesTable';
import { SessionsWeekly } from '@/app/(main)/websites/[websiteId]/sessions/SessionsWeekly';
export function WebsiteTableView({ websiteId }: { websiteId: string }) {
const props = { websiteId, limit: 10, allowDownload: false };
const { formatMessage, labels } = useMessages();
const tableProps = { websiteId, limit: 10, allowDownload: false };
const rowProps = { minHeight: 570 };
return (
<Grid gap="3">
<GridRow layout="two">
<GridRow layout="two" {...rowProps}>
<Panel>
<PagesTable {...props} />
<Tabs>
<TabList>
<Tab id="page">{formatMessage(labels.pages)}</Tab>
<Tab id="entry">{formatMessage(labels.entry)}</Tab>
<Tab id="exit">{formatMessage(labels.exit)}</Tab>
</TabList>
<TabPanel id="page">
<PagesTable type="path" {...tableProps} />
</TabPanel>
<TabPanel id="entry">
<PagesTable type="entry" {...tableProps} />
</TabPanel>
<TabPanel id="exit">
<PagesTable type="exit" {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
<Panel>
<ReferrersTable {...props} />
<Tabs>
<TabList>
<Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
<Tab id="channel">{formatMessage(labels.channels)}</Tab>
</TabList>
<TabPanel id="referrer">
<ReferrersTable {...tableProps} />
</TabPanel>
<TabPanel id="channel">
<ChannelsTable {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
<GridRow layout="three">
<Panel>
<BrowsersTable {...props} />
</Panel>
<Panel>
<OSTable {...props} />
</Panel>
<Panel>
<DevicesTable {...props} />
</Panel>
</GridRow>
<GridRow layout="two-one">
<GridRow layout="two-one" {...rowProps}>
<Panel gridColumn="span 2" noPadding>
<WorldMap websiteId={websiteId} />
</Panel>
<Panel>
<CountriesTable {...props} />
<Tabs>
<TabList>
<Tab id="country">{formatMessage(labels.countries)}</Tab>
<Tab id="region">{formatMessage(labels.regions)}</Tab>
<Tab id="city">{formatMessage(labels.cities)}</Tab>
</TabList>
<TabPanel id="country">
<CountriesTable {...tableProps} />
</TabPanel>
<TabPanel id="region">
<RegionsTable {...tableProps} />
</TabPanel>
<TabPanel id="city">
<CitiesTable {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
<GridRow layout="two" {...rowProps}>
<Panel>
<Tabs>
<TabList>
<Tab id="browser">{formatMessage(labels.browsers)}</Tab>
<Tab id="os">{formatMessage(labels.os)}</Tab>
<Tab id="device">{formatMessage(labels.devices)}</Tab>
</TabList>
<TabPanel id="browser">
<BrowsersTable {...tableProps} />
</TabPanel>
<TabPanel id="os">
<OSTable {...tableProps} />
</TabPanel>
<TabPanel id="device">
<DevicesTable {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
<Panel>
<SessionsWeekly websiteId={websiteId} />
</Panel>
</GridRow>
</Grid>

4
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
View file

@ -52,9 +52,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
.toLowerCase();
return (
<Row key={i} justifyContent="flex-end">
<Text color="muted" weight="bold">
{label}
</Text>
<Text color="muted">{label}</Text>
</Row>
);
})}