mirror of
https://github.com/umami-software/umami.git
synced 2026-02-09 07:07:17 +01:00
Redesigned overview page.
This commit is contained in:
Mike Cao
parent
5d1f2a6f2d
commit
f7ca583410
12 changed files with 257 additions and 96 deletions
|
|
@ -11,7 +11,7 @@ export function LinkHeader() {
|
|||
|
||||
return (
|
||||
<PageHeader title={link.name} description={link.url}>
|
||||
<LinkButton href={getSlugUrl(link.slug)}>
|
||||
<LinkButton href={getSlugUrl(link.slug)} target="_blank">
|
||||
<Icon>
|
||||
<ExternalLink />
|
||||
</Icon>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { Panel } from '@/components/common/Panel';
|
|||
import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
|
||||
import { LinkMetricsBar } from '@/app/(main)/links/[linkId]/LinkMetricsBar';
|
||||
import { LinkControls } from '@/app/(main)/links/[linkId]/LinkControls';
|
||||
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 { 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';
|
||||
import { useMessages } from '@/components/hooks';
|
||||
|
||||
export function LinkPage({ linkId }: { linkId: string }) {
|
||||
const props = { websiteId: linkId, limit: 10, allowDownload: false };
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const tableProps = { websiteId: linkId, limit: 10, allowDownload: false };
|
||||
const rowProps = { minHeight: 570 };
|
||||
|
||||
return (
|
||||
<LinkProvider linkId={linkId}>
|
||||
|
|
@ -27,29 +34,67 @@ export function LinkPage({ linkId }: { linkId: string }) {
|
|||
<Panel>
|
||||
<WebsiteChart websiteId={linkId} />
|
||||
</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={linkId} />
|
||||
</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={linkId} />
|
||||
</Panel>
|
||||
</GridRow>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue