watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-11 16:17:13 +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

2
src/app/(main)/pixels/[pixelId]/PixelHeader.tsx
View file

@ -11,7 +11,7 @@ export function PixelHeader() {
return (
<PageHeader title={pixel.name} description={pixel.url}>
<LinkButton href={getSlugUrl(pixel.slug)}>
<LinkButton href={getSlugUrl(pixel.slug)} target="_blank">
<Icon>
<ExternalLink />
</Icon>

81
src/app/(main)/pixels/[pixelId]/PixelPage.tsx
View file

@ -6,7 +6,7 @@ import { Panel } from '@/components/common/Panel';
import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
import { PixelMetricsBar } from '@/app/(main)/pixels/[pixelId]/PixelMetricsBar';
import { PixelControls } from '@/app/(main)/pixels/[pixelId]/PixelControls';
import { Grid } from '@umami/react-zen';
import { Grid, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { ReferrersTable } from '@/components/metrics/ReferrersTable';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
@ -14,9 +14,16 @@ 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 PixelPage({ pixelId }: { pixelId: string }) {
const props = { websiteId: pixelId, limit: 10, allowDownload: false };
const { formatMessage, labels } = useMessages();
const tableProps = { websiteId: pixelId, limit: 10, allowDownload: false };
const rowProps = { minHeight: 570 };
return (
<PixelProvider pixelId={pixelId}>
@ -27,29 +34,67 @@ export function PixelPage({ pixelId }: { pixelId: string }) {
<Panel>
<WebsiteChart websiteId={pixelId} />
</Panel>
<GridRow layout="two">
<Panel>
<ReferrersTable {...props} />
</Panel>
</GridRow>
<Grid gap="3">
<GridRow layout="three">
<Grid gap>
<GridRow layout="one" {...rowProps}>
<Panel>
<BrowsersTable {...props} />
</Panel>
<Panel>
<OSTable {...props} />
</Panel>
<Panel>
<DevicesTable {...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="two-one">
<GridRow layout="two-one" {...rowProps}>
<Panel gridColumn="span 2" noPadding>
<WorldMap websiteId={pixelId} />
</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={pixelId} />
</Panel>
</GridRow>
</Grid>