mirror of
https://github.com/umami-software/umami.git
synced 2026-02-10 07:37:11 +01:00
Refactored tables.
This commit is contained in:
Mike Cao
parent
600a3d28c3
commit
c8fe93dd9d
56 changed files with 643 additions and 1038 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import { usePixel, useMessages, useSlug } from '@/components/hooks';
|
||||
import { PageHeader } from '@/components/common/PageHeader';
|
||||
import { Icon, Text } from '@umami/react-zen';
|
||||
import { ExternalLink } from '@/components/icons';
|
||||
import { ExternalLink, Pixel } from '@/components/icons';
|
||||
import { LinkButton } from '@/components/common/LinkButton';
|
||||
|
||||
export function PixelHeader() {
|
||||
|
|
@ -10,7 +10,7 @@ export function PixelHeader() {
|
|||
const pixel = usePixel();
|
||||
|
||||
return (
|
||||
<PageHeader title={pixel.name} description={pixel.url}>
|
||||
<PageHeader title={pixel.name} description={pixel.url} icon={<Pixel />}>
|
||||
<LinkButton href={getSlugUrl(pixel.slug)} target="_blank">
|
||||
<Icon>
|
||||
<ExternalLink />
|
||||
|
|
|
|||
|
|
@ -6,25 +6,9 @@ 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, 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';
|
||||
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';
|
||||
import { PixelPanels } from '@/app/(main)/pixels/[pixelId]/PixelPanels';
|
||||
|
||||
export function PixelPage({ pixelId }: { pixelId: string }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const tableProps = { websiteId: pixelId, limit: 10, allowDownload: false };
|
||||
const rowProps = { minHeight: 570 };
|
||||
|
||||
return (
|
||||
<PixelProvider pixelId={pixelId}>
|
||||
<PageBody gap>
|
||||
|
|
@ -34,70 +18,7 @@ export function PixelPage({ pixelId }: { pixelId: string }) {
|
|||
<Panel>
|
||||
<WebsiteChart websiteId={pixelId} />
|
||||
</Panel>
|
||||
<Grid gap>
|
||||
<GridRow layout="one" {...rowProps}>
|
||||
<Panel>
|
||||
<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" {...rowProps}>
|
||||
<Panel gridColumn="span 2" noPadding>
|
||||
<WorldMap websiteId={pixelId} />
|
||||
</Panel>
|
||||
<Panel>
|
||||
<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>
|
||||
<PixelPanels pixelId={pixelId} />
|
||||
</PageBody>
|
||||
</PixelProvider>
|
||||
);
|
||||
|
|
|
|||
83
src/app/(main)/pixels/[pixelId]/PixelPanels.tsx
Normal file
83
src/app/(main)/pixels/[pixelId]/PixelPanels.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import { Grid, Tabs, Tab, TabList, TabPanel, Heading } from '@umami/react-zen';
|
||||
import { GridRow } from '@/components/common/GridRow';
|
||||
import { Panel } from '@/components/common/Panel';
|
||||
import { WorldMap } from '@/components/metrics/WorldMap';
|
||||
import { MetricsTable } from '@/components/metrics/MetricsTable';
|
||||
import { useMessages } from '@/components/hooks';
|
||||
|
||||
export function PixelPanels({ pixelId }: { pixelId: string }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const tableProps = {
|
||||
websiteId: pixelId,
|
||||
limit: 10,
|
||||
allowDownload: false,
|
||||
showMore: true,
|
||||
metric: formatMessage(labels.visitors),
|
||||
};
|
||||
const rowProps = { minHeight: 570 };
|
||||
|
||||
return (
|
||||
<Grid gap="3">
|
||||
<GridRow layout="two" {...rowProps}>
|
||||
<Panel>
|
||||
<Heading size="2">{formatMessage(labels.sources)}</Heading>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
|
||||
<Tab id="channel">{formatMessage(labels.channels)}</Tab>
|
||||
</TabList>
|
||||
<TabPanel id="referrer">
|
||||
<MetricsTable type="referrer" title={formatMessage(labels.domain)} {...tableProps} />
|
||||
</TabPanel>
|
||||
<TabPanel id="channel">
|
||||
<MetricsTable type="channel" title={formatMessage(labels.type)} {...tableProps} />
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</Panel>
|
||||
<Panel>
|
||||
<Heading size="2">{formatMessage(labels.environment)}</Heading>
|
||||
<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">
|
||||
<MetricsTable type="browser" title={formatMessage(labels.browser)} {...tableProps} />
|
||||
</TabPanel>
|
||||
<TabPanel id="os">
|
||||
<MetricsTable type="os" title={formatMessage(labels.os)} {...tableProps} />
|
||||
</TabPanel>
|
||||
<TabPanel id="device">
|
||||
<MetricsTable type="device" title={formatMessage(labels.device)} {...tableProps} />
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</Panel>
|
||||
</GridRow>
|
||||
<GridRow layout="two" {...rowProps}>
|
||||
<Panel noPadding>
|
||||
<WorldMap websiteId={pixelId} />
|
||||
</Panel>
|
||||
<Panel>
|
||||
<Heading size="2">{formatMessage(labels.location)}</Heading>
|
||||
<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">
|
||||
<MetricsTable type="country" title={formatMessage(labels.country)} {...tableProps} />
|
||||
</TabPanel>
|
||||
<TabPanel id="region">
|
||||
<MetricsTable type="region" title={formatMessage(labels.region)} {...tableProps} />
|
||||
</TabPanel>
|
||||
<TabPanel id="city">
|
||||
<MetricsTable type="city" title={formatMessage(labels.city)} {...tableProps} />
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</Panel>
|
||||
</GridRow>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue