Updated column widths.

This commit is contained in:
Mike Cao 2025-05-14 15:29:03 -07:00
parent 1c22c18de5
commit c5086be6eb
4 changed files with 12 additions and 13 deletions

View file

@ -9,6 +9,7 @@
"type": "git", "type": "git",
"url": "https://github.com/umami-software/umami.git" "url": "https://github.com/umami-software/umami.git"
}, },
"type": "module",
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"dev-turbo": "next dev -p 3001 --turbopack", "dev-turbo": "next dev -p 3001 --turbopack",

View file

@ -88,15 +88,13 @@ export function WebsiteTabs({ websiteId }: { websiteId: string }) {
}, },
]; ];
const selected = links const selected = links.find(({ path }) => path && pathname.endsWith(path))?.id || 'overview';
? links.find(({ path }) => path && pathname.endsWith(path))?.id
: 'overview';
return ( return (
<Column gap="2" position="absolute" padding="4" style={{ top: 0, left: 0, bottom: 0 }}> <Column gap="2" position="absolute" padding="4" style={{ top: 0, left: 0, bottom: 0 }}>
{links.map(({ id, label, icon, path }) => { {links.map(({ id, label, icon, path }) => {
return ( return (
<Link key={id} href={renderTeamUrl(`/websites/${websiteId}/${path}`)}> <Link key={id} href={renderTeamUrl(`/websites/${websiteId}${path}`)}>
<Row <Row
alignItems="center" alignItems="center"
padding padding

View file

@ -1,4 +1,4 @@
import { DataTable, DataColumn, Icon } from '@umami/react-zen'; import { DataTable, DataColumn, Icon, Row } from '@umami/react-zen';
import { useMessages, useNavigation, useTimezone } from '@/components/hooks'; import { useMessages, useNavigation, useTimezone } from '@/components/hooks';
import { Empty } from '@/components/common/Empty'; import { Empty } from '@/components/common/Empty';
import { Avatar } from '@/components/common/Avatar'; import { Avatar } from '@/components/common/Avatar';
@ -16,25 +16,25 @@ export function EventsTable({ data = [] }) {
return ( return (
<DataTable data={data}> <DataTable data={data}>
<DataColumn id="session" label={formatMessage(labels.session)}> <DataColumn id="session" label={formatMessage(labels.session)} width="100px">
{(row: any) => ( {(row: any) => (
<Link href={renderTeamUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}> <Link href={renderTeamUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
<Avatar seed={row.sessionId} size={64} /> <Avatar seed={row.sessionId} size={64} />
</Link> </Link>
)} )}
</DataColumn> </DataColumn>
<DataColumn id="event" label={formatMessage(labels.event)}> <DataColumn id="event" label={formatMessage(labels.event)} width="2fr">
{(row: any) => { {(row: any) => {
return ( return (
<> <Row alignItems="center" gap="2">
<Icon>{row.eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon> <Icon>{row.eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
{formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)} {formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
<strong>{row.eventName || row.urlPath}</strong> <strong>{row.eventName || row.urlPath}</strong>
</> </Row>
); );
}} }}
</DataColumn> </DataColumn>
<DataColumn id="created" label={formatMessage(labels.created)}> <DataColumn id="created" label={formatMessage(labels.created)} width="1fr">
{(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')} {(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')}
</DataColumn> </DataColumn>
</DataTable> </DataTable>

View file

@ -12,15 +12,15 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
return ( return (
<DataTable data={data}> <DataTable data={data}>
<DataColumn id="id" label={formatMessage(labels.session)}> <DataColumn id="id" label={formatMessage(labels.session)} width="100px">
{(row: any) => ( {(row: any) => (
<Link href={`sessions/${row.id}`} className={styles.link}> <Link href={`sessions/${row.id}`} className={styles.link}>
<Avatar key={row.id} seed={row.id} size={64} /> <Avatar key={row.id} seed={row.id} size={64} />
</Link> </Link>
)} )}
</DataColumn> </DataColumn>
<DataColumn id="visits" label={formatMessage(labels.visits)} /> <DataColumn id="visits" label={formatMessage(labels.visits)} width="80px" />
<DataColumn id="views" label={formatMessage(labels.views)} /> <DataColumn id="views" label={formatMessage(labels.views)} width="80px" />
<DataColumn id="country" label={formatMessage(labels.country)}> <DataColumn id="country" label={formatMessage(labels.country)}>
{(row: any) => ( {(row: any) => (
<TypeIcon type="country" value={row.country}> <TypeIcon type="country" value={row.country}>