watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 15:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Added metrics bar and date range to sessions.

Browse source
This commit is contained in:
Mike Cao 2024-08-07 00:10:25 -07:00
parent 36663bd52d
commit b9068c0050
44 changed files with 859 additions and 739 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/(main)/reports/ReportsTable.tsx
View file

@ -1,4 +1,4 @@
import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
import { GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
import LinkButton from 'components/common/LinkButton';
import { useMessages, useLogin, useTeamUrl } from 'components/hooks';
import { REPORT_TYPES } from 'lib/constants';
@ -7,11 +7,10 @@ import ReportDeleteButton from './ReportDeleteButton';
export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {
const { formatMessage, labels } = useMessages();
const { user } = useLogin();
const breakpoint = useBreakpoint();
const { renderTeamUrl } = useTeamUrl();
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="description" label={formatMessage(labels.description)} />
<GridColumn name="type" label={formatMessage(labels.type)}>

13
src/app/(main)/reports/create/ReportTemplates.tsx
View file

@ -4,6 +4,7 @@ import Magnet from 'assets/magnet.svg';
import Path from 'assets/path.svg';
import Tag from 'assets/tag.svg';
import Target from 'assets/target.svg';
import Money from 'assets/money.svg';
import { useMessages, useTeamUrl } from 'components/hooks';
import PageHeader from 'components/layout/PageHeader';
import Link from 'next/link';
@ -51,12 +52,12 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
url: renderTeamUrl('/reports/journey'),
icon: <Path />,
},
// {
// title: formatMessage(labels.revenue),
// description: formatMessage(labels.revenueDescription),
// url: renderTeamUrl('/reports/revenue'),
// icon: <Path />,
// },
{
title: formatMessage(labels.revenue),
description: formatMessage(labels.revenueDescription),
url: renderTeamUrl('/reports/revenue'),
icon: <Money />,
},
];
return (

6
src/app/(main)/reports/revenue/RevenueReport.tsx
View file

@ -4,7 +4,7 @@ import Report from '../[reportId]/Report';
import ReportHeader from '../[reportId]/ReportHeader';
import ReportMenu from '../[reportId]/ReportMenu';
import ReportBody from '../[reportId]/ReportBody';
import Target from 'assets/target.svg';
import Money from 'assets/money.svg';
import { REPORT_TYPES } from 'lib/constants';
const defaultParameters = {
@ -15,12 +15,12 @@ const defaultParameters = {
export default function RevenueReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Target />} />
<ReportHeader icon={<Money />} />
<ReportMenu>
<RevenueParameters />
</ReportMenu>
<ReportBody>
<RevenueChart />
<RevenueChart unit="day" />
</ReportBody>
</Report>
);

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

@ -1,4 +1,4 @@
import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
import { GridColumn, GridTable, Icon, Text } from 'react-basics';
import { useMessages } from 'components/hooks';
import Icons from 'components/icons';
import { ROLES } from 'lib/constants';
@ -13,10 +13,9 @@ export function TeamsTable({
showActions?: boolean;
}) {
const { formatMessage, labels } = useMessages();
const breakpoint = useBreakpoint();
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="owner" label={formatMessage(labels.owner)}>
{row => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}

5
src/app/(main)/settings/users/UsersTable.tsx
View file

@ -1,4 +1,4 @@
import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
import { formatDistance } from 'date-fns';
import { ROLES } from 'lib/constants';
import { useMessages, useLocale } from 'components/hooks';
@ -14,10 +14,9 @@ export function UsersTable({
}) {
const { formatMessage, labels } = useMessages();
const { dateLocale } = useLocale();
const breakpoint = useBreakpoint();
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridTable data={data}>
<GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
<GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}>
{row =>

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

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
import { useMessages, useTeamUrl } from 'components/hooks';
import LinkButton from 'components/common/LinkButton';
@ -20,7 +20,6 @@ export function WebsitesTable({
children,
}: WebsitesTableProps) {
const { formatMessage, labels } = useMessages();
const breakpoint = useBreakpoint();
const { renderTeamUrl } = useTeamUrl();
if (!data?.length) {
@ -28,7 +27,7 @@ export function WebsitesTable({
}
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="domain" label={formatMessage(labels.domain)} />
{showActions && (

5
src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx
View file

@ -1,4 +1,4 @@
import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
import { GridColumn, GridTable } from 'react-basics';
import { useMessages, useLogin } from 'components/hooks';
import { ROLES } from 'lib/constants';
import TeamMemberRemoveButton from './TeamMemberRemoveButton';
@ -15,7 +15,6 @@ export function TeamMembersTable({
}) {
const { formatMessage, labels } = useMessages();
const { user } = useLogin();
const breakpoint = useBreakpoint();
const roles = {
[ROLES.teamOwner]: formatMessage(labels.teamOwner),
@ -25,7 +24,7 @@ export function TeamMembersTable({
};
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridTable data={data}>
<GridColumn name="username" label={formatMessage(labels.username)}>
{row => row?.user?.username}
</GridColumn>

5
src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx
View file

@ -1,4 +1,4 @@
import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
import { GridColumn, GridTable, Icon, Text } from 'react-basics';
import { useLogin, useMessages } from 'components/hooks';
import Icons from 'components/icons';
import LinkButton from 'components/common/LinkButton';
@ -14,10 +14,9 @@ export function TeamWebsitesTable({
}) {
const { user } = useLogin();
const { formatMessage, labels } = useMessages();
const breakpoint = useBreakpoint();
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridTable data={data}>
<GridColumn name="name" label={formatMessage(labels.name)} />
<GridColumn name="domain" label={formatMessage(labels.domain)} />
<GridColumn name="createdBy" label={formatMessage(labels.createdBy)}>

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

@ -52,7 +52,7 @@ export function WebsiteHeader({
},
{
label: formatMessage(labels.events),
icon: <Icons.Nodes />,
icon: <Icons.Bolt />,
path: '/events',
},
];

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

@ -1,12 +1,13 @@
import { GridTable, GridColumn } from 'react-basics';
import { GridTable, GridColumn, Icon } from 'react-basics';
import { useLocale, useMessages, useTeamUrl } from 'components/hooks';
import Empty from 'components/common/Empty';
import { formatDistance } from 'date-fns';
import Avatar from 'components/common/Avatar';
import Link from 'next/link';
import Icons from 'components/icons';
import { formatDate } from 'lib/date';
export function EventsTable({ data = [] }) {
const { dateLocale } = useLocale();
const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useTeamUrl();
@ -27,20 +28,15 @@ export function EventsTable({ data = [] }) {
{row => {
return (
<>
<Icon>{row.eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
{formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
<strong>{row.eventName}</strong>
<strong>{row.eventName || row.urlPath}</strong>
</>
);
}}
</GridColumn>
<GridColumn name="urlPath" label={formatMessage(labels.path)} />
<GridColumn name="created" label={formatMessage(labels.created)}>
{row =>
formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true,
locale: dateLocale,
})
}
<GridColumn name="created" label={formatMessage(labels.created)} width={'300px'}>
{row => formatDate(new Date(row.createdAt), 'PPPpp', locale)}
</GridColumn>
</GridTable>
);

5
src/app/(main)/websites/[websiteId]/sessions/SessionMetricsBar.tsx
View file

@ -1,5 +0,0 @@
export function SessionMetricsBar({ websiteId }: { websiteId: string }) {
return <h1>{websiteId}</h1>;
}
export default SessionMetricsBar;

42
src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx Normal file
View file

@ -0,0 +1,42 @@
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import { Flexbox, Loading } from 'react-basics';
import MetricCard from 'components/metrics/MetricCard';
import { useMessages } from 'components/hooks';
import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
import { formatLongNumber } from 'lib/format';
export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading } = useWebsiteStats(websiteId);
return (
<Flexbox direction="row" justifyContent="space-between" style={{ height: 120 }}>
<Flexbox direction="row">
{isLoading && <Loading icon="dots" />}
{!isLoading && data && (
<>
<MetricCard
value={data.visitors.value}
label={formatMessage(labels.visitors)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data.visits.value}
label={formatMessage(labels.visits)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data.pageviews.value}
label={formatMessage(labels.views)}
formatValue={formatLongNumber}
/>
<MetricCard value={data?.countries?.value} label={formatMessage(labels.countries)} />
</>
)}
</Flexbox>
<WebsiteDateFilter websiteId={websiteId} />
</Flexbox>
);
}
export default SessionsMetricsBar;

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

@ -1,11 +1,13 @@
'use client';
import WebsiteHeader from '../WebsiteHeader';
import SessionsDataTable from './SessionsDataTable';
import SessionsMetricsBar from './SessionsMetricsBar';
export function SessionsPage({ websiteId }) {
return (
<>
<WebsiteHeader websiteId={websiteId} />
<SessionsMetricsBar websiteId={websiteId} />
<SessionsDataTable websiteId={websiteId} />
</>
);

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

@ -1,29 +1,33 @@
import Link from 'next/link';
import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
import { GridColumn, GridTable } from 'react-basics';
import { useFormat, useLocale, useMessages } from 'components/hooks';
import Avatar from 'components/common/Avatar';
import styles from './SessionsTable.module.css';
import { formatDate } from 'lib/date';
import TypeIcon from 'components/common/TypeIcon';
export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
const breakpoint = useBreakpoint();
const { formatValue } = useFormat();
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
<GridColumn name="id" label="ID" width="300px">
<GridTable data={data}>
<GridColumn name="id" label={formatMessage(labels.session)} width="100px">
{row => (
<Link href={`sessions/${row.id}`} className={styles.link}>
<Avatar key={row.id} seed={row.id} size={64} />
{row.id}
</Link>
)}
</GridColumn>
<GridColumn name="visits" label={formatMessage(labels.visits)} width="100px" />
<GridColumn name="views" label={formatMessage(labels.views)} width="100px" />
<GridColumn name="country" label={formatMessage(labels.country)}>
{row => formatValue(row.country, 'country')}
{row => (
<TypeIcon type="country" value={row.country}>
{formatValue(row.country, 'country')}
</TypeIcon>
)}
</GridColumn>
<GridColumn name="city" label={formatMessage(labels.city)} />
<GridColumn name="browser" label={formatMessage(labels.browser)}>