watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2025-12-06 01:18:00 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Card mode for tables.

Browse source
This commit is contained in:
Mike Cao 2025-10-13 13:01:01 -07:00
parent df3ae72ab7
commit d9b08d9491
14 changed files with 81 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.husky/pre-commit
View file

@ -1,4 +1 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged

2
package.json
View file

@ -78,7 +78,7 @@
"@react-spring/web": "^10.0.3",
"@svgr/cli": "^8.1.0",
"@tanstack/react-query": "^5.90.2",
"@umami/react-zen": "^0.189.0",
"@umami/react-zen": "^0.195.0",
"@umami/redis-client": "^0.29.0",
"bcryptjs": "^3.0.2",
"chalk": "^5.6.2",

18
pnpm-lock.yaml generated
View file

@ -45,8 +45,8 @@ importers:
specifier: ^5.90.2
version: 5.90.2(react@19.1.1)
'@umami/react-zen':
specifier: ^0.189.0
version: 0.189.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))
specifier: ^0.195.0
version: 0.195.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))
'@umami/redis-client':
specifier: ^0.29.0
version: 0.29.0
@ -2756,8 +2756,8 @@ packages:
resolution: {integrity: sha512-qsaFBA3e09MIDAGFUrTk+dzqtfv1XPVz8t8d1f0ybTzrCY7BKiMC5cjrl1O/P7UmHsNyW90EYSkU/ZWpmXelag==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@umami/react-zen@0.189.0':
resolution: {integrity: sha512-E5t5HvMrGfuilrnF6LJV+jeooC4qXpwUC4VGhnTPV24B1vdMC2W9ByzZreNaomgZy8XOVAk1wZf8QX1elloUjA==}
'@umami/react-zen@0.195.0':
resolution: {integrity: sha512-DI/o0AOwq6wfWEx+PgXFQ8xV0NJFP9xY1qd0+cv2Bme9Bho0U5+vxyFPkHawJyC7bfMDi3BgC7JHgTqeCqE99A==}
'@umami/redis-client@0.29.0':
resolution: {integrity: sha512-Jaqh++jskqDB7ny75pfC02OvKp1JTS4asGDsFrRL3qy8sxL3PAl9+/mybCJe4/6vWrXDJKqpgkSfUDJq2bFjyw==}
@ -6350,8 +6350,8 @@ packages:
peerDependencies:
react: '>=16.13.1'
react-hook-form@7.64.0:
resolution: {integrity: sha512-fnN+vvTiMLnRqKNTVhDysdrUay0kUUAymQnFIznmgDvapjveUWOOPqMNzPg+A+0yf9DuE2h6xzBjN1s+Qx8wcg==}
react-hook-form@7.65.0:
resolution: {integrity: sha512-xtOzDz063WcXvGWaHgLNrNzlsdFgtUWcb32E6WFaGTd7kPZG3EeDusjdZfUsPwKCKVXy1ZlntifaHZ4l8pAsmw==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^16.8.0 || ^17 || ^18 || ^19
@ -10387,7 +10387,7 @@ snapshots:
'@typescript-eslint/types': 8.45.0
eslint-visitor-keys: 4.2.1
'@umami/react-zen@0.189.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))':
'@umami/react-zen@0.195.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))':
dependencies:
'@fontsource/jetbrains-mono': 5.2.8
'@internationalized/date': 3.10.0
@ -10401,7 +10401,7 @@ snapshots:
react: 19.1.1
react-aria-components: 1.13.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
react-dom: 19.1.1(react@19.1.1)
react-hook-form: 7.64.0(react@19.1.1)
react-hook-form: 7.65.0(react@19.1.1)
react-icons: 5.5.0(react@19.1.1)
thenby: 1.3.4
zustand: 5.0.8(@types/react@19.1.16)(immer@10.1.3)(react@19.1.1)(use-sync-external-store@1.6.0(react@19.1.1))
@ -14534,7 +14534,7 @@ snapshots:
'@babel/runtime': 7.28.3
react: 19.1.1
react-hook-form@7.64.0(react@19.1.1):
react-hook-form@7.65.0(react@19.1.1):
dependencies:
react: 19.1.1

6
src/app/(main)/App.tsx
View file

@ -28,9 +28,9 @@ export function App({ children }) {
}
return (
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} height="100vh" width="100%" backgroundColor="2">
<Row display={{ xs: 'flex', md: 'none' }} alignItems="center" gap></Row>
<Column display={{ xs: 'none', md: 'flex' }}>
<Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} height="100vh" width="100%" backgroundColor="2">
<Row display={{ xs: 'flex', lg: 'none' }} alignItems="center" gap></Row>
<Column display={{ xs: 'none', lg: 'flex' }}>
<SideNav />
</Column>
<Column alignItems="center" overflowY="auto" overflowX="hidden" position="relative">

11
src/app/(main)/links/LinksTable.tsx
View file

@ -1,23 +1,18 @@
import Link from 'next/link';
import { DataTable, DataColumn, Row } from '@umami/react-zen';
import { DataTable, DataColumn, Row, DataTableProps } from '@umami/react-zen';
import { useMessages, useNavigation, useSlug } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { DateDistance } from '@/components/common/DateDistance';
import { ExternalLink } from '@/components/common/ExternalLink';
import { LinkEditButton } from './LinkEditButton';
import { LinkDeleteButton } from './LinkDeleteButton';
export function LinksTable({ data = [] }) {
export function LinksTable(props: DataTableProps) {
const { formatMessage, labels } = useMessages();
const { websiteId, renderUrl } = useNavigation();
const { getSlugUrl } = useSlug('link');
if (data.length === 0) {
return <Empty />;
}
return (
<DataTable data={data}>
<DataTable {...props}>
<DataColumn id="name" label={formatMessage(labels.name)}>
{({ id, name }: any) => {
return <Link href={renderUrl(`/links/${id}`)}>{name}</Link>;

11
src/app/(main)/pixels/PixelsTable.tsx
View file

@ -1,23 +1,18 @@
import Link from 'next/link';
import { DataTable, DataColumn, Row } from '@umami/react-zen';
import { DataTable, DataColumn, Row, DataTableProps } from '@umami/react-zen';
import { useMessages, useNavigation, useSlug } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { DateDistance } from '@/components/common/DateDistance';
import { PixelEditButton } from './PixelEditButton';
import { PixelDeleteButton } from './PixelDeleteButton';
import { ExternalLink } from '@/components/common/ExternalLink';
export function PixelsTable({ data = [] }) {
export function PixelsTable(props: DataTableProps) {
const { formatMessage, labels } = useMessages();
const { renderUrl } = useNavigation();
const { getSlugUrl } = useSlug('pixel');
if (data.length === 0) {
return <Empty />;
}
return (
<DataTable data={data}>
<DataTable {...props}>
<DataColumn id="name" label={formatMessage(labels.name)}>
{({ id, name }: any) => {
return <Link href={renderUrl(`/pixels/${id}`)}>{name}</Link>;

14
src/app/(main)/teams/TeamsTable.tsx
View file

@ -1,19 +1,17 @@
import { DataColumn, DataTable } from '@umami/react-zen';
import { DataColumn, DataTable, DataTableProps } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { ROLES } from '@/lib/constants';
import { ReactNode } from 'react';
export function TeamsTable({
data = [],
renderLink,
}: {
data: any[];
export interface TeamsTableProps extends DataTableProps {
renderLink?: (row: any) => ReactNode;
}) {
}
export function TeamsTable({ renderLink, ...props }: TeamsTableProps) {
const { formatMessage, labels } = useMessages();
return (
<DataTable data={data}>
<DataTable {...props}>
<DataColumn id="name" label={formatMessage(labels.name)}>
{renderLink}
</DataColumn>

20
src/app/(main)/websites/WebsitesTable.tsx
View file

@ -1,30 +1,22 @@
import { ReactNode } from 'react';
import { Icon, DataTable, DataColumn } from '@umami/react-zen';
import { Icon, DataTable, DataColumn, DataTableProps } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { useMessages, useNavigation } from '@/components/hooks';
import { SquarePen } from '@/components/icons';
import { Empty } from '@/components/common/Empty';
export function WebsitesTable({
data = [],
showActions,
renderLink,
}: {
data: Record<string, any>[];
export interface WebsitesTableProps extends DataTableProps {
showActions?: boolean;
allowEdit?: boolean;
allowView?: boolean;
renderLink?: (row: any) => ReactNode;
}) {
}
export function WebsitesTable({ showActions, renderLink, ...props }: WebsitesTableProps) {
const { formatMessage, labels } = useMessages();
const { renderUrl } = useNavigation();
if (data.length === 0) {
return <Empty />;
}
return (
<DataTable data={data}>
<DataTable {...props}>
<DataColumn id="name" label={formatMessage(labels.name)}>
{renderLink}
</DataColumn>

42
src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
View file

@ -1,6 +1,5 @@
import { DataTable, DataColumn, Icon, Row, Text } from '@umami/react-zen';
import { DataTable, DataColumn, Row, Text, DataTableProps, IconLabel } from '@umami/react-zen';
import { useFormat, useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { Avatar } from '@/components/common/Avatar';
import Link from 'next/link';
import { Eye } from '@/components/icons';
@ -8,35 +7,44 @@ import { Lightning } from '@/components/svg';
import { DateDistance } from '@/components/common/DateDistance';
import { TypeIcon } from '@/components/common/TypeIcon';
export function EventsTable({ data = [] }) {
export function EventsTable(props: DataTableProps) {
const { formatMessage, labels } = useMessages();
const { updateParams } = useNavigation();
const { formatValue } = useFormat();
if (data.length === 0) {
return <Empty />;
}
return (
<DataTable data={data}>
<DataTable {...props}>
<DataColumn id="event" label={formatMessage(labels.event)} width="2fr">
{(row: any) => {
return (
<Row alignItems="center" gap="2">
<Link href={updateParams({ session: row.sessionId })}>
<Avatar seed={row.sessionId} size={32} />
</Link>
<Icon>{row.eventName ? <Lightning /> : <Eye />}</Icon>
<Text>
{formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
</Text>
<Text weight="bold" style={{ maxWidth: '300px' }} truncate>
<Row alignItems="center" wrap="wrap" gap>
<Row>
<IconLabel
icon={row.eventName ? <Lightning /> : <Eye />}
label={formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
/>
</Row>
<Text
weight="bold"
style={{ maxWidth: '300px' }}
title={row.eventName || row.urlPath}
truncate
>
{row.eventName || row.urlPath}
</Text>
</Row>
);
}}
</DataColumn>
<DataColumn id="session" label={formatMessage(labels.session)} width="80px">
{(row: any) => {
return (
<Link href={updateParams({ session: row.sessionId })}>
<Avatar seed={row.sessionId} size={32} />
</Link>
);
}}
</DataColumn>
<DataColumn id="location" label={formatMessage(labels.location)}>
{(row: any) => (
<TypeIcon type="country" value={row.country}>

2
src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx
View file

@ -8,7 +8,7 @@ export function SessionsDataTable({ websiteId }: { websiteId?: string; teamId?:
return (
<DataGrid query={queryResult} allowPaging allowSearch>
{({ data }) => {
return <SessionsTable data={data} showDomain={!websiteId} />;
return <SessionsTable data={data} />;
}}
</DataGrid>
);

6
src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
View file

@ -1,17 +1,17 @@
import Link from 'next/link';
import { DataColumn, DataTable } from '@umami/react-zen';
import { DataColumn, DataTable, DataTableProps } from '@umami/react-zen';
import { useFormat, useMessages, useNavigation } from '@/components/hooks';
import { Avatar } from '@/components/common/Avatar';
import { TypeIcon } from '@/components/common/TypeIcon';
import { DateDistance } from '@/components/common/DateDistance';
export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
export function SessionsTable(props: DataTableProps) {
const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
const { updateParams } = useNavigation();
return (
<DataTable data={data}>
<DataTable {...props}>
<DataColumn id="id" label={formatMessage(labels.session)} width="100px">
{(row: any) => (
<Link href={updateParams({ session: row.id })}>

21
src/components/common/DataGrid.tsx
View file

@ -1,5 +1,12 @@
import { ReactNode, useState, useCallback } from 'react';
import { SearchField, Row, Column } from '@umami/react-zen';
import {
ReactNode,
useState,
useCallback,
ReactElement,
cloneElement,
isValidElement,
} from 'react';
import { SearchField, Row, Column, useBreakpoint } from '@umami/react-zen';
import { UseQueryResult } from '@tanstack/react-query';
import { useMessages, useNavigation } from '@/components/hooks';
import { Pager } from '@/components/common/Pager';
@ -35,6 +42,8 @@ export function DataGrid({
const { router, updateParams, query: queryParams } = useNavigation();
const [search, setSearch] = useState(queryParams?.search || data?.search || '');
const showPager = allowPaging && data && data.count > data.pageSize;
const breakpoint = useBreakpoint();
const displayMode = ['xs', 'sm', 'md', 'lg'].includes(breakpoint) ? 'cards' : undefined;
const handleSearch = (value: string) => {
if (value !== search) {
@ -50,6 +59,8 @@ export function DataGrid({
[search],
);
const child = data ? (typeof children === 'function' ? children(data) : children) : null;
return (
<Column gap="4" minHeight="300px">
{allowSearch && (
@ -73,7 +84,11 @@ export function DataGrid({
>
{data && (
<>
<Column>{typeof children === 'function' ? children(data) : children}</Column>
<Column>
{isValidElement(child)
? cloneElement(child as ReactElement<any>, { displayMode })
: child}
</Column>
{showPager && (
<Row marginTop="6">
<Pager

4
src/components/common/PageBody.tsx
View file

@ -31,9 +31,9 @@ export function PageBody({
<Column
{...props}
width="100%"
paddingBottom="9"
paddingBottom="6"
maxWidth={maxWidth}
paddingX="4"
paddingX={{ xs: '3', md: '6' }}
style={{ margin: '0 auto' }}
>
{children}

1
src/components/input/NavButton.tsx
View file

@ -61,6 +61,7 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
borderRadius
shadow="1"
maxHeight="40px"
role="button"
style={{ cursor: 'pointer', textWrap: 'nowrap', outline: 'none' }}
>
<Row alignItems="center" position="relative" gap maxHeight="40px">