watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-19 03:55:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Panels redesign.

Browse source
This commit is contained in:
Mike Cao 2025-03-25 14:47:51 -07:00
parent 7886c3f393
commit f5bc3dc6c2
58 changed files with 530 additions and 733 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/(main)/websites/[websiteId]/events/EventProperties.module.css
View file

@ -11,7 +11,7 @@
.link:hover {
cursor: pointer;
color: var(--primary400);
color: var(--primary-color);
}
.title {

53
src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
View file

@ -1,13 +1,14 @@
'use client';
import { TabList, Tab, Tabs, TabPanel, Grid } from '@umami/react-zen';
import { useState } from 'react';
import { WebsiteHeader } from '../WebsiteHeader';
import { EventsDataTable } from './EventsDataTable';
import { EventsMetricsBar } from './EventsMetricsBar';
import { Panel } from '@/components/layout/Panel';
import { EventsChart } from '@/components/metrics/EventsChart';
import { GridRow } from '@/components/layout/Grid';
import { GridRow } from '@/components/layout/GridRow';
import { MetricsTable } from '@/components/metrics/MetricsTable';
import { useMessages } from '@/components/hooks';
import { TabList, Tab, Tabs } from '@umami/react-zen';
import { useState } from 'react';
import { EventProperties } from './EventProperties';
export function EventsPage({ websiteId }) {
@ -15,32 +16,36 @@ export function EventsPage({ websiteId }) {
const { formatMessage, labels } = useMessages();
return (
<>
<Grid gap="3">
<WebsiteHeader websiteId={websiteId} />
<EventsMetricsBar websiteId={websiteId} />
<GridRow columns="two-one">
<EventsChart websiteId={websiteId} />
<MetricsTable
websiteId={websiteId}
type="event"
title={formatMessage(labels.events)}
metric={formatMessage(labels.actions)}
/>
<GridRow layout="two-one">
<Panel>
<EventsChart websiteId={websiteId} />
</Panel>
<Panel>
<MetricsTable
websiteId={websiteId}
type="event"
title={formatMessage(labels.events)}
metric={formatMessage(labels.actions)}
/>
</Panel>
</GridRow>
<div>
<Tabs
selectedKey={tab}
onSelectionChange={(value: any) => setTab(value)}
style={{ marginBottom: 30 }}
>
<Panel marginY="6">
<Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
<TabList>
<Tab key="activity">{formatMessage(labels.activity)}</Tab>
<Tab key="properties">{formatMessage(labels.properties)}</Tab>
<Tab id="activity">{formatMessage(labels.activity)}</Tab>
<Tab id="properties">{formatMessage(labels.properties)}</Tab>
</TabList>
<TabPanel id="activity">
<EventsDataTable websiteId={websiteId} />
</TabPanel>
<TabPanel id="properties">
<EventProperties websiteId={websiteId} />
</TabPanel>
</Tabs>
{tab === 'activity' && <EventsDataTable websiteId={websiteId} />}
{tab === 'properties' && <EventProperties websiteId={websiteId} />}
</div>
</>
</Panel>
</Grid>
);
}