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

Renamed query hooks. Fixed conversion bugs.

Browse source
This commit is contained in:
Mike Cao 2025-03-22 03:48:18 -07:00
parent adca3c36d0
commit 7886c3f393
110 changed files with 423 additions and 489 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
View file

@ -1,5 +1,9 @@
import { GridColumn, GridTable } from '@umami/react-zen';
import { useSessionDataProperties, useSessionDataValues, useMessages } from '@/components/hooks';
import { DataColumn, DataTable } from '@umami/react-zen';
import {
useSessionDataPropertiesQuery,
useSessionDataValuesQuery,
useMessages,
} from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PieChart } from '@/components/charts/PieChart';
import { useState } from 'react';
@ -9,8 +13,8 @@ import styles from './SessionProperties.module.css';
export function SessionProperties({ websiteId }: { websiteId: string }) {
const [propertyName, setPropertyName] = useState('');
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useSessionDataProperties(websiteId);
const { data: values } = useSessionDataValues(websiteId, propertyName);
const { data, isLoading, isFetched, error } = useSessionDataPropertiesQuery(websiteId);
const { data: values } = useSessionDataValuesQuery(websiteId, propertyName);
const chartData =
propertyName && values
? {
@ -28,16 +32,16 @@ export function SessionProperties({ websiteId }: { websiteId: string }) {
return (
<LoadingPanel isLoading={isLoading} isFetched={isFetched} data={data} error={error}>
<div className={styles.container}>
<GridTable data={data} cardMode={false} className={styles.table}>
<GridColumn name="propertyName" label={formatMessage(labels.property)}>
{row => (
<DataTable data={data} className={styles.table}>
<DataColumn id="propertyName" label={formatMessage(labels.property)}>
{(row: any) => (
<div className={styles.link} onClick={() => setPropertyName(row.propertyName)}>
{row.propertyName}
</div>
)}
</GridColumn>
<GridColumn name="total" label={formatMessage(labels.count)} alignment="end" />
</GridTable>
</DataColumn>
<DataColumn id="total" label={formatMessage(labels.count)} align="end" />
</DataTable>
{propertyName && (
<div className={styles.chart}>
<div className={styles.title}>{propertyName}</div>

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

@ -1,4 +1,4 @@
import { useWebsiteSessions } from '@/components/hooks';
import { useWebsiteSessionsQuery } from '@/components/hooks';
import { SessionsTable } from './SessionsTable';
import { DataGrid } from '@/components/common/DataGrid';
import { ReactNode } from 'react';
@ -11,7 +11,7 @@ export function SessionsDataTable({
teamId?: string;
children?: ReactNode;
}) {
const queryResult = useWebsiteSessions(websiteId);
const queryResult = useWebsiteSessionsQuery(websiteId);
return (
<DataGrid queryResult={queryResult} allowSearch={false} renderEmpty={() => children}>

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

@ -1,5 +1,5 @@
import { useMessages } from '@/components/hooks';
import { useWebsiteSessionStats } from '@/components/hooks/queries/useWebsiteSessionStats';
import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsiteSessionStatsQuery';
import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
import { MetricCard } from '@/components/metrics/MetricCard';
import { MetricsBar } from '@/components/metrics/MetricsBar';
@ -8,7 +8,7 @@ import { Flexbox } from '@umami/react-zen';
export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
return (
<Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>

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

@ -5,7 +5,7 @@ import { SessionsMetricsBar } from './SessionsMetricsBar';
import { SessionProperties } from './SessionProperties';
import { WorldMap } from '@/components/metrics/WorldMap';
import { GridRow } from '@/components/layout/Grid';
import { Item, Tabs } from '@umami/react-zen';
import { TabList, Tab, Tabs } from '@umami/react-zen';
import { useState } from 'react';
import { useMessages } from '@/components/hooks';
import { SessionsWeekly } from './SessionsWeekly';
@ -22,9 +22,15 @@ export function SessionsPage({ websiteId }) {
<WorldMap websiteId={websiteId} />
<SessionsWeekly websiteId={websiteId} />
</GridRow>
<Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
<Item key="activity">{formatMessage(labels.activity)}</Item>
<Item key="properties">{formatMessage(labels.properties)}</Item>
<Tabs
selectedKey={tab}
onSelectionChange={(value: any) => setTab(value)}
style={{ marginBottom: 30 }}
>
<TabList>
<Tab key="activity">{formatMessage(labels.activity)}</Tab>
<Tab key="properties">{formatMessage(labels.properties)}</Tab>
</TabList>
</Tabs>
{tab === 'activity' && <SessionsDataTable websiteId={websiteId} />}
{tab === 'properties' && <SessionProperties websiteId={websiteId} />}

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

@ -1,5 +1,5 @@
import Link from 'next/link';
import { GridColumn, GridTable } from '@umami/react-zen';
import { DataColumn, DataTable } from '@umami/react-zen';
import { useFormat, useMessages, useTimezone } from '@/components/hooks';
import { Avatar } from '@/components/common/Avatar';
import styles from './SessionsTable.module.css';
@ -11,48 +11,48 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
const { formatValue } = useFormat();
return (
<GridTable data={data}>
<GridColumn name="id" label={formatMessage(labels.session)} width="100px">
{row => (
<DataTable data={data}>
<DataColumn id="id" label={formatMessage(labels.session)}>
{(row: any) => (
<Link href={`sessions/${row.id}`} className={styles.link}>
<Avatar key={row.id} seed={row.id} size={64} />
</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 => (
</DataColumn>
<DataColumn id="visits" label={formatMessage(labels.visits)} />
<DataColumn id="views" label={formatMessage(labels.views)} />
<DataColumn id="country" label={formatMessage(labels.country)}>
{(row: any) => (
<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)}>
{row => (
</DataColumn>
<DataColumn id="city" label={formatMessage(labels.city)} />
<DataColumn id="browser" label={formatMessage(labels.browser)}>
{(row: any) => (
<TypeIcon type="browser" value={row.browser}>
{formatValue(row.browser, 'browser')}
</TypeIcon>
)}
</GridColumn>
<GridColumn name="os" label={formatMessage(labels.os)}>
{row => (
</DataColumn>
<DataColumn id="os" label={formatMessage(labels.os)}>
{(row: any) => (
<TypeIcon type="os" value={row.os}>
{formatValue(row.os, 'os')}
</TypeIcon>
)}
</GridColumn>
<GridColumn name="device" label={formatMessage(labels.device)}>
{row => (
</DataColumn>
<DataColumn id="device" label={formatMessage(labels.device)}>
{(row: any) => (
<TypeIcon type="device" value={row.device}>
{formatValue(row.device, 'device')}
</TypeIcon>
)}
</GridColumn>
<GridColumn name="lastAt" label={formatMessage(labels.lastSeen)}>
{row => formatTimezoneDate(row.createdAt, 'PPPpp')}
</GridColumn>
</GridTable>
</DataColumn>
<DataColumn id="lastAt" label={formatMessage(labels.lastSeen)}>
{(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')}
</DataColumn>
</DataTable>
);
}

14
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
View file

@ -1,13 +1,13 @@
import { format, startOfDay, addHours } from 'date-fns';
import { useLocale, useMessages, useWebsiteSessionsWeekly } from '@/components/hooks';
import { useLocale, useMessages, useWebsiteSessionsWeeklyQuery } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { getDayOfWeekAsDate } from '@/lib/date';
import styles from './SessionsWeekly.module.css';
import classNames from 'classnames';
import { TooltipPopup } from '@umami/react-zen';
import { Tooltip, TooltipTrigger } from '@umami/react-zen';
export function SessionsWeekly({ websiteId }: { websiteId: string }) {
const { data, ...props } = useWebsiteSessionsWeekly(websiteId);
const { data, ...props } = useWebsiteSessionsWeeklyQuery(websiteId);
const { dateLocale } = useLocale();
const { labels, formatMessage } = useMessages();
const { weekStartsOn } = dateLocale.options;
@ -67,15 +67,13 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
return (
<div key={j} className={classNames(styles.cell)}>
{hour > 0 && (
<TooltipPopup
label={`${formatMessage(labels.visitors)}: ${hour}`}
position="right"
>
<TooltipTrigger>
<div
className={styles.block}
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
</TooltipPopup>
<Tooltip>{`${formatMessage(labels.visitors)}: ${hour}`}</Tooltip>
</TooltipTrigger>
)}
</div>
);

4
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
View file

@ -1,7 +1,7 @@
import { isSameDay } from 'date-fns';
import { Loading, Icon, StatusLight } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { useSessionActivity, useTimezone } from '@/components/hooks';
import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
import styles from './SessionActivity.module.css';
import { Fragment } from 'react';
@ -17,7 +17,7 @@ export function SessionActivity({
endDate: Date;
}) {
const { formatTimezoneDate } = useTimezone();
const { data, isLoading } = useSessionActivity(websiteId, sessionId, startDate, endDate);
const { data, isLoading } = useSessionActivityQuery(websiteId, sessionId, startDate, endDate);
if (isLoading) {
return <Loading position="page" />;

4
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
View file

@ -1,5 +1,5 @@
import { TextOverflow } from '@umami/react-zen';
import { useMessages, useSessionData } from '@/components/hooks';
import { useMessages, useSessionDataQuery } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { DATA_TYPES } from '@/lib/constants';
import styles from './SessionData.module.css';
@ -7,7 +7,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
const { formatMessage, labels } = useMessages();
const { data, ...query } = useSessionData(websiteId, sessionId);
const { data, ...query } = useSessionDataQuery(websiteId, sessionId);
return (
<>

4
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
View file

@ -1,7 +1,7 @@
'use client';
import { Avatar } from '@/components/common/Avatar';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useWebsiteSession } from '@/components/hooks';
import { useWebsiteSessionQuery } from '@/components/hooks';
import { WebsiteHeader } from '../../WebsiteHeader';
import { SessionActivity } from './SessionActivity';
import { SessionData } from './SessionData';
@ -16,7 +16,7 @@ export function SessionDetailsPage({
websiteId: string;
sessionId: string;
}) {
const { data, ...query } = useWebsiteSession(websiteId, sessionId);
const { data, ...query } = useWebsiteSessionQuery(websiteId, sessionId);
return (
<LoadingPanel {...query} loadingIcon="spinner" data={data}>